推送 Ag-Grid 更新值?
Ag-Grid updating values pushed?
制作了 ag-grid,为点击创建了事件以将点击的数据(以及对它的一些操作)添加到第二个网格。
检查行数据时,值被推送,但不显示。
如何进行第二次 table 更新?请输入以下代码,谢谢!!
<div id="myGrid" style="height: 1000px; width:1000px;" class="ag-theme-alpine-dark"></div>
<div id="mySecondGrid" style="height: 100rem;width:100rem;" class="ag-theme-alpine-dark"></div>
<script type="text/javascript" charset="utf-8">
// specify the columns for first table
var columnDefs = [
{headerName: "Col1", field: "Col1"},
{headerName: "Col2", field: "Col2"},
{headerName: "Col3", field: "Col3"}
];
// specify the data for first table
var rowData = [
{ Col1:"25",Col2:"7.25",Col3:"1"},
{ Col1:"5",Col2:"7.5",Col3:"3"},
{ Col1:"13",Col2:"7.75",Col3:"7"},
];
// grid options first table
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
rowSelection: 'single',
suppressMovableColumns:true,
};
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(eGridDiv, gridOptions);
//add Listener
gridOptions.api.addEventListener('rowClicked', myRowClickedHandler);
//Variable to hold data for second grid
var a = [ ];
var columnDefs2 = [
{headerName: "TIMESCLICKED", field: "TimesClicked"},
{headerName: "ATT1", field: "Att1"},
{headerName: "ATT2", field: "Att2"}
];
var gridOptions2 = {
columnDefs: columnDefs2,
suppressMovableColumns:true,
rowData: a,
}
var eGridDiv2 = document.querySelector('#mySecondGrid');
new agGrid.Grid( eGridDiv2, gridOptions2);
//should update second grid by passing data from items clicked on in first grid not updating ?
function myRowClickedHandler(event) {
a.push({TimesClicked: 1, Att1: gridOptions.api.getSelectedNodes()[0].data.Col1, Att2: gridOptions.api.getSelectedNodes()[0].data.Col2})
}
</script>
您应该设置行数据 --> gridOptions2.api.setRowData(a)
将对象放入 'a' 变量后。
制作了 ag-grid,为点击创建了事件以将点击的数据(以及对它的一些操作)添加到第二个网格。
检查行数据时,值被推送,但不显示。
如何进行第二次 table 更新?请输入以下代码,谢谢!!
<div id="myGrid" style="height: 1000px; width:1000px;" class="ag-theme-alpine-dark"></div>
<div id="mySecondGrid" style="height: 100rem;width:100rem;" class="ag-theme-alpine-dark"></div>
<script type="text/javascript" charset="utf-8">
// specify the columns for first table
var columnDefs = [
{headerName: "Col1", field: "Col1"},
{headerName: "Col2", field: "Col2"},
{headerName: "Col3", field: "Col3"}
];
// specify the data for first table
var rowData = [
{ Col1:"25",Col2:"7.25",Col3:"1"},
{ Col1:"5",Col2:"7.5",Col3:"3"},
{ Col1:"13",Col2:"7.75",Col3:"7"},
];
// grid options first table
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
rowSelection: 'single',
suppressMovableColumns:true,
};
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(eGridDiv, gridOptions);
//add Listener
gridOptions.api.addEventListener('rowClicked', myRowClickedHandler);
//Variable to hold data for second grid
var a = [ ];
var columnDefs2 = [
{headerName: "TIMESCLICKED", field: "TimesClicked"},
{headerName: "ATT1", field: "Att1"},
{headerName: "ATT2", field: "Att2"}
];
var gridOptions2 = {
columnDefs: columnDefs2,
suppressMovableColumns:true,
rowData: a,
}
var eGridDiv2 = document.querySelector('#mySecondGrid');
new agGrid.Grid( eGridDiv2, gridOptions2);
//should update second grid by passing data from items clicked on in first grid not updating ?
function myRowClickedHandler(event) {
a.push({TimesClicked: 1, Att1: gridOptions.api.getSelectedNodes()[0].data.Col1, Att2: gridOptions.api.getSelectedNodes()[0].data.Col2})
}
</script>
您应该设置行数据 --> gridOptions2.api.setRowData(a)
将对象放入 'a' 变量后。