JavaScript下搭建ag-grid

1. 下载ag-grld.js

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

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

2. 导入项目，构建基础骨架

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

});

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