向网格添加新行
Adding new row to grid
我需要一个Kendo Grid
,用户输入'n'个数的结果,然后单击一个按钮(从网格控件分开),这将采取所有的结果添加到网格,并将它们保存到数据库。这应该是一个简单的任务,考虑到网格本身没有CRUD
操作,除了为数据输入添加额外的空白行…
问题是网格的内容不是静态的,并且可以根据用户输入在列大小(从1到6)上变化(我的示例显示了这将如何以数组Lots
的形式表示)。似乎大多数可用的教程似乎只专注于静态内容,而很少有其他方面的帮助。
到目前为止(与Telerik的一些反馈),我已经提出了以下…
设置一个Lot Schema,即数组中每个Lot
的所有数据的占位符:
var Lots = [];
Lots.push({ ID: 13, LotNumber: "158UL" }),
Lots.push({ ID: 14, LotNumber: "646UE" });
var LotResultsSchema = [];
for (var p = 0; p < Lots.length; ++p) {
LotResultsSchema.push({
Result: {
Count: '',
Mean: '',
SD: ''
}
});
}
设置整体网格模式模型ID:
var schemaModel = kendo.data.Model.define({
id: "ID",
fields: {
ID: { editable: false, nullable: true },
ResultDateTime: {
type: "date", validation: {
required: true
}
},
LotResults: LotResultsSchema,
StandardComment: {
ID: {
nullable: true, validation: {
required: false
}
},
Description: {
defaultValue: "<empty>",
validation: {
required: false
}
}
},
ReviewComment: {
ID: {
nullable: true, validation: {
required: false
}
},
Description: {
defaultValue: "<empty>",
validation: {
required: false
}
}
}
}
});
根据上面的模式为网格设置数据源:
var gridConfigDataSourceAdd = new kendo.data.DataSource({
data: [],
schema: {
model: schemaModel
}
});
设置列模式(再次考虑到可以根据数组大小创建多个列):
var columnSchema = [];
columnSchemaAdd.push({ field: "ResultDateTime", format: "{0:yyyy/MM/dd hh:mm:ss}", editor: dateTimeEditor, title: 'Date Time' });
for (var j = 0; j < Lots.length; ++j) {
columnSchemaAdd.push({
title: Lots[j].LotNumber,
field: Lots[j].ID,
columns: [{
field: "LotResults[" + j + "].Result.Count",
title: 'Count'
}, {
field: "LotResults[" + j + "].Result.Mean",
title: 'Mean'
}, {
field: "LotResults[" + j + "].Result.SD",
title: 'SD'
}]
});
}
columnSchemaAdd.push({ field: "StandardComment", title: 'Comment', editor: standardCommentDropDownEditor, template: "#=StandardComment.Description#" });
columnSchemaAdd.push({ field: "ReviewComment", title: 'Review Comment', editor: reviewCommentDropDownEditor, template: "#=ReviewComment.Description#" });
columnSchemaAdd.push({ command: ["edit", "destroy"] });
设置整体网格:
$("#configAddGrid").kendoGrid({
dataSource: gridConfigDataSourceAdd,
height: 550,
navigatable: true,
autoBind: false,
editable: {
mode: "inline"
},
toolbar: ["create"],
columns: columnSchemaAdd
});
运行此代码并单击"添加新"按钮创建新行会产生以下错误:
Uncaught TypeError: Cannot read property 'Result' of undefined
我理解为什么我得到这个错误,由于新项目正在创建未定义的LotResults
。我无法理解的是,当在Lot Schema中设置默认值时,怎么会发生这种情况。
任何建议都是赞赏的,我希望有人使用剑道网格相同的目的之前,我真的很想看看一个例子,它的工作!
我认为问题出在LotResultsSchema上。而不是创建它作为一个单独的数组,可以尝试合并到字段类?
<script>
var Lots = [];
Lots.push({ ID: 13, LotNumber: "158UL" }),
Lots.push({ ID: 14, LotNumber: "646UE" });
var fields1 = {
ID: { editable: false, nullable: true },
ResultDateTime: {
type: "date", validation: {
required: true
}
},
StandardComment: {
ID: {
nullable: true, validation: {
required: false
}
},
Description: {
defaultValue: "<empty>",
validation: {
required: false
}
}
},
ReviewComment: {
ID: {
nullable: true, validation: {
required: false
}
},
Description: {
defaultValue: "<empty>",
validation: {
required: false
}
}
}
};
for (var p = 0; p < Lots.length; ++p) {
fields1['Count' + Lots[p].ID] = {type : "number"};
fields1['Mean'+Lots[p].ID] = {type : "number"};
fields1['SD' +Lots[p].ID] = {type : "number"};
}
var schemaModel = kendo.data.Model.define({
id: "ID",
fields: fields1
});
var gridConfigDataSourceAdd = new kendo.data.DataSource({
data: [],
schema: {
model: schemaModel
}
});
var columnSchemaAdd = [];
columnSchemaAdd.push({ field: "ResultDateTime", format: "{0:yyyy/MM/dd hh:mm:ss}", title: 'Date Time' });
for (var j = 0; j < Lots.length; ++j) {
columnSchemaAdd.push({
title: Lots[j].LotNumber,
field: Lots[j].ID,
columns: [{
field: 'Count' + Lots[j].ID ,
title: 'Count'
},
{
field: 'Mean'+Lots[j].ID ,
title: 'Mean'
}, {
field: 'SD' + Lots[j].ID ,
title: 'SD'
}]
});
}
columnSchemaAdd.push({ field: "StandardComment", title: 'Comment', template: "#=StandardComment.Description#" });
columnSchemaAdd.push({ field: "ReviewComment", title: 'Review Comment', template: "#=ReviewComment.Description#" });
columnSchemaAdd.push({ command: ["edit", "destroy"] });
$("#configAddGrid").kendoGrid({
dataSource: gridConfigDataSourceAdd,
height: 550,
navigatable: true,
autoBind: false,
editable: {
mode: "inline"
},
toolbar: ["create"],
columns: columnSchemaAdd
});
</script>
示例http://dojo.telerik.com/uHucA
相关文章:
- 拆分文本以每隔n个字符添加一行新行,并注意空格
- 如何在脚本上添加新行
- 在不刷新整个网格的情况下,向Asp.net网格视图添加新行
- dhtmlx添加新行并启动单元格编辑器
- 在新行(html)中动态添加更多文本字段
- 如何在Google Geochart图表的工具提示文本中添加新行
- 为什么要将此p标记添加为新行
- Jquery在表WITH函数中追加新行后添加单击事件
- 无法编辑添加的新行
- 如何在javascript中每次添加新行时都增加ordre值
- 将新行添加到localStorage变量中
- 当上一行/当前行被填充时,将新行添加到HTML表中
- 当新行添加到表中时,使用AJAX更新页面
- 将新行添加到数据库时的 Javascript 警报
- 为 HTML 文本区域中的新行添加效果
- 将新行添加到空的剑道网格中
- 单击按钮时,将新行添加到包含下拉列表的表中
- 向输出空间或新行添加新行或空格
- 使用2下拉列表将新行添加到表中-如何更改选择的名称
- 为按钮创建的每个新行添加i++