各位观众老爷们,今天小弟再次分享自己开发的zyTable表格插件,此插件支持删除、编辑、分页、自定义列宽、序号等各种功能,并且用户体验、配置超超超超超超超简单、使用方便,真乃居家必备之利器啊~
先给大家看一下大家闺秀的模样
再看一下编辑状态:
接下来介绍一些初始化代码:// 初始化插件
$(".table").table({
"width" : 500,
"height" : 250,
"field" : [{"id":"ID", "name":"ID", "width":80},{"id":"NAME", "name":"名字", "width":120},{"id":"AGE", "name":"年龄", "width":70}],
"adaptive" : false, // 数据源字段自适应宽度方式
"pattern" : false, // 模式 true:字段方式获取数据 false:普通添加方式获取数据
"example" : false, // 实例 当前创建的是否是model中的实例
"check" : true, // 全选
"number" : true, // 序号
"edit" : true, // 编辑
"del" : true, // 删除
"allDel" : true, // 全部删除
"filter" : true, // 过滤
"paging" : true, // 分页条
"zebra" : true, // 斑马线
"dataTotal" : 30, // 数据总个数
"rowsPerPage": 10, // 一页多少行数据
"pagingComplete": function(nNowPage){ // 翻页的回调方法
console.info("用户定义翻页回调:");
console.info(nNowPage);
// 翻页添加数据
var data = [];
for(var i=nNowPage*10+1; i<=nNowPage*10+10; i++){
if(i!=nNowPage*10+10){
data.push({"ID":"000"+i,"NAME":"张三"+i+"号","AGE":(20+i)+"岁"});
}else{
data.push({"ID":"000"+i,"NAME":"张三"+i+"号","AGE":(20+i)+"岁"});
}
}
$(".table").table("addData", data);
},
"delComplete": function(aRowId){ // 删除数据的回调方法
console.info("用户定义删除回调:");
console.info(aRowId);
},
"editComplete": function(afterData, beforeData){ // 编辑数据的回调方法
console.info("用户定义编辑回调:");
console.info(afterData);
console.info(beforeData);
}
});
// 初始化添加数据
var data = [];
for(var i=1; i<=10; i++){
if(i!=10){
data.push({"ID":"000"+i,"NAME":"张三"+i+"号","AGE":(20+i)+"岁"});
}else{
data.push({"ID":"000"+i,"NAME":"张三"+i+"号","AGE":(20+i)+"岁"});
}
}
$(".table").table("addData", data);