分页剑道网格客户端

Posted 2023-05-07

【中文标题】分页剑道网格客户端

【英文标题】：Paging kendo grid client side

【发布时间】：2014-01-16 02:10:58

【问题描述】：

我想使用 MVC 助手在服务器端构建网格，但在我想在客户端添加和删除行之后。

所以我使用以下包装器：

@(html.Kendo().Grid<SIGEPos.Models.MyGridViewModel>()
    .Name("Grid")
    .Columns(columns =>
    
        columns.Bound(p => p.id).Hidden();
        columns.Bound(p => p.name).Title("Name").Width(130);
        columns.Bound(p => p.quantity).Title("Quantity").Width(130);
    )
    .Pageable()
    .Scrollable(scr=>scr.Height(430)) 
    .DataSource(dataSource => dataSource        
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)        
     )
)

并生成以下标记（仅显示脚本部分）：

<script>
    jQuery(function () 
        jQuery("#Grid").kendoGrid(
            "columns": [
                "title": "id",
                "hidden": true,
                "field": "id",
                "filterable": ,
                "encoded": true
            , 
                "title": "Name",
                "width": "130px",
                "field": "name",
                "filterable": ,
                "encoded": true
            , 
                "title": "Quantity",
                "width": "130px",
                "field": "quantity",
                "filterable": ,
                "encoded": true
            ],
            "pageable": 
                "buttonCount": 10
            ,
            "dataSource": 
                "transport": 
                    "prefix": "",
                    "read": 
                        "url": ""
                    
                ,
                "pageSize": 20,
                "page": 1,
                "total": 0,
                "type": "aspnetmvc-ajax",
                "schema": 
                    "data": "Data",
                    "total": "Total",
                    "errors": "Errors",
                    "model": 
                        "fields": 
                            "id": 
                                "type": "number"
                            ,
                            "quantity": 
                                "type": "number"
                            ,
                            "name": 
                                "type": "string"
                            
                        
                    
                
            
        );
    );
</script>

因此，我无法在客户端对网格进行分页。我可以添加项目，但 grid.dataSource.total() 始终是 0 所以分页不起作用...

我检查了这个demo，生成的代码有点不同：

$(document).ready(function() 
                $("#grid").kendoGrid(
                    dataSource: 
                        data: products,
                        schema: 
                            model: 
                                fields: 
                                    ProductName:  type: "string" ,
                                    UnitPrice:  type: "number" ,
                                    UnitsInStock:  type: "number" ,
                                    Discontinued:  type: "boolean" 
                                
                            
                        ,
                        pageSize: 20
                    ,
                    height: 430,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: 
                        input: true,
                        numeric: false
                    ,
                    columns: [
                        "ProductName",
                         field: "UnitPrice", title: "Unit Price", format: "0:c", width: "130px" ,
                         field: "UnitsInStock", title: "Units In Stock", width: "130px" ,
                         field: "Discontinued", width: "130px" 
                    ]
                );
            );

好像dataSource的配置不一样了……我该如何处理呢？

【参考方案1】：

您必须在filterable 属性下设置serverPaging: false。 kendo 网格的数据源是一个 json，您必须在其中指定行数，当然还有数据匹配列声明。