html table插件,jquery表格插件：zyTable，配置超方便、体验超棒的js表格组件

各位观众老爷们，今天小弟再次分享自己开发的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);