最代码广告位
筱进GG的gravatar头像
筱进GG2016-02-17 13:58:24

jquery表格插件:zyTable,配置超方便、体验超棒的js表格组件

各位观众老爷们,今天小弟再次分享自己开发的zyTable表格插件,此插件支持删除、编辑、分页、自定义列宽、序号等各种功能,并且用户体验、配置超超超超超超超简单、使用方便,真乃居家必备之利器啊~

    先给大家看一下大家闺秀的模样

jquery表格插件:zyTable,配置超方便、体验超棒的js表格组件

 再看一下编辑状态:

jquery表格插件:zyTable,配置超方便、体验超棒的js表格组件

接下来介绍一些初始化代码:

// 初始化插件
$(".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);

打赏

文件名:zyTable实例代码.zip,文件大小:193.761K下载
  • /
      • /zyTable
          • /zyTable/css
            • /zyTable/css/table.css
        • /zyTable/demo.html
          • /zyTable/js
            • /zyTable/js/jquery-1.7.2.js
            • /zyTable/js/table.js
          • /zyTable/plugs
              • /zyTable/plugs/bootstrap-ui
                  • /zyTable/plugs/bootstrap-ui/css
    顶部客服微信二维码底部
    >扫描二维码关注最代码为好友扫描二维码关注最代码为好友