Question

我正在使用kendo ui创建一个大型业务应用程序。由于申请量很大。我们已开始在javascript代码中遵循模块化模式。

使用模块化模式时使用kendo ui。我收到了一些错误。

我创建了层次结构网格。每个网格代码都是模块化对象。如下所示：

但我收到以下错误:(我已经评论过这样的错误行//错误。请看下面的内容）

SCRIPT5007：无法获取未定义或空引用的属性“find”。

错误原因是“this”对象被称为window对象。但它应该参考kendo网格对象..如何解决这个问题

   var Customer = (function ($,window) {
var gridCustomer = null;
var dataSource = null;
var createColumns = function () {
    return [
                {
                    field: "FirstName",
                    title: "First Name",
                    width: "110px"
                },
                {
                    field: "LastName",
                    title: "Last Name",
                    width: "110px"
                },
                {
                    field: "Country",
                    width: "110px"
                },
                {
                    field: "City",
                    width: "110px"
                },
                {
                    field: "Title"
                }
    ]
};
var setDataSource = function () {
    if (customerGridDataSource != undefined) {
        return dataSource = new kendo.data.DataSource({
            data: customerGridDataSource,
            schema: {
                data: function (response) {
                    return response;
                },
                total: function (response) {
                    return response.length;
                },
                model: {
                    id: "CustomerID",
                    fields: {
                        CustomerID: { editable: false, nullable: false, type: "int" },
                        FirstName: { editable: true, nullable: false, type: "string" },
                        LastName: { editable: true, nullable: true, type: "string" },
                        Country: { editable: true, nullable: true, type: "string" },
                        City: { editable: true, nullable: true, type: "string" },
                        Title: { editable: true, nullable: true, type: "string" }
                    }
                }
            },
            pageSize: 5,
            serverPaging: false,
            serverSorting: false
        });
    }
    else {
        alert("Data Source undefined. Please Contact Administrator.")
    }
};
var onDataBound = function () {        
    this.expandRow(this.tbody.find("tr.k-master-row").first());//error
};
var init = function () {
    gridCustomer = $("#gridCustomer").kendoGrid({
        sortable: true,
        filterable: true,
        pageable: {
            pageSize: 5,
            pageSizes: true
        },
        columns: createColumns(),
        dataSource: setDataSource(),
        dataBound: onDataBound(),
        detailInit: Order.Init()
    });
};

return {
    Init: function () {
        init();
    }
}
})(jQuery,window);

var Order = (function ($,window) {
var gridOrder = null;
var dataSource = null;
var createColumns = function () {
    return [
            { field: "OrderID", width: "70px" },
            { field: "ShipCountry", title: "Ship Country", width: "110px" },
            { field: "ShipAddress", title: "Ship Address" },
            { field: "ShipName", title: "Ship Name", width: "200px" }
    ]
};
var setDataSource = function () {
    if (customerGridDataSource != undefined) {
        return dataSource = new kendo.data.DataSource({
            data: customerGridDataSource,
            schema: {
                data: function (response) {
                    return response;
                },
                total: function (response) {
                    return response.length;
                },
                model: {
                    id: "CustomerID",
                    fields: {
                        OrderID: { editable: false, nullable: false, type: "int" },
                        ShipCountry: { editable: true, nullable: false, type: "string" },
                        ShipAddress: { editable: true, nullable: true, type: "string" },
                        ShipName: { editable: true, nullable: true, type: "string" }                            
                    }
                }
            },
            pageSize: 5,
            serverPaging: false,
            serverSorting: false,
            serverFiltering: false,
            filter: { field: "CustomerID", operator: "eq", value: e.data.CustomerID }
        });
    }
    else {
        alert("Data Source undefined. Please Contact Administrator.")
    }
};    
var init = function (e) {
    gridOrder = $("<div/>").appendTo(e.detailCell).kendoGrid({            
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: createColumns(),
        dataSource: setDataSource()
    });
};

return {
    Init: function (e) {
        init(e);
    }
}
})(jQuery,window);

 $(function () {
    Customer.Init();
 });

Answer 1

Kendo ui为e事件提供了一个名为dataBound的参数。 e.sender是网格。所以你的代码应该是这样的：

var onDataBound = function (e) {
    var grid = e.sender;
    grid.expandRow(grid.tbody.find("tr.k-master-row").first());
};

正如我在评论中提到的：似乎问题在于dataBound：onDataBound()，因为您应该将函数onDataBound设置为dataBound事件而不是执行结果onDataBound()。 e未定义，因为当想要设置dataBound事件的初始值时，kendo执行onDataBound()，而不是dataBound事件发生的时间。将dataBound: onDataBound()替换为dataBound: onDataBound，然后重试：

var init = function () {
gridCustomer = $("#gridCustomer").kendoGrid({
    sortable: true,
    filterable: true,
    pageable: {
        pageSize: 5,
        pageSizes: true
    },
    columns: createColumns(),
    dataSource: setDataSource(),
    dataBound: onDataBound, //Not immediately execution
    detailInit: Order.Init //Not immediately execution
});

};

Answer 2

当您将处理程序添加到网格的配置对象（与onDataBound相同）时，您必须删除Order.Init末尾的括号，否则您将立即执行该函数而不是事件被触发：

gridCustomer = $("#gridCustomer").kendoGrid({
    sortable: true,
    filterable: true,
    pageable: {
        pageSize: 5,
        pageSizes: true
    },
    columns: createColumns(),
    dataSource: setDataSource(),
    dataBound: onDataBound,
    detailInit: Order.Init
});

使用Javascript模块化模式的Kendo UI

2 个答案: