<html>
<head>
<!-- reference the ag-Grid library-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/10.1.0/ag-grid.js"></script>-->
<script src="ag-grid.js"></script>
<style>
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Simple ag-Grid Example</h1>
<!-- the div ag-Grid will use to render it's data -->
<div id="myGrid" style="height: 200px;width:700px" class="ag-fresh"></div>
<p>
<button type='button' onclick="deselectAllFnc()">clear selection</button>
<button type='button' onclick="selectAllFnc()">select all</button>
</p>
<script>
// row data ,行内数据
var rowData = [
{name: "Toyota", model: "Celica", price: 35000,operation: 'a', folder: true, children: [{name:'3x', model:'sss', price:37000}]},
{name: "Ford", model: "Mondeo", price: 32000,folder: true, open: true, children: [{name:'test', model:'test', price:100}]},
{name: "Porsche", model: "Boxter", price: 72000}
]
// column definitions,表格列属性
var columnDefs = [
{
headerName: 'Name',
field: 'name',
width: 200,
enableRowGroup: true,
checkboxSelection: function (params) {
// we put checkbox on the name if we are not doing grouping
return params.columnApi.getRowGroupColumns().length === 0;
},
headerCheckboxSelection: function (params) {
// we put checkbox on the name if we are not doing grouping
return params.columnApi.getRowGroupColumns().length === 0;
},
headerCheckboxSelectionFilteredOnly: true,
cellRenderer: 'group',
cellRendererParams: {
innerRenderer: function (params) { return params.data.name; },
suppressCount: true
}
},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"},
{headerName: "Operation", field: "operation", cellRenderer: function(params) { return '<button onclick="btnClick(1);">click1</button> <button onclick="btnClick(2);">click2</button>'}}
]
// Grid Definition
// let the grid know which columns and what data to use
// 表格初始化配置
var gridOptions = {
// PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application
//列标题设置
columnDefs: columnDefs,
//行内数据插入
rowData: rowData,
animateRows: true,
// PROPERTIES - simple boolean / string / number properties
//是否支持列宽调整
enableColResize: true,
//行高设置
rowHeight: 26,
//单行选中,"multiple" 多选(ctrl),"single" 单选
rowSelection: 'multiple',
// enable sorting ,是否支持排序
enableSorting: true,
// enable filtering ,是否可以筛选
enableFilter: true,
//默认筛选字段
//quickFilterText: 's',
//选中组可选中组下子节点
//groupSelectsChildren: true,
//true的话,点击行内不会进行行选择
suppressRowClickSelection: true,
//阻止列拖拽移动
//suppressMovableColumns: true,
//阻止列拖拽出表格,列移除
suppressDragLeaveHidesColumns: true,
//给整行加样式,
getRowClass: function(params) { return (params.data.name === 'Ford') ? "orange" : null; },
// EVENTS - add event callback handlers
onModelUpdated: function(event) { console.log('model updated'); },
//行内点击触发事件
onRowClicked: function(event) {
//event.data 选中的行内数据,event.event 为鼠标事件,等其他。可以log自己看一下
console.log('a row was clicked', event);
},
//列宽度改变触发
onColumnResized: function(event) { console.log('a column was resized'); },
//表格加载完成触发
onGridReady: function(event) { console.log('the grid is now ready'); },
//单元格点击触发
onCellClicked: function(event) { console.log('a cell was cilcked'); },
//单元格双击触发
onCellDoubleClicked: function(event) { console.log('a cell was dbcilcked'); },
onCellContextMenu: function(event) { },
onCellValueChanged: function(event) { },
onCellFocused: function(event) { },
onRowSelected: function(event) { },
onSelectionChanged: function(event) { },
onBeforeFilterChanged: function(event) { },
onAfterFilterChanged: function(event) { },
onFilterModified: function(event) { },
onBeforeSortChanged: function(event) { },
onAfterSortChanged: function(event) { },
onVirtualRowRemoved: function(event) { },
// CALLBACKS
isScrollLag: function() { return false; },
getNodeChildDetails: function(file) {
if (file.folder) {
return {
group: true,
children: file.children,
expanded: file.open
};
} else {
return null;
}
}
}
//取消选中状态
function deselectAllFnc() {
gridOptions.api.deselectAll();
}
//全选
function selectAllFnc() {
gridOptions.api.selectAll();
}
function btnClick(value) {
console.log(value);
}
// 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);
// create handler function,增加监听事件
function myRowClickedHandler(event) {
console.log('the row was clicked');
}
// add the handler function
gridOptions.api.addEventListener('rowClicked', myRowClickedHandler);
});
</script>
</body>
</html>