jquery 表格控件怎么使用
展开全部
1、使用简单、扩展方便。
2、表格样式可自定义,只需修改相应的CSS样式即可。
3、支持行点击事件自定义。
4、支持复选框选择行。
5、执行列排序(支持数字、日期时间、英文、汉字等)。
6、支持自定义行按钮及按钮事件(如编辑、删除按钮等)
7、支持自定义数据的显示样式(根据当前数据或当前行数据)
8、支持分页显示数据,且在插件内部实现分页处理。
二、使用说明
该插件的使用,基本只需两个步骤即可,一个是表格的声明(创建),然后就是数据的加载。
1、表格的声明(创建)
var objTable = new HyTable({
columns: [
{name: '姓名', mapping: 'username', type: 'string', width: '100', allowSort: true, renderer: function(val){return val;}}
], //(array)列信息
emptyMsg: "暂无数据", //(string)无数据时的提示信息
renderTo: "", //(string)表格容器,必须是HTML元素的ID属性值
model: 'remote', //(string)模式,远程(remote)or本地(local)
url: '', //(string)远程模式的获取数据的url地址
allowPaging: true, (bool)//是否分页
pageSize: 20, //(int)每页显示的行数
checkSelected: false, //(bool)复选框选择
selectedField: "", //(string)复选框选中字段
stripeRows: false, //(bool)是否启用隔行变色 默认不启用
onRowClick: null //(function)行点击事件
});
2、表格数据的加载
objTable.loadData(1,data);//第一个参数为加载页的页索引,第二个参数有两种情况,1:如果参数内容是JSON对象,则表示是查询的查询条件,如果是数据,则表示直接加载本地数据到表格中。
2、表格样式可自定义,只需修改相应的CSS样式即可。
3、支持行点击事件自定义。
4、支持复选框选择行。
5、执行列排序(支持数字、日期时间、英文、汉字等)。
6、支持自定义行按钮及按钮事件(如编辑、删除按钮等)
7、支持自定义数据的显示样式(根据当前数据或当前行数据)
8、支持分页显示数据,且在插件内部实现分页处理。
二、使用说明
该插件的使用,基本只需两个步骤即可,一个是表格的声明(创建),然后就是数据的加载。
1、表格的声明(创建)
var objTable = new HyTable({
columns: [
{name: '姓名', mapping: 'username', type: 'string', width: '100', allowSort: true, renderer: function(val){return val;}}
], //(array)列信息
emptyMsg: "暂无数据", //(string)无数据时的提示信息
renderTo: "", //(string)表格容器,必须是HTML元素的ID属性值
model: 'remote', //(string)模式,远程(remote)or本地(local)
url: '', //(string)远程模式的获取数据的url地址
allowPaging: true, (bool)//是否分页
pageSize: 20, //(int)每页显示的行数
checkSelected: false, //(bool)复选框选择
selectedField: "", //(string)复选框选中字段
stripeRows: false, //(bool)是否启用隔行变色 默认不启用
onRowClick: null //(function)行点击事件
});
2、表格数据的加载
objTable.loadData(1,data);//第一个参数为加载页的页索引,第二个参数有两种情况,1:如果参数内容是JSON对象,则表示是查询的查询条件,如果是数据,则表示直接加载本地数据到表格中。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询