ag-grid 获取表格数据
<!--Grid容器-->
<div id="div-table-container">
<!--<table id="dgDistrict"></table>-->
<div id="agDistrict" style="height: 700px;width:100%;margin-top: 10px;" class="ag-theme-balham"></div>
</div>
//aggrid配置
gridOptions: {
//行动画启用
animateRows: true,
//列定义
columnDefs: [
{ headerName: "序号", valueGetter: 'parseInt(node.id)+1', cellRenderer: 'loadingRenderer', suppressFilter: true, suppressSorting: true, hide: false, width: 50 },
{ "headerName": "小区编码", "field": "DistrictCode", type: "textColumn" },
{ "headerName": "小区名称", "field": "DistrictName", type: "textColumn" },
{ "headerName": "停车系统社区编码", "field": "ParkDistrictCode", type: "textColumn" },
{ "headerName": "详细地址", "field": "Address", type: "textColumn" },
],
columnTypes: {
"textColumn": {
filter: 'agTextColumnFilter', filterParams: {
clearButton: true,
applyButton: true,
newRowsAction: 'keep'
}
}
},
//启用排序
enableSorting: true,
//启用过滤
enableFilter: true,
rowSelection: 'single',
suppressCellSelection: true,
enableColResize: true,
enableStatusBar: true,
rowGroupPanelShow: 'always',
rowModelType: 'enterprise',
defaultColDef: {
// allow every column to be aggregated
enableValue: true,
// allow every column to be gsrouped
enableRowGroup: true,
// allow every column to be pivoted
enablePivot: true
},
getChildCount: function (data) {
if (data != undefined && data.Count != undefined) {
return data.Count;
}
return 0;
},
cacheBlockSize: 50,
//在数据集的末尾向用户显示多少额外的空白行,
//设置垂直滚动,然后允许网格请求查看更多行数据。
//默认为1,即显示1行。
cacheOverflowSize: 2,
//一次发送多少个服务器端请求。 如果用户正在滚动批次,则请求
//被限制下来
maxConcurrentDatasourceRequests: 1,
//最初在网格中显示多少行。 有1显示一个空行,所以它看起来像
//网格从用户角度加载(因为我们在第一列有一个微调)
infiniteInitialRowCount: 1,
onGridReady: function (params) {
params.api.sizeColumnsToFit();
},
localeText: $.agGridLocaleText,
},
//js获取数据
$(function(){
var districtCrud={
var jsonDate= districtCrud.gridOptions.api.getSelectedRows();
}
})
$(function () { var districtCrud = { parm: {}, queryType: '0', //查询类型,0:模糊查询,1:精确查询 editParm: { url: 'Pms/html/DistrictEdit.html', isCache: true }, actionUrl: 'Pms/ashx/DistrictHandler.ashx', init: function () { $.agGridInit(document.querySelector('#agDistrict'), districtCrud.gridOptions);
districtCrud.parm = _gms_parm; _gms_parm = {};
districtCrud.initDic(); districtCrud.initForm(); //districtCrud.dataGrid(); districtCrud.initData(); districtCrud.initGridToolBar(); districtCrud.bindRowSelected(); districtCrud.initBindButton(); }, initDic: function () { //初始化数据字典 }, initForm: function () { //初始化表单数据 }, dataGrid: function () { $('#dgDistrict').removeClass('display').addClass('table table-striped table-bordered'); var dgDistrict = $('#dgDistrict').dataTable({ processing: false,//加载显示loading... serverSide: true,//是否开启服务器模式 info: true,//分页信息, autoWidth: false,//必须设置为false,否则width无效 paging: true,//页码信息 ordering: true,//排序 order: [],//取消默认排序查询,否则复选框一列会出现小箭头
//异步请求服务器数据,参数:data封装表格请求数据基本信息,callback返回数据后回调,settings所有grid的相关属性函数 ajax: function (data, callback, settings) { //手动控制loading... $('#div-table-container').spinModal(); var ajaxParmData = {}; //当前页 ajaxParmData.PageIndex = data.start / data.length + 1; //每页数量 ajaxParmData.PageSize = data.length;
//排序方式(asc|desc) ajaxParmData.order = data.order[0] != undefined ? data.order[0].dir : ''; //排序字段名称 ajaxParmData.sort = data.order[0] != undefined ? data.columns[data.order[0].column].data : '';
//查询条件 ajaxParmData.filter = districtCrud.getQueryParm(); var ajaxParm = { url: districtCrud.actionUrl, data: ajaxParmData, success: function (result) { var rtData = {}; rtData.draw = data.draw;//必须将draw加载到结果集中再callback否则不会触发排序和分页 rtData.recordsTotal = result.total; rtData.recordsFiltered = result.total; rtData.data = result.rows; callback(rtData); //关闭loading... $('#div-table-container').spinModal(false); }, error: function (xhr, ts, e) { //关闭loading... $('#div-table-container').spinModal(false); } }; $.gmsAjax(ajaxParm); }, //列定义:title表头,class显示样式,data对应数据中字段,width宽度(可用百分比) columns: [ { "title": "序号", "class": "center", data: null, width: '6%', "orderable": false }, { "title": "小区编码", "data": "DistrictCode", "width": "15%", "class": "center" }, { "title": "小区名称", "data": "DistrictName", "width": "24%", "class": "center" }, { "title": "停车系统社区编码", "data": "ParkDistrictCode", "width": "20%", "class": "center" }, { "title": "详细地址", "data": "Address", "width": "35%", "class": "left" }, ], //当表格绘制完成后回调 fnDrawCallback: function () { var api = this.api(); api.column(0).nodes().each(function (cell, i) { cell.innerHTML = i + 1; }); } }).api(); }, initData: function () { var ajaxParm = {}; var ajaxParmData = {}; //每页数量 ajaxParmData.PageSize = 50; //查询条件 ajaxParmData.filter = districtCrud.getQueryParm(); //ajaxParmData.action = "getWorkOrderRowData"; ajaxParm.url = districtCrud.actionUrl; ajaxParm.data = ajaxParmData; ajaxParmData.action = "getDistrictAGList"; $.agGridDatasourceInit(ajaxParm, districtCrud.gridOptions); }, bindRowSelected: function () { //行点击事件 $("tbody", $('#dgDistrict')).on("click", "tr", function (event) { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { $(this).siblings().removeClass('selected'); $(this).addClass('selected'); } }); }, initGridToolBar: function () { //初始化表格工具条(包括左侧操作按钮,右侧查询条件)
$('#div-toolbuttons-container').bsToolBar({ isShowButton: true,//是否显示右侧按钮组 isShowSearch: true,//是否显示左侧查询 isShowSearchMore: true,//是否显示左侧更多查询按钮 smContainerId: 'div-advanced-search',//更多查询容器ID GridName: 'District', //查询对应grid ID ,用于区分同页面不同toolbar中按钮id buttons: $.getMenuButtonsData(districtCrud.parm.data.id) }); }, initBindButton: function () { $("#btnDistrictAdd").bind('click', function () { //inputData 代表传入编辑页面数据,method:代表请求处理方法 BootstrapDialog.gmsDialog({ id: 'dialogDistrict', title: '新增信息', url: districtCrud.editParm.url, method: 'add', buttons: [{ id: 'btnSave', label: '保存',//按钮显示文字 cssClass: 'btn-info',//按钮颜色样式 hotkey: 13//回车键 }, { id: 'btnClose', label: '关闭', hotkey: 27,//ESC键 action: function (d) { d.close(); } }], onhidden: function () { districtCrud.initData(); } }); }); $("#btnDistrictUpdate").bind('click', function () { //var selectedJson = $('#dgDistrict').DataTable().row('.selected').data(); var selectedJson = districtCrud.gridOptions.api.getSelectedRows(); if (!$.isNullOrEmpty(selectedJson)) { //inputData 代表传入编辑页面数据,method:代表请求处理方法 BootstrapDialog.gmsDialog({ id: 'dialogDistrict', title: '编辑信息', url: districtCrud.editParm.url, inputData: selectedJson[0], method: 'edit', buttons: [{ id: 'btnSave', label: '保存',//按钮显示文字 cssClass: 'btn-info',//按钮颜色样式 hotkey: 13//回车键 }, { id: 'btnClose', label: '关闭', hotkey: 27,//ESC键 action: function (d) { d.close(); } }], onhidden: function () { districtCrud.initData(); } }); } else { BootstrapDialog.gmsAlert({ title: '警告提示', message: '未选中任何数据', type: 'w' }); } }); $("#btnDistrictDelete").bind('click', function () { //var selectedJson = $('#dgDistrict').DataTable().row('.selected').data(); var selectedJson = districtCrud.gridOptions.api.getSelectedRows(); if (!$.isEmptyObject(selectedJson)) { BootstrapDialog.gmsConfirm('确认提示', '您确认删除吗?', function (r) { if (r) { districtCrud.oprData('delete', selectedJson[0]); } }); } else { BootstrapDialog.gmsAlert({ title: '警告提示', message: '未选中任何数据', type: 'w' }); } }); //绑定模糊查询查询按钮 $("#btnDistrictSearch").bind('click', function () { districtCrud.queryType = '0'; //var _grid = $('#dgDistrict').DataTable(); //_grid.draw(); districtCrud.initData(); });
//搜索框响应键盘回车事件 $("#txtDistrictKeyWords").keydown(function (event) { if (event.keyCode == 13) { event.returnValue = false; event.cancel = true; $("#btnDistrictSearch").click(); } });
//绑定更多查询中查询按钮 $("#btnQuery").bind('click', function () {
districtCrud.queryType = '1'; //var _grid = $('#dgDistrict').DataTable(); //_grid.draw(); districtCrud.initData(); }); }, //获取查询参数 getQueryParm: function () { var filter = {}; filter.querytype = districtCrud.queryType; if (districtCrud.queryType == '0') { filter.DistrictName = $('#txtDistrictKeyWords').val(); } else { filter.DistrictCode = $('#txtDistrictCode').val(); filter.DistrictName = $('#txtDistrictName').val(); filter.Address = $('#txtDistrictAddress').val(); } return JSON.stringify(filter); }, oprData: function (action, jsonData) { var ajaxParm = {}; ajaxParm.url = districtCrud.actionUrl; ajaxParm.data = { action: action, jsonData: JSON.stringify(jsonData) }; ajaxParm.success = function (result) { if (!$.isNullOrEmpty(result)) { if (result.ResultType == 0) { $.msgTip({ title: '消息提示', message: result.Message, callback: function () { //var _grid = $('#dgDistrict').DataTable(); //_grid.draw(); districtCrud.initData(); } });
} else { BootstrapDialog.gmsAlert('错误提示', result.Message, null, 's', 'e'); } } }; $.gmsAjax(ajaxParm); }, //aggrid配置 gridOptions: { //行动画启用 animateRows: true, //列定义 columnDefs: [ { headerName: "序号", valueGetter: 'parseInt(node.id)+1', cellRenderer: 'loadingRenderer', suppressFilter: true, suppressSorting: true, hide: false, width: 50 }, { "headerName": "小区编码", "field": "DistrictCode", type: "textColumn" }, { "headerName": "小区名称", "field": "DistrictName", type: "textColumn" }, { "headerName": "停车系统社区编码", "field": "ParkDistrictCode", type: "textColumn" }, { "headerName": "详细地址", "field": "Address", type: "textColumn" }, ], columnTypes: { "textColumn": { filter: 'agTextColumnFilter', filterParams: { clearButton: true, applyButton: true, newRowsAction: 'keep' } } }, //启用排序 enableSorting: true, //启用过滤 enableFilter: true, rowSelection: 'single', suppressCellSelection: true, enableColResize: true, enableStatusBar: true, rowGroupPanelShow: 'always', rowModelType: 'enterprise', defaultColDef: { // allow every column to be aggregated enableValue: true, // allow every column to be gsrouped enableRowGroup: true, // allow every column to be pivoted enablePivot: true }, getChildCount: function (data) { if (data != undefined && data.Count != undefined) { return data.Count; } return 0; }, cacheBlockSize: 50, //在数据集的末尾向用户显示多少额外的空白行, //设置垂直滚动,然后允许网格请求查看更多行数据。 //默认为1,即显示1行。 cacheOverflowSize: 2, //一次发送多少个服务器端请求。 如果用户正在滚动批次,则请求 //被限制下来 maxConcurrentDatasourceRequests: 1, //最初在网格中显示多少行。 有1显示一个空行,所以它看起来像 //网格从用户角度加载(因为我们在第一列有一个微调) infiniteInitialRowCount: 1, onGridReady: function (params) { params.api.sizeColumnsToFit(); }, localeText: $.agGridLocaleText, }, } districtCrud.init();});