我正在使用 kendo ui 创建一个大型业务应用程序。由于应用程序很大。我们已经开始在 javascript 代码中遵循模块化模式。
在 kendo ui 中使用模块化模式时。我遇到了一些错误。
我已经创建了层次结构网格。每个网格代码将是模块化对象。如下所示:
但我遇到以下错误:(我已经评论了这样的错误行//error。请参阅下文)
SCRIPT5007:无法获取未定义或空引用的“查找”属性。
错误的原因是“this”对象引用了 window 对象。但它应该引用剑道网格对象..如何解决这个问题
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();
});
最佳答案
Kendo ui 为dataBound
事件提供了一个名为e
的参数。 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 是未定义的,因为 kendo 执行 onDataBound()
时要设置 dataBound 事件的初始值,而不是 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
});
};
关于javascript - Kendo UI 与 Javascript 模块化模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23334948/