如何根据选中的复选框重新排序网格?

时间:2016-11-26 06:14:53

标签: jquery kendo-ui kendo-grid

我有一个包含SubDivisions的网格。在网格中我有复选框,如果为客户分配了SubDivision,则加载网格数据时,将选中该复选框。此网格包含6000个SubDivisions的upwords,因此Assigned SubDivision可以在第10页或类似的内容。在我设置的示例中,我在第3页上选中了复选框。

我的问题是,当我加载网格并且有一个指定的SubDivision(s)时,我该怎样才能使分配的行首先在网格中,这样用户就不必搜索到看看是否分配了SubDivisions?



    $(document).ready(function(){
    
      var junkData =
       [{
           "SubDivisionID": 1,
           "SubDivisionName": "County A",
           "Assigned" : 0
       },{
           "SubDivisionID": 2,
           "SubDivisionName": "County B",
            "Assigned" : 0
       },{
           "SubDivisionID": 3,
           "SubDivisionName": "County C",
            "Assigned" : 0
       },{
           "SubDivisionID": 4,
           "SubDivisionName": "County D",
            "Assigned" : 0
       },{
           "SubDivisionID": 5,
           "SubDivisionName": "County E",
            "Assigned" : 0
       },{
           "SubDivisionID": 6,
           "SubDivisionName": "County F",
            "Assigned" : 0
       },{
           "SubDivisionID": 7,
           "SubDivisionName": "County G",
            "Assigned" : 0
       },{
           "SubDivisionID": 8,
           "SubDivisionName": "County H",
            "Assigned" : 0
       },{
           "SubDivisionID": 9,
           "SubDivisionName": "County I",
            "Assigned" : 0
       },{
           "SubDivisionID": 10,
           "SubDivisionName": "County J",
            "Assigned" : 0
       },{
           "SubDivisionID": 11,
           "SubDivisionName": "County K",
            "Assigned" : 1
       },{
           "SubDivisionID": 12,
           "SubDivisionName": "County L",
            "Assigned" : 0
       },{
           "SubDivisionID": 13,
           "SubDivisionName": "County M",
            "Assigned" : 0
       },{
           "SubDivisionID": 14,
           "SubDivisionName": "County N",
            "Assigned" : 0
       },{
           "SubDivisionID": 15,
           "SubDivisionName": "County O",
            "Assigned" : 0
       },{
           "SubDivisionID": 16,
           "SubDivisionName": "County P",
            "Assigned" : 0
       },{
           "SubDivisionID": 17,
           "SubDivisionName": "County Q",
            "Assigned" : 0
       },{
           "SubDivisionID": 18,
           "SubDivisionName": "County R",
            "Assigned" : 0
       },
       ];
      
      
      $("#SubDivisionsGrid").kendoGrid({
        dataSource: {
            data: junkData,
            pageSize: 5
        },
        schema: {
            model: {
                fields: {
                    SubDivisionID: { type: "number" },
                    SubDivisionName: { type: "string" },
                    Assigned: { type: "bool" }
                },
            }
        },
        filterable: {
            mode: "row"
        },
        columns: [
            { field: "SubDivisionID", title: "SubDivisionID", hidden: true },
            { field: "SubDivisionName", title: "SubDivision", filterable: { cell: { showOperators: false, operator: "contains" } } },
            { title: "Assigned", template: "<center><input name='Assigned' class='checkbox' type='checkbox' data-bind='checked: Assigned' #= Assigned ? checked='checked' : '' #/></center>", width: "120px" }
        ],
        scrollable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        selectable: "row",
        change: function (e) {

        },
    });
      
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>

<div id="SubDivisionsGrid"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我看起来更深一些,并提出了一个解决方案来修复我的存储过程,获取数据并让它返回由Assigned SubDivision订购的网格的数据,现在它可以正常工作。