我正在使用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();
});
答案 0 :(得分:3)
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
});
};
答案 1 :(得分:1)
当您将处理程序添加到网格的配置对象(与onDataBound
相同)时,您必须删除Order.Init
末尾的括号,否则您将立即执行该函数而不是事件被触发:
gridCustomer = $("#gridCustomer").kendoGrid({
sortable: true,
filterable: true,
pageable: {
pageSize: 5,
pageSizes: true
},
columns: createColumns(),
dataSource: setDataSource(),
dataBound: onDataBound,
detailInit: Order.Init
});