0

我正在使用 Kendo UI 的 Grid 并尝试添加一些代码，这些代码通过 cookie 保留网格的过滤器/分组/等。它在示例中有效，但在我的代码中根本无效。

示例：http ://www.kendoui.c​​om/code-library/web/grid/preserve-grid-state-in-a-cookie.aspx

我的代码：http: //jsfiddle.net/PwajE/

无论出于何种原因（我确信这是一个简单的原因），我不断收到类型错误。两个小时后……我来了。

一如既往，任何帮助表示赞赏。

@RRfive

<script>

            var data = [{"name":"John Smith","email":"test@test.com","permission":"admin","costRate":"60","dt":"2013-02-02 10:26:29","memberID":"M0000001"},{"name":"Test Simple","email":"test@jones.com","permission":"user","costRate":"40","dt":"2013-02-02 00:00:00","memberID":"M0000002"}];     


                $(document).ready(function() {
                    $("#grid").kendoGrid({
                    dataSource: {
                        data: data,
                        //transport: {
                        //    read: "assets/data/data.users.php",
                        //},
                        schema: {
                            data: function(result) {     
                              return result.data || result;
                            },
                            total: function(result) {
                                var data = this.data(result);
                                return data ? data.length : 0;
                            },
                            model:{
                            id:"memberID",
                                fields:{
                                    dt:{ type:"date" },
                                    costRate:{ type:"number" }
                                }
                            }
                        },
                        pageSize: 10,

                    },



                    sortable: {
                        mode: "single",
                        allowUnsort: true,
                    },
                     pageable: {
                        input: true,
                        numeric: false
                    },

                    reorderable: true,
                    resizable: true,
                    filterable: {
                        extra:false, 
                        operators: {
                            string:{
                                contains: "Contains",
                            }
                        }
                    },
                    columnMenu: false,      
                    groupable: true,

                    dataBound: function(e){
                    var grid = this;
                    var dataSource = this.dataSource;

                    var state = kendo.stringify({
                        page: dataSource.page(),
                        pageSize: dataSource.pageSize(),
                        sort: dataSource.sort(),
                        group: dataSource.group(),
                        filter: dataSource.filter()
                    });

                    $.cookie("employeesState",state);
                    if($.cookie('empRows')){
                        $.each(JSON.parse($.cookie('empRows')),function(){                        
                            var item = dataSource.get(this);
                            var row = grid.tbody.find('[data-uid='+item.uid+']');
                            row.addClass('k-state-selected');
                        })
                    }
                },
                change:function(){
                    var grid = this;
                    var ids = grid.select().map(function(){
                       return grid.dataItem($(this)).Id
                    }).toArray();
                    $.cookie('empRows',JSON.stringify(ids));                    
                },



                    columns: [
                        { field: "name", title:"Name" },
                        { field: "email", title:"Email/Username" },
                        { field: "costRate", title:"Cost Rate (p/hr)", template: '#= kendo.toString(costRate, "c") #', },
                        { field: "permission", title:"Permission", template: "#= (permission == 'admin') ? 'Administrator' : 'User' #" },
                        { field: "dt", title:"Registered", template: '#= kendo.toString(dt,"d-M-yyyy") #' },
                        { field: "memberID", title:" ", width: "83px", filterable: false, sortable: false, template: '<a class="k-button k-button-icontext k-grid-edit" href="manage_admin.php?form=editMember&ID=#= kendo.toString(memberID, "n2")#"><span class=\"k-icon k-edit\"></span>Edit</a>'},
                        ]
                    });



        var state = JSON.parse($.cookie("employeesState"));
            if(state){
                if(state.filter){
                    parseFilterDates(state.filter, grid.dataSource.options.schema.model.fields);                    
                }
                grid.dataSource.query(state);
            }
            else{
                grid.dataSource.read();
            }



                });

                function parseFilterDates(filter, fields){
            if(filter.filters){
                for(var i = 0; i < filter.filters.length; i++){
                    parseFilterDates(filter.filters[i], fields);
                }
            }
            else{
                if(fields[filter.field].type == "date"){
                    filter.value = kendo.parseDate(filter.value);
                }
            }
        }
            </script>
4

1 回答 1

1

如果您调试该小提琴，您会看到以下行引发错误：

grid.dataSource.query(state);

原因是它grid不是 Kendo Grid 的实例，而是div带有id='grid'. grid修复很简单——在使用之前初始化变量：

var grid = $("#grid").data('kendoGrid');
grid.dataSource.query(state);
于 2013-02-07T08:59:45.763 回答