【发布时间】:2014-04-09 11:44:50
【问题描述】:
我从事 durandal 项目,喜欢使用您的 kendo-ui-grid。
在我的项目中,我需要动态构建 grid-columns 数组。 即,我(通过 ajax 请求)获取有关每个网格列的信息数据数组,并在数据数组上循环构建网格。
这是我的代码:
function initGrid(formInfo, FormFieldsInfo) {
//=========================================
//region: build dinamic fridColumns, gridSchema
//=========================================
var columns = [];
var fields = {};
var primaryKey = null;
$.each(FormFieldsInfo, function addGridColumn(index, fieldInfo) {
var column = {};
column.field = fieldInfo.FieldName;
column.headerTemplate = "<span class='headerGrid-att'>" + fieldInfo.DisplayTitle + "</span>";
column.attributes = { "class": "columnBorder" };
column.template = getColumnTemplate(fieldInfo.ComponentType, fieldInfo.FieldName);
column.editor = getColumnEditor(fieldInfo.ComponentType);
columns.add(column);
var field = {};
field.type = global.enums.fieldType[fieldInfo.FieldType];
field.editable = true;
fields[fieldInfo.FieldName] = field;
if (fieldInfo.isKey == true) {
primaryKey = fieldInfo.FieldName;
}
});
vm.grid.gridOptions.columns = columns;
vm.grid.schema = {
data: 'Data',
model: {
id: primaryKey,
fields: fields
}
};
var dataQuery = {
UserNo: global.cache.get(global.enums.cacheItems.USER).Id,
ProcedureName: formInfo.SelectProcedure
};
//=========================================
//end region: build dinamic fridColumns, gridSchema
//=========================================
vm.grid.dataSourceUrl = global.webApiConfig.getApiPath(global.enums.httpPath.GetETableGridData.path + '?query=' + JSON.stringify(dataQuery));
vm.grid.remoteDataSource = true;
vm.grid.setDataSource();
vm.grid.setGridOptionsSetting({ editable: "popup" });
}
function getColumnTemplate(type, fieldName) {
switch (type) {
case global.enums.componentType.checkBox:
return function checkBoxTemplate(dataItem) {
return vm.grid.activeNotActiveTemplate(dataItem[fieldName])
};
case global.enums.componentType.dateTime:
return function dateTemplate(dataItem) {
return vm.grid.ParseDateFormat(dataItem, fieldName)
};
default: //simple edit, combo
return ???
}
}
function getColumnEditor(type, fieldName) {
switch (type) {
case global.enums.componentType.date:
return function dateEditor(container, options) {
vm.grid.datePickerEditor(container, options, false);
}
case global.enums.componentType.time:
return function timeEditor(container, options) {
vm.grid.inputTimeEditor(container, options, new timeInput())
}
default: //simple edit,checkBox, combo
return ???
}
}
我的问题是:
在常规网格中,使用 consts 列数组,我不为常规字段(例如简单的字符串数据)提供任何模板或编辑器,也不为 boolean-checkBox 列提供任何编辑器。
但是,在这种情况下,我必须始终返回模板/编辑器函数。 那么,我能做些什么呢? 我必须编写的默认代码是什么? (我必须在 ??? 标记之外写什么?)
谢谢!
【问题讨论】:
-
如果您从动态列生成 HTML
<table>,然后在该生成的表上使用$('#newTableId').kendoGrid({...})来创建网格怎么办?
标签: javascript html kendo-ui kendo-grid durandal