EasyUI
jQuery EasyUI framework helps you build your web pages easily.
文档内容没官网那么新,但是对照的中文和示例还不错,对初学者和英痴友好
扩展整理原则：低耦合。 扩展来源：前辈高人已完成的扩展（宇神、夏悸、流云、IT工头）、落阳自己写的扩展。
老牌日期控件库,生产中可替代 EasyUI 的日期组件,比如:只要年月的日期控件.
DataGrid
使用及说明
$("#tag").datagrid({
iconCls: "icon-list", //图标,会出现在标题前面
title: "标题",
width: 500, //宽度
height: 300, //高度
rownumbers: true, //行号
nowrap: true, // 是否显示数据在一行中,默认为 true, 设置为 true 能提高加载性能
autoRowHeight: false, // 自动行高,默认为 true, 设置为 false 能提高加载性能
striped: true, //奇偶行色差,也就是隔行变个色
singleSelect: true, //启用单选,就不能多选了
sortName: "fieldname", //排序字段,会作为请求参数,通常和sortOrder一起使用
sortOrder: "asc", //排序类型,默认值"asc",会作为请求参数,通常和sortName一起使用
showFooter: false, //是否显示页脚,通常可以用来呈现一些汇总数据或说明文本
queryParams: {}, //请求参数
url: "http://...", //请求地址
loadFilter: function(data){
//数据过滤
//通常我们可以预处理数据,再显示出来.
//比如:
//1. 把不标准的数据转换为标准数据
//2. 添加附加数据,e.g:footer
//3. 过滤数据,去除不要的内容
return data; //处理完成后,必须返回一个标准数据.
},
onLoadSuccess: function(data){
//加载成功事件
//通常可以在加载成功时,做一些其他处理.
},
onClickRow: function(rowIndex, rowData){
//单击行事件
},
onDblClickRow: function(rowIndex, rowData){
//双击行事件
},
onBeforeLoad: function (param){
//在url请求前触发,如果返回 false url请求会取消
}
});
参考文档
EasyUI combobox
$("#tag").combobox({
method: "GET" //或者POST
url: "",
data: [
{ id: "", text: "" },
{ id: "", text: "" },
{ id: "", text: "" }
], // 直接赋值本地数据,键值字段需要与之对应.
valueField: "id", //键字段,对应控件的value值
textField: "text" //值字段,对应控件显示的值
editable: true, //启用编辑
required: true, //必须包含
multiple: false, // 是否支持多选,默认为false.
onLoadSuccess: function(){
//数据加载成功后的操作
//比如:
//1. 可以设置默认选中
},
onSelect: function(record){
//record为选中行的数据对象
}
});
$("#tag").combobox("enable"); //默认启用,正常状态
$("#tag").combobox("disable"); //禁用,用户不可操作,js可操作
$("#tag").combobox("clear"); //清除所有选项,数据还是在的,只是清除了选择项,处于未选择状态
EasyUI numberbox
$("#tag").numberbox({
precision: 2 //小数点位数,默认为0.
});
EasyUI datebox
Tips: 当日期控件的输入或输入错误时,
datebox("getValue")取到的值为字符串"NaN-NaN-NaN".
EasyUI treegrid
$("#element").treegrid({
url:"",
idField: "id",
treeField: "tree",
animate: true, // 当节点展开或折叠时是否显示动画效果,默认为false
columns: [[
{ title: "列名1", field: "field1", width:100, align: "center" },
{ title: "列名2", field: "field2", width:100, align: "center" },
{ title: "列名3", field: "field3", width:100, align: "center" },
]],
// 事件
onClickRow: function(row){
// 当单击行时触发...
},
onDblClickRow: function(row){
// 当双击行时触发...
}
});
