每次都会创建重复的Kendo网格

时间:2014-09-01 13:37:30

标签: jquery kendo-ui kendo-grid kendo-datasource

var showEmps = function (did) {
$("#myGrid").kendoGrid({
                        sortable: true,
                        pageable: true,
                        scrollable: true,
                        columnMenu: true,
                        filterable: {
                            extra: false
                        },
                        dataSource: {
                            transport: {

                                read: "/Employee/ShowEmpByDept",
                                dataType: "json",
                                parameterMap: function (data1, type) {

                                    var data = {
                                       deptid: did
                                    }
                                    return data;
                                }
                            },
                            schema: {
                                model: {
                                    fields: {
                                        EmpID: { type: "number" },
                                        JOD: { type: "date" },
                                        LastName: { type: "string" },
                                        Dept: { type: "string" },
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        columns: [
                        {
                            field: "EmpID",
                            title: "Emp ID",
                            filterable: false,
                            headerTemplate: '<span title="Emp ID">Emp ID</span>'
                        },
                        {
                            field: "JOD",
                            title: "JOD",
                            width: 90,
                            template: '#= kendo.toString(JOD,\"MM/dd/yyyy\") #',
                            filterable: { extra: true }
                        },
                        {
                            field: "LastName",
                            title: "Last Name",
                        },
                        {
                            field: "Dept",
                            title: "Dept",

                        }

                        ],

                    }).data("kendoGrid");
            };
   });

我在文档就绪方法上调用showEmps方法,如(showEmps(1))

现在,我已经列出了部门清单。

当我更改下拉列表时,我想将dept id传递给showEmps方法以便使用选定的下拉部门刷新我的网格

1 个答案:

答案 0 :(得分:2)

不要这样做:

var grid1 = jQuery("#mygrid").kendoGrid({
     dataSource: dataSource,
});

如您所见,这将创建一个新的Grid对象。

你应该做的是:

var grid1 = jQuery("#mygrid").data("kendoGrid");
grid1.dataSource.data(newData);

如果您已经加载了新数据或只是:

dataSource.read();

如果你想触发一个新的读取(这将自动刷新网格)。

请记住,read可能会收到一个对象,然后可以在parameterMap中使用该对象来组成实际请求。所以你可以这样做:

var ds = new kendo.data.DataSource({
    transport: {
        read: "/Employee/ShowEmp",
        parameterMap: function (data, type) {
            if (type === "read") {
                // If no empId is provided it uses 1, otherwise uses the one passed as argument
                data.empId = data.empId ? data.empId : 1;
                return data;
            }
        }
    }
});

// Read default empId (this is the same that it is executed when grid is initialized)
ds.read();
// Read employee with Id = 2
ds.read({ empId: 2 });

非常优雅!!