zoukankan      html  css  js  c++  java
  • ag-grid setRowData重新设置表格行数据

    ag-grid 通过setRowData重新设置表格行数据,如果我们想通过自己定义的ajax方法更新行数据(会清除原因数据),这时就需要用到setRowData方法。

    //重新设置表格数据**************************************
    function reset() {
        gridOptions.api.setRowData([{ id: 1, name: 'it小书童', url: 'www.itxst.com', catalog: '软件' }]);
    }
    //定义列
    var columnDefs = [
        { headerName: '', checkboxSelection: true, headerCheckboxSelection: true,  50, 'pinned': 'left' },
        {
            headerName: '网站名称', field: 'name', filter: 'agTextColumnFilter', 'pinned': 'left',  100,
        },
        { headerName: '网址', field: 'url' },
        { headerName: '行业', field: 'catalog', filter: 'agNumberColumnFilter' }
    ];
    
    //表格数据
    var rowData = [
        { id: 1, name: '网易', url: 'www.163.com', catalog: '门户' },
        { id: 2, name: 'QQ', url: 'www.qq.com', catalog: 'IM' },
        { id: 3, name: '微软', url: 'www.microsoft.com', catalog: '软件' }
    ];
    
    //aggrid设置
    var gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        rowSelection: 'multiple',
        rowMultiSelectWithClick: true,
        suppressCellSelection: true
    };
    
    
    //在dom加载完成后 初始化agGrid完成
    document.addEventListener("DOMContentLoaded", function () {
        var eGridDiv = document.querySelector('#myGrid');
        agGrid = new agGrid.Grid(eGridDiv, gridOptions);
    });

    转载请注明: http://www.itxst.com/ag-grid/tutorial.html

    ag-grid是一款功能和性能强大外观漂亮的表格插件,ag-grid几乎能满足你对数据表格所有需求.

  • 相关阅读:
    2
    1
    Hadoop集群常见报错汇总
    Kerberos常见报错汇总
    Python软件包管理工具pip实战篇
    Python软件包及环境管理器conda实战篇
    Python的Virtualenv与Venv环境管理器
    Python的编辑工具-Jupyter notebook实战案例
    文档工具GitBook使用指南
    20200912
  • 原文地址:https://www.cnblogs.com/logspool/p/12825505.html
Copyright © 2011-2022 走看看