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