<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' οnclick="deselectAllFnc()">clear selection</button>
<button type='button' οnclick="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 οnclick="btnClick(1);">click1</button> <button οnclick="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>
