kendoui固定宽度_KendoUi 学习笔记(二) Grid
Kendo.ui.Grid
Kendo Ui Grid控件，继承至Widget。
一、构造
allowCopyBoolen|Object (默认：false)
当他设置true，用户就可以选中行点击复制，可以复制进入excel和记事本。
设置Object可以设置高级Copy，比如复制后通过分隔符隔开。
selectable:"multiple cell",
allowCopy:true,
columns: [
{ field:"productName"},
{ field:"category"}
],
dataSource: [
{ productName:"Tea", category: "Beverages"},
{ productName:"Coffee", category: "Beverages"},
{ productName:"Ham", category: "Food"},
{ productName:"Bread", category: "Food"}
]
});
例子—
allowCopy.delimeterString|Object(默认："\t")
delimeter是同一行，项与项之间的分隔符。
selectable:"multiple cell",
allowCopy: {
delimeter:",",
},
columns: [
{ field:"productName"},
{ field:"category"}
],
dataSource: [
{ productName:"Tea", category: "Beverages"},
{ productName:"Coffee", category: "Beverages"},
{ productName:"Ham", category: "Food"},
{ productName:"Bread", category: "Food"}
]
});
altRowTemplateString|Function
呈现行的模板。默认不同行之间通过
通过这个属性，可以自定义展示模板。支持kendo.template(html)和纯html。
例子：指定交互行模板通过Funtion
#: name #
#: age #
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
altRowTemplate: kendo.template($("#alt-template").html())
});
例子：指定交互行模板通过String
dataSource: [ { name:"Jane Doe", age: 30 }, { name: "John Doe", age: 33} ],
altRowTemplate:'
#: name # #: age #'});autoBindBoolean(default：true)
当他设置成false，Grid在初始化的时候将不绑定，必须调用read()方法才能被绑定。
个人理解：这样就完全将数据和展示分离开。
var dataSource = newkendo.data.DataSource({
data: [ { name:"Jane Doe" }, { name: "John Doe"}]
});
$("#grid").kendoGrid({
autoBind:false,
dataSource: dataSource
});
dataSource.read();//"read()" will fire the "change" event of the dataSource and the widget will be bound
columnResizeHandleWidthNumber(default：3)
定义每次句柄处理的宽度。让人更容易调整宽度。
存在疑问：未启用
columnResizeHandleWidth:6});
columnsArray
列配置模型。一个array对象或者string。javascript对象解释一个列配置。String指定绑定列名绑定的列。grid会根据列配置创建列。
dataSourceObject|Array|kendo.data.DataSource
dataSource是用于展示table rows。一个javascript对象要符合source config配置的对象，也可以是一个javascript array或者一个已经存在的kendo,data.DataSource 实例。
当datasource 配置是一个javascript 对象或者一个kendo.data.DataSourece实例，使用它的value配合datasource 配置。
当datasource配置是一个kendo.data.DataSource 实例。
例子—指定Grid Columns 通过 string array
columns: ["name", "age"], //two columns bound to the "name" and "age" fields
dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33}]
});
例子-指定grid列配置通过Object array
columns: [{
field:"name",//create a column bound to the "name" field
title: "Name" //set its title to "Name"
}, {
field:"age",//create a column bound to the "age" field
title: "Age" //set its title to "Age"
}],
dataSource: [ { name:"Jane", age: 30 }, { name: "John", age: 33}]
});
columnMenu Boolean | Object(default:false)
当设置成true，通过点击列投的图标Grid将显示列菜单。列菜单允许用户控制显示或者关闭列，过滤和排序(当过滤和排序被允许)。默认情况列菜单不被允许。
通过设置一个Javascript 对象来设置column menu的配置。
例子—启用Column Menu
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu的配置#Start-------------------------------------------------------------------------------------------------------------------------------------
columnMenu.columnsBoolean(default:true)
当设置成true，column menu 允许用户选择列显示隐藏。默认column menu 允许列选择。
例子—不允许列选择
$("#grid").kendoGrid({
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
columns:false},
sortable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.filterable Boolean(default:true)
当它设置成true，列菜单允许用户过滤grid。当grid的配置filterable。
columnMenu.filterable的属性一定要再grid的filterable为true的前提才有用。
例子—使得列过滤器无效
$("#grid").kendoGrid({
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
filterable:false},
filterable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.sortable
当设置为true，允许用户通过grid列进行排序。默认情况下当grid的sortable为true时就可以设置。
例子—让column menu 排序不可用。
$("#grid").kendoGrid({
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
sortable:false},
sortable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.message -Object
这个text message 显示在列菜单。使用自定义或本地，列菜单消息。
这个主要自定义列菜单的提示文字。
message是一个对象，里面包括columns,filter,sortAscending,sortDescending
例子—自定义列菜单消息
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
messages: {
columns:"Choose columns",
filter:"Apply filter",
sortAscending:"Sort (asc)",
sortDescending:"Sort (desc)"}
},
sortable:true,
filterable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.messages.columns String(默认：“Columns”) 默认值是根据语言包，如果是中文是"列"
这个代表列菜单中列控制的菜单显示文字。
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
messages: {
columns:"Choose columns"}
},
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.message.filterString(default:"Filter") 使用中文语言包后为“过滤”
这个代表列菜单中过滤菜单项的菜单文字。
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
messages: {
filter:"Apply filter",
}
},
filterable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.messages.sortAscending String(默认：“Sort Ascending”) 使用中文语言包后为“升序”
这个代表列菜单中升序菜单项的菜单文字。
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
messages: {
sortAscending:"Sort (asc)",
}
},
sortable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.message.sortDescending String(默认：“Sort Descending”) 使用中文语言包后为“降序”
列菜单的降序菜单的显示文字。
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
messages: {
sortDescending:"Sort (desc)",
}
},
sortable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.message.settingsString(默认：“Column Setting”)
这个是菜单头部的显示文字(仅在移动模式下可用)。
mobile:'phone'模式下可用。
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
messages: {
settings:"Column Options",
}
},
mobile:"phone",
sortable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.message.done String(default:“Done”)
菜单头部文字显示(仅在移动模式可用)
mobile:'phone'模式下可用。
columns: [
{ field:"name"},
{ field:"age"}
],
columnMenu: {
messages: {
done:"Ok",
}
},
mobile:"phone",
sortable:true,
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
columnMenu.messages.lock String(default：“Lock”)
列菜单锁定列菜单的显示文字。
存在问题：等把column配置中的locked和lockable两个配置完成以后，再回头来确定
columnMenu.messages.unlock String(默认：“Unlock”)
存在问题：等把column配置中的locked和lockable两个配置完成以后，再回头来确定
columnMenu的配置#End---------------------------------------------------------------------------------------------------------------------------------------
dataSource Object|Array|kendo.data.DataSource
数据源部件用于显示table rows。Javascript对象表示一个有效的数据源的配置，也可以是一个Javascript数组或者一个kendo.data.DataSource实例。
当dataSource配置是一个javascript 对象或者array 对象，这些都会被隐式的初始化成kendo.data.DataSource 实例。
当dataSource配置本身就是kendo.data.DataSource实例就直接使用，不会被初始化。
例子—javascript object的数据源
columns: [
{ field:"name"},
{ field:"age"}
],
dataSource: {
data: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
}
});
例子—javascript array的数据源
作者备注：给的例子与javascript object的数据源没有区别
columns: [
{ field:"name"},
{ field:"age"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
]
});
例子—已存在的kendo.data.DataSource对象
作者备注：
1、DataSource支持jsonp跨域
2、grid如果不配置column，会默认根据dataSource自动生成column配置。
var dataSource = newkendo.data.DataSource({
transport: {
read: {
url:"http://demos.telerik.com/kendo-ui/service/products",
dataType:"jsonp"}
},
pageSize:10});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable:true});
detailTemplate String|Funtion
模板展示详情行。检查详情模板通过在线demo。
作者备注：
1、detailTemplate相当于可以将列展开展示详情。
注：deatilTemplate内容不能比主列宽，除非详细模板支持滚动。
例子—Function Template
columns: [
{ field:"name"},
{ field:"age"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
detailTemplate: kendo.template($("#detail-template").html())
});
例子—指定string 详情模板
columns: [
{ field:"name"},
{ field:"age"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
detailTemplate:"
editableBoolean|Object(default:false)
当设置成true，用户可以编辑绑定的数据。默认是不允许编辑。
可以设置一个字符串(“inline”,"incell"或者“popup”)用于指定编辑模式。默认编辑模式“incell”。
incell：列单独编辑。
inline：行编辑，columns必须有"command:'edit'"
popup：弹出编辑框，columns必须有"command:'edit'"
可以设置一个javascript object 代表编辑配置。
“inline”和“popup”编辑模式由“edit”列命令触发。因此columns必须含有“edit”命令。
例子—可以编辑
columns: [
{ field:"name"},
{ field:"age"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
editable:true});
例子—弹出编辑
columns: [
{ field:"name"},
{ field:"age"},
{ command:"edit"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
editable:"popup"});
#editable 配置 start-----------------------------------------------------------------------------------------------------
editable.confirmationBoolean|String|Function(default：true)
当设置成true，用户点击“destroy”命令按钮的时候，弹出确认对话框。
String—能设置确定对话框的确认文字，比如“你确定删除吗？”。
Function—方法被调用，return "你确定删除吗？"，作为确认框的文字内容。
例子—确认对话框不可用
columns: [
{ field:"name"},
{ field:"age"},
{ command:"destroy"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
editable: {
confirmation:false}
});
例子—设置删除按钮的确认框文字
columns: [
{ field:"name"},
{ field:"age"},
{ command:"destroy"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
editable: {
confirmation:"Are you sure that you want to delete this record?"}
});
例子—通过方法返回确认框文字
columns: [
{ field:"name"},
{ field:"age"},
{ command:"destroy"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
editable: {
confirmation:function(e) {return "Are you sure that you want to delete record for " + e.name + "?";
}
}
});
editable.cancelDelete String(默认：“Cancel”)，如果引用了中文语言包 为“取消”
当confirmation被启用当用户点击“删除”，取消按钮的文字，当grid的mode:'phone'才有效。
例子—修改取消按钮，手机模式
columns: [
{ field:"name"},
{ field:"age"},
{ command:"destroy"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
mobile:"phone",
editable: {
confirmation:true,
cancelDelete:"No"}
});
editable.confirmDelete String(default：‘Delete’)
当confirmation被启用当用户点击“删除”，确认删除按钮的文字，当grid的mode:'phone'才有效。
columns: [
{ field:"name"},
{ field:"age"},
{ command:"destroy"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
mobile:"phone",
editable: {
confirmation:true,
confirmDelete:"Yes"}
});
editable.createAt String(default:'top')
新增一条数据插入的位置。top第一行；bottom最后一行。默认是在第一行。
例子—Grid最后插入一条数据。
columns: [
{ field:"name"},
{ field:"age"}
],
dataSource: [
{ name:"Jane Doe", age: 30},
{ name:"John Doe", age: 33}
],
editable: {
createAt:"bottom"},
toolbar: ["create"]
});
editable.modeString(default:‘incell’)
编辑模式。支持编辑模式"incell","inline"和“popup”。
incell:单元格内编辑。
inline:行内编辑。
popup:弹窗
“inline”和“popup”编辑模式通过column 命令 “edit”，因此一定需要 “edit” column.
例子——"inline"编辑模式
columns: [
{ field:"name"},
{ field:"age"},
{ command:"edit"}
],
dataSource: {
data: [
{ id:1, name: "Jane Doe", age: 30},
{ id:2, name: "John Doe", age: 33}
],
schema: {
model: { id:"id"}
}
},
editable: {
mode:"inline"}
});
editable.template String|Function
弹出编辑的展示模板
#editable 配置 end-----------------------------------------------------------------------------------------------------