低调人的gravatar头像
低调人 2016-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
    最代码最近下载分享源代码列表最近下载
    511076827  LV24 4月21日
    cnfreerwow  LV2 1月9日
    ppooppoo932  LV4 2021年1月7日
    yale1422688399  LV3 2020年5月29日
    dayuln  LV8 2020年3月2日
    myjzb111  LV9 2019年12月7日
    xuyongff  LV24 2019年11月4日
    songtao520  LV17 2019年9月29日
    Java基础入门  LV12 2019年7月3日
    z2482130090  LV9 2019年7月3日
    最代码最近浏览分享源代码列表最近浏览
    yyy1121  LV2 5月24日
    511076827  LV24 4月21日
    xiazai119  LV1 3月5日
    Gaodaima  LV4 2月24日
    cnfreerwow  LV2 1月9日
    767299026  LV8 2021年12月19日
    nickshen111  LV8 2021年12月13日
    second  LV5 2021年10月24日
    balckconan  LV1 2021年8月24日
    13784770670 2021年7月7日
    暂无贡献等级
    顶部 客服 微信二维码 底部
    >扫描二维码关注最代码为好友扫描二维码关注最代码为好友