1

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

使用剑道 ui 的模块化模式时。我遇到了一些错误。

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

但是我遇到了错误：（我已经评论了这样的错误行//错误。请参见下文）

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

错误原因是“this”对象引用了窗口对象。但它应该引用剑道网格对象..如何解决这个问题

   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();
 });
4

2 回答 2

3

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

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

As I mention in comments: It seems the problem is with the dataBound: onDataBound(), because you should set the function onDataBound to the dataBound event not the result of execution onDataBound().The e is undefined because kendo executing the onDataBound() when it wants to set the initial value of dataBound event, not the time the dataBound event has occurred. replace dataBound: onDataBound() with dataBound: onDataBound and try again:

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
});

};

于 2014-04-28T08:54:57.213 回答
1

You have to remove the parentheses at the end of onDataBound when you add the handler to the grid's configuration object (same with Order.Init), otherwise you're immediately executing the function instead of when the event is triggered:

gridCustomer = $("#gridCustomer").kendoGrid({
    sortable: true,
    filterable: true,
    pageable: {
        pageSize: 5,
        pageSizes: true
    },
    columns: createColumns(),
    dataSource: setDataSource(),
    dataBound: onDataBound,
    detailInit: Order.Init
});
于 2014-04-28T09:42:35.060 回答