低调人的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  LV26 2022年4月21日
    cnfreerwow  LV2 2022年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日
    最代码最近浏览分享源代码列表最近浏览
    lingtiejing  LV15 2023年6月25日
    173745830  LV11 2023年2月1日
    lonhjk  LV4 2023年1月14日
    wujiahua  LV3 2022年12月13日
    qwqw900619  LV4 2022年7月16日
    海阔天空666  LV7 2022年7月6日
    yyy1121  LV2 2022年5月24日
    511076827  LV26 2022年4月21日
    xiazai119  LV1 2022年3月5日
    Gaodaima  LV6 2022年2月24日
    顶部 客服 微信二维码 底部
    >扫描二维码关注最代码为好友扫描二维码关注最代码为好友