Javascript 剑道ui网格、默认模板和编辑器
我在durandal项目工作,喜欢使用你的剑道ui网格 在我的项目中,我需要动态构建网格列数组。 i、 例如,我(通过ajax请求)获取关于每个网格列的信息的数据数组,并在数据数组上按循环构建网格 这是我的密码:Javascript 剑道ui网格、默认模板和编辑器,javascript,html,kendo-ui,kendo-grid,durandal,Javascript,Html,Kendo Ui,Kendo Grid,Durandal,我在durandal项目工作,喜欢使用你的剑道ui网格 在我的项目中,我需要动态构建网格列数组。 i、 例如,我(通过ajax请求)获取关于每个网格列的信息的数据数组,并在数据数组上按循环构建网格 这是我的密码: function initGrid(formInfo, FormFieldsInfo) { //========================================= //region: build dinamic fridColumn
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 ???
}
}
函数initGrid(formInfo,FormFieldsInfo){
//=========================================
//区域:构建dinamic列,gridSchema
//=========================================
var列=[];
变量字段={};
var primaryKey=null;
$.each(FormFieldsInfo,函数addGridColumn(索引,fieldInfo){
var列={};
column.field=fieldInfo.FieldName;
column.headerTemplate=“”+fieldInfo.DisplayTitle+”;
column.attributes={“类”:“columnBorder”};
column.template=getColumnTemplate(fieldInfo.ComponentType,fieldInfo.FieldName);
column.editor=getColumnEditor(fieldInfo.ComponentType);
列。添加(列);
变量字段={};
field.type=global.enums.fieldType[fieldInfo.fieldType];
field.editable=true;
字段[fieldInfo.FieldName]=字段;
如果(fieldInfo.isKey==true){
primaryKey=fieldInfo.FieldName;
}
});
vm.grid.gridOptions.columns=列;
vm.grid.schema={
数据:'数据',
型号:{
id:primaryKey,
字段:字段
}
};
var数据查询={
UserNo:global.cache.get(global.enums.cacheItems.USER).Id,
过程重命名:formInfo.SelectProcedure
};
//=========================================
//结束区域:构建dinamic列,gridSchema
//=========================================
vm.grid.dataSourceUrl=global.webApiConfig.getApiPath(global.enums.httpPath.GetETableGridData.path+'?query='+JSON.stringify(dataQuery));
vm.grid.remoteDataSource=true;
vm.grid.setDataSource();
setGridOptions设置({可编辑:“弹出窗口”});
}
函数getColumnTemplate(类型、字段名){
开关(类型){
case global.enums.componentType.checkBox:
返回函数checkBoxTemplate(数据项){
返回vm.grid.activeNotActiveTemplate(数据项[fieldName])
};
case global.enums.componentType.dateTime:
返回函数dateTemplate(dataItem){
返回vm.grid.ParseDateFormat(dataItem,fieldName)
};
默认值://简单编辑,组合
返回???
}
}
函数getColumnEditor(类型、字段名){
开关(类型){
case global.enums.componentType.date:
返回函数dateEditor(容器、选项){
vm.grid.datePickerEditor(容器,选项,false);
}
case global.enums.componentType.time:
返回函数timeEditor(容器、选项){
vm.grid.inputTimeEditor(容器、选项、新timeInput())
}
默认值://简单编辑,复选框,组合
返回???
}
}
我的问题是:
在常规网格中,使用consts columns数组,我不会为常规字段(如简单字符串数据)提供任何模板或编辑器,也不会为布尔复选框列提供任何编辑器
但是,在这种情况下,我必须始终返回模板/编辑器函数。
那么,我能做什么?
我必须编写的默认代码是什么?(除了这些分数,我还需要写些什么?)
谢谢大家! 将
???
替换为未定义的,这将使其调用默认方法。如果从动态列生成HTML
,然后在生成的表上使用$('#newTableId')。kendoGrid({…})
来创建网格会怎么样?