easyui datagrid 分页和子表格

最近在用easyui 感觉挺不错的，不过就是有些小的BUG，我这里用到了分页和子表格，顺便分享下.

先上图

要注意下easyui中绑定字段中不能有空格，要不就不能对齐表头和内容的，

前台的脚本分页的如下：

$('#search_info_table').datagrid({
                url: 'Handler.ashx?Type=Member&UserID=' + value ,
                title: '程序權限信息',
                fitColumns: true,
                striped: true,
                pagination: true,
                pageNumber: 1,
                pageSize: 40,
                queryParams: { pageSize: 40, pageNumber: 0 },
                view: detailview,
                detailFormatter:function(index,row){
                    return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';
                },
                onExpandRow: function (index, row) {
                    $('#ddv-' + index).datagrid({
                        url: 'Handler.ashx?Type=Group&group_id=' + row.group_id,
                        fitColumns: true,
                        singleSelect: true,
                        height: 'auto',
                        columns: [[
                            { field: 'program_id', title: '程序ID', width: 100 },
                            { field: 'program_desc', title: '程序名稱', width: 100 }
                        ]],
                        onResize: function () {
                            $('#search_info_table').datagrid('fixDetailRowHeight', index);
                        },
                        onLoadSuccess: function () {
                            setTimeout(function () {
                                $('#search_info_table').datagrid('fixDetailRowHeight', index);
                            }, 0);
                        }
                    });
                    $('#search_info_table').datagrid('fixDetailRowHeight', index);
                }
            });
            var p = $('#search_info_table').datagrid('getPager');
            $(p).pagination({ 
                beforePageText: '第',//页数文本框前显示的汉字  
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
                onBeforeRefresh: function () {
                    //alert('before refresh');
                },
                onRefresh: function (pageNumber, pageSize) {
                    $("#search_info_table").datagrid("reload", { "pageSize": pageSize, "pageNumber": pageNumber });
                },
                onChangePageSize: function () {
                    //alert('pagesize changed');
                },
                onSelectPage: function (pageNumber, pageSize) {
                    $("#search_info_table").datagrid("reload", { "pageSize": pageSize, "pageNumber": pageNumber });
                }
            });

子表格需要引用相關easyui的JS文件，需要再去官網上下載.設定要數據的接口和綁定的字段就差不多能用了.

分頁的話，这里还必须声明两个参数,作為當前頁面的行數和頁面顯示的條數，在onRefresh和onSelectPage中觸發整個datatgrid的重載.

后台代码如下：

str="這里寫你的查詢語句"
dt = DataAccess.ExecuteDataTable(conn_enq, CommandType.Text, str)
count =dt.Rows.Count
result = JsonConvert.SerializeObject(dt, New DataTableConverter())
str = "SELECT TOP " & pageSize & " * FROM (SELECT ROW_NUMBER() OVER (ORDER BY user_id,branch,group_id) AS RowNumber,
* FROM (" & str & ") a) A WHERE RowNumber > " & pageSize & "*(" & pageNumber & "-1)"
dt = DataAccess.ExecuteDataTable(conn_enq, CommandType.Text, str)
result = "{""rows"":" & result & ",""total"":" & count & "}"
context.Response.Write(result)

後臺接口文件需要從前臺獲取頁面大小，和當前頁的大小，然後分頁，分頁是用的SQL的ROW_NUMBER方法，

比較簡潔和靈活，如果大批量的數的話估計有點慢.

後臺傳JSON 需要傳遞一個總行數用total關鍵字，表格用rows關鍵字，表格是先JSON序列化然後再來拼接的，

 

差不多就这些吧，不过也困扰了我好久，应该也有比我简单的方法。

create by nineteen