筱进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
    最代码最近下载分享源代码列表最近下载
    ppooppoo932 LV41月7日
    月亮
    yale1422688399 LV32020年5月29日
    星星星星星星
    dayuln LV72020年3月2日
    月亮星星星星星星
    myjzb111 LV92019年12月7日
    月亮月亮星星
    xuyongff LV222019年11月4日
    太阳月亮星星星星
    songtao520 LV162019年9月29日
    太阳
    Java基础入门 LV122019年7月3日
    月亮月亮月亮
    z2482130090 LV92019年7月3日
    月亮月亮星星
    zhjwgs LV142019年7月1日
    月亮月亮月亮星星星星
    2351143775 LV22019年3月23日
    星星星星
    最代码最近浏览分享源代码列表最近浏览
    ppooppoo932 LV41月7日
    月亮
    0lsnMaJsn LV42020年12月16日
    月亮
    pxqtsht LV132020年12月8日
    月亮月亮月亮星星
    前端-大雄2020年9月22日
    暂无贡献等级
    yghstsh LV12020年9月18日
    星星
    wangzile1994 LV122020年9月5日
    月亮月亮月亮
    小乞儿 LV72020年8月14日
    月亮星星星星星星
    hongkejidan2020年8月7日
    暂无贡献等级
    唐少darks LV132020年6月10日
    月亮月亮月亮星星
    weijianguo LV52020年6月6日
    月亮星星
    顶部客服微信二维码底部
    >扫描二维码关注最代码为好友扫描二维码关注最代码为好友