FineUIMvc表格數據庫分頁，使用CYQ.Data組件

首先看下前臺 View 的定義：

@(F.Grid()
    .EnableCheckBoxSelect(true)
    .Width(850)
    .ShowHeader(true)
    .ShowBorder(true)
    .EnableCollapse(true)
    .Title("表格")
    .ID("Grid1")
    .DataIDField("Id")
    .DataTextField("Name")
    .AllowPaging(true)
    .PageSize(5)
    .IsDatabasePaging(true)
    .OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"), "Grid1")
    .Columns(
        F.RowNumberField(),
        F.RenderField()
            .HeaderText("姓名")
            .DataField("Name")
            .Width(80),
        ......
    )
    .RecordCount(ViewBag.Grid1RecordCount)
    .DataSource(ViewBag.Grid1DataSource)
)

和 WebForms 中的相似，咱們一樣須要設置一些屬性來啓用數據庫分頁：

1. AllowPaging(true)：啓用分頁

2. IsDatabasePaging(true)：啓用數據庫分頁

3. PageSize(5)：每頁記錄數

4. OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"), "Grid1")：分頁切換事件，須要回發到後臺從新綁定表格數據

 

 

後臺Controller，傳遞DataTable類型數據集和記錄的總數

            int total = 0;
            ViewBag.Grid1DataSource = DBFast.Select<db_wxuser>(1, 10,  "IsDel=0", out total);
            ViewBag.Grid1RecordCount = total;

 

翻頁事件

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Grid1_PageIndexChanged(JArray Grid1_fields,int Grid1_pageIndex)
        {
            var total = 0;
            var dataSource = DBFast.Select<db_wxuser>(Grid1_pageIndex+1, 10, "IsDel=0", out total);

            var grid1 = UIHelper.Grid("Grid1");
            grid1.RecordCount(total);
            grid1.DataSource(dataSource, Grid1_fields);

            return UIHelper.Result();
        }

注意，控制器方法的兩個參數名稱是約定好的，若是前臺經過控件ID的方式來傳入自定義回發參數時：

OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"), "Grid1")

後臺接受請求的參數名約定爲：

1. 表格控件ID_pageIndex：表格當前分頁序號

2. 表格控件ID_fields：表格用到了哪些表格字段（若是不是表格，是IEnumrable<Class>對象，則對應於類屬性列表），這個值在數據綁定時須要用到。

 

爲何須要 Grid1_fields 參數？

不少網友會有這個疑問，其實理解起來也很簡單。由於表格可能存在不少字段，假設有 100 個，可能只有其中的 10 個字段表格用到了。那麼數據綁定時只返回這 10 個字段的數據。

假設數據綁定時沒有傳入這個參數，也是能夠運行的，只不過會返回不少冗餘數據，也可能會形成關鍵數據泄密（好比密碼等）。

 

最後，咱們看下 MVC 中，分頁回發的請求正文：

 

響應正文：

F.ui.Grid1.setRecordCount(22);
F.ui.Grid1.loadData([
    [106, "張博", 1, 2003, true, "財務管理", 3, "2017-01-13T07:22:51Z"],
    [107, "楊倩倩", 0, 2000, false, "材料物理與化學", 4, "2017-01-23T07:22:51Z"],
    [108, "董超", 1, 2004, false, "生物醫學工程", 4, "2017-02-02T07:22:51Z"],
    [109, "張娟娟", 0, 2003, true, "材料物理與化學", 5, "2017-02-12T07:22:51Z"],
    [110, "葉鵬", 1, 2006, false, "電子商務", 5, "2017-02-22T07:22:51Z"]
]);
F.ui.Grid1.clearSelection();