JavaScript下搭建ag-grid

最新推荐文章于 2024-03-13 18:05:01 发布

郭帅不爱打代码

最新推荐文章于 2024-03-13 18:05:01 发布

阅读量3.2k

点赞数

分类专栏： datagrid 文章标签： ag-grid

本文链接：https://blog.csdn.net/gs54956/article/details/69486250

版权

2 篇文章 0 订阅

订阅专栏

 
 https://github.com/ceolter/ag-grid/ 

 
 可以从github中下载，ag-grid.js 在dist目录中，将其取出，放到自己的项目中 

 
 demo.jsp 

  //将 ag-grid.js 导入项目，新建一个单独的文件example-js.js用来写我们的基础数据 

  <script src="/static/tablejs/ag-grid.js"></script> 

  <script src="/static/tablejs/example-js.js"></script> 

  //有一个这样的div，用来显示数据表格的位置 

  //我曾经有一次没有写高度和宽度导致无法显示 

  <div id="myGrid" style="width: 100%;height: 200px;" class="ag-fresh"></div> 

 
 example-js.js 

  //创建列的数据 

  var columnDefs = [ 

  {headerName: "床位号", field: "number", editable:true,checkboxSelection: true}, 

  {headerName: "地址", field: "info"}, 

  {headerName: "日期", field: "startTime"} 

];

  //创建行的数据，列和行之间通过列中定义的field字段来对应 

  var rowData = [ 

  {make: "Toyota", model: "Celica", price: 35000}, 

  {make: "Ford", model: "Mondeo", price: 32000}, 

  {make: "Porsche", model: "Boxter", price: 72000} 

];

  // let the grid know which columns and what data to use 

  var gridOptions = { 

  columnDefs: columnDefs , 

  rowData: rowData, 

  rowSelection: 'single',//这个是设置单行选择 

};

  写上下面这句话就ok了，然后重启服务，看看你的页面效果 

  // wait for the document to be loaded, otherwise ag-Grid will not find the div in the document. 

  document.addEventListener("DOMContentLoaded", function() { 

  // 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); 

});

  我这个图和上面的例子是不一样的，懂了就好，更多内容，边学边记 

关注