特么的很蛋疼，Kendo UI 改起来非常麻烦，有些控件还不是很完善，代码层次分量非常大，建议新手是暂时不要接触这个框架。
1、指定服务端paging分页，并通过js解析grid
dataSource: {
type: "json",//jsonp
transport: {
read: {url:data.actionDirect,dataType: "json"}//必须要加json，不然读取不了数据
},
pageSize: 10,
serverPaging: true,
schema: //用来指定model数据，不加这2个参数则报错{data:"columndata",total:"totals"}//kendo.stringify(data.columndata)
},
2、表格内容td：
_tmpl: function(rowTemplate, alt) {
.....
.....
for (idx = 0; idx < length; idx++) {
column = that.columns[idx];
template = column.template;
type = typeof template;
rowTemplate += "<td" + stringifyAttributes(column.attributes) + " style='text-align:center' role='gridcell'>";//表格内容TD
rowTemplate += that._cellTmpl(column, state);
rowTemplate += "</td>";
}
rowTemplate += "</tr>";
3、column:[{id:'1',template:''}]为空出错：
_cellTmpl: function(column, state) {
.....
.....
} else if (type === STRING && template!="") {//为空则返回
html += template;
4、column:[{id:'1',menu:false}] //筛选列隐藏，'false'也隐藏：
_ownerColumns: function() {
var columns = this.owner.columns, menuColumns = grep(columns, function(col) {
var result = true, title = trim(col.title || "");
if ((col.menu === false || col.menu === "false") || !col.field && !title.length) {//字符串也返回空
result = false;
}
return result;
});
5、点击（不加ctrl）取消行选中：
_tap: function(e) {
var target = $(e.target), that = this, ctrlKey = e.event.ctrlKey, multiple = that.options.multiple, shiftKey = multiple && e.event.shiftKey, selected, whichCode = e.event.which, buttonCode = e.event.button;
//in case of hierarchy or right-click
if (target.closest("." + SELECTABLE)[0] !== that.element[0] || whichCode && whichCode == 3 || buttonCode && buttonCode == 2) {
return;
}
selected = target.hasClass(SELECTED);
if (selected && !ctrlKey) {
that._unselect(target);
that._notify(CHANGE);
return;
}//9516
6、remote grid 加page 事件：
dataSource: {
type: "json",//jsonp
transport: {
read: {url:data.actionDirect,dataType: "json"}
},
pageSize: 10,
serverPaging: true,
schema:{data:"columndata",total:"totals"}//kendo.stringify(data.columndata)
},
7、grid中的filterable自定义ui不能和columnMenu:true并存
if (filterable && !that.options.columnMenu) {//不能并存，否则会覆盖掉columnMenu菜单
that.thead.find("th:not(.k-hierarchy-cell,.k-group-cell)").each(function(index) {
...
//可以在这里解析字符串为json
cell.kendoFilterMenu(extend(true, {}, filterable, columns[index].filterable, {
dataSource: that.dataSource,
values: columns[index].values,
closeCallback: closeCallback,
init: function(e) {
that.trigger(FILTERMENUINIT, {
field: e.field,
container: e.container
});
}
}));
}
});
}
如果要用columnMenu菜单，且某个字段为date或特殊字段，需用到控件，只有在
schema:{
data:"columndata",
total:"totals",
model:{
fields:{
createDate:{type:"date"},
personalBirthday:{type:"date"},
personalJoindate:{type:"date"}
}
}
【7】附图：
8、grid中column属性无法解析字符串形式的json数组
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category", values: '[{ text: "Beverages", value: 1 },{ text: "Food", value: 2 }]' }//加引号无法解析
],
dataSource: [
{ productName: "Tea", category: 1 },
{ productName: "Ham", category: 2 }
]
});
_cellTmpl: function(column, state) {
var that = this, settings = extend({}, kendo.Template, that.options.templateSettings), template = column.template, paramName = settings.paramName, field = column.field, html = "", idx, length, format = column.format, type = typeof template, columnValues = eval(column.values);////解析column:[... values配置变量]
if (column.command) {
.....
【8】附图：
9、grid中toolbar中定义通用修改事件（默认只有add,save,cancel)：
_toolbar: function() {
var that = this, wrapper = that.wrapper, toolbar = that.options.toolbar, editable = that.options.editable, container;
if (editable && editable.create !== false) {
container.on(CLICK + NS, ".k-grid-add", function(e) {
e.preventDefault();
....
}.on(CLICK + NS, ".k-grid-edit", function(e) {//样式名称在_createButton函数中随意定义
e.preventDefault();
if($("tbody>tr:not(.k-detail-row,.k-grouping-row):visible.k-state-selected").closest("tr").length<1){
kendo.ui.ExtAlertDialog.show({
title: "提示!",
message: "请选择需要修改的记录!",
icon: "k-ext-information"
});
return;
}
that.editRow($("tbody>tr:not(.k-detail-row,.k-grouping-row):visible.k-state-selected").closest("tr"));//编辑当前行
});
【9】附图：
10、grid中popup的CRUD通用模版建型，主外键值（如ID,companyID)隐藏列不显示在div中
_createPopupEditor: function(model) {
var that = this, html = "<div " + kendo.attr("uid") + '="' + model.uid + '"><div class="k-edit-form-container">', column, command, fields = [], idx, length, tmpl, updateText, cancelText, tempCommand, attr, editable = that.options.editable, template = editable.template, options = isPlainObject(editable) ? editable.window : {}, settings = extend({}, kendo.Template, that.options.templateSettings);
....
....
else {//添加模版//修改模版
for (idx = 0, length = that.columns.length; idx < length; idx++) {
column = that.columns[idx];
if (!column.command) {
html += '<div '+(column.tmplEditable===true||column.tmplEditable==="true" ? "" : "style=display:none" )+' class="k-edit-label"><label for="' + column.field + '">' + (column.title || column.field || "") + "</label></div>";
if ((!model.editable || model.editable(column.field)) && column.field) {
fields.push({
field: column.field,
format: column.format,
editor: column.editor,
values: column.values
});//修改模版隐藏字段不允许编辑
html += "<div " + kendo.attr("container-for") + '="' + column.field + '" ' +
(column.tmplEditable===true||column.tmplEditable==="true" ? "" : "style=display:none" ) +
' class="k-edit-field"></div>';
11、grid中popup的CRUD通用模版建型，字段自动匹配input，如createDate匹配datepicker：
refresh: function() {
var that = this, idx, length, fields = that.options.fields || [], container = that.options.clearContainer ? that.element.empty() : that.element, model = that.options.model || {}, rules = {}, field, isObject, fieldName, modelField, modelFields, STRING = "string";
if (!$.isArray(fields)) {
fields = [ fields ];
}
for (idx = 0, length = fields.length; idx < length; idx++) {
field = fields[idx];
isObject = isPlainObject(field);
field.values = field.values ? eval(field.values) : ""; //默认添加修改模版，【column设置】-values无法解析为字键映射
fieldName = isObject ? field.field : field;
modelField = (model.fields || model)[fieldName];
addValidationRules(modelField, rules);
//修改模版中通过editor字符串配置创建对应函数解析对象
field.editor = (typeof field.editor == STRING && field.editor != "") ? eval(field.editor) : field.editor;//"editor:'editors.number,date|string|boolean|values'"
that.editor(field, modelField);//这一步解析的html
【11】附图：
12、框架本身运行环境
纠结了一下午，kendo控件无法解析，是因为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 这句话，新建HTML默认写上的，没注意
解决方法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
或者直接删掉后面的
..
Comments | NOTHING