Ag-Grid 更新值推送? [英] Ag-Grid updating values pushed?

问题描述

制作 ag-grid，为点击创建事件以将点击的数据(以及对它的一些操作)添加到第二个网格.

检查行数据时会推送值，但不显示.

如何更新第二个表?下面的代码，请&谢谢！！

//指定第一个表的列var columnDefs = [{headerName:Col1"，字段:Col1"}，{headerName:Col2"，字段:Col2"}，{headerName:Col3"，字段:Col3"}];//指定第一个表的数据var rowData = [{ Col1:25"，Col2:7.25"，Col3:1"}，{ Col1:5"，Col2:7.5"，Col3:3"}，{ Col1:13"，Col2:7.75"，Col3:7"}，];//网格选项第一个表var gridOptions = {columnDefs: columnDefs,行数据:行数据，行选择:'单'，抑制MovableColumns:真，};//查找我们希望 Grid 使用的容器var eGridDiv = document.querySelector('#myGrid');//创建传入 div 的网格以与列一起使用 &我们要使用的数据新的 agGrid.Grid(eGridDiv, gridOptions);//添加监听器gridOptions.api.addEventListener('rowClicked', myRowClickedHandler);//保存第二个网格数据的变量var a = [];var columnDefs2 = [{headerName:TIMESCLICKED"，字段:TimesClicked"}，{headerName:ATT1"，字段:Att1"}，{headerName:ATT2"，字段:Att2"}];var gridOptions2 = {columnDefs: columnDefs2,抑制MovableColumns:真，行数据:一个，}var eGridDiv2 = document.querySelector('#mySecondGrid');new agGrid.Grid( eGridDiv2, gridOptions2);//是否应该通过传递来自第一个网格中点击的项目的数据而不更新来更新第二个网格?函数 myRowClickedHandler(event) {a.push({TimesClicked: 1, Att1: gridOptions.api.getSelectedNodes()[0].data.Col1, Att2: gridOptions.api.getSelectedNodes()[0].data.Col2})}

解决方案

你应该设置行数据 -->gridOptions2.api.setRowData(a) 在你把对象放到你的 'a' 变量之后.

https://plnkr.co/edit/mPJQpms0X6PlqRRy

Made ag-grid, created event for click to add that clicked data (and some manipulations of it) to a second grid.

Values get pushed, when checking row data, but does not display.

How can I make the second table update ? Code below, please & Thank you!!

<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>

解决方案

You should set the row data --> gridOptions2.api.setRowData(a) after you pused the object to your 'a' variable.

https://plnkr.co/edit/mPJQpms0X6PlqRRy

这篇关于Ag-Grid 更新值推送?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！