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

posted @ 2018-09-25 11:15  如果冬天没有雪  阅读(5127)  评论(0编辑  收藏  举报