LayUI自定义分页插件，仿EasyUI的DataGrid

大部分代码转自layUI社区 《嘉文》 道友的自定义分页插件 ，随后我增加了CheckBox选中行功能，以及条件查询的用法，并完善了一些《嘉文》道友没有明确指出的部分用法。废话不多说，上代码。

layui.define(['form','jquery', 'laypage'], function (exports) {    var $ = layui.jquery, laypage = layui.laypage,form = layui.form();    $.fn.jfTable = function (_opt, args) {        if (typeof _opt == "string") {//判断是方法还是对象            return JfTable.methods[_opt](this, args);        }        _opt = _opt || {};        return this.each(function () {            var grid = $.data(this, "jfTable");            if (grid) {                _opt = $.extend(grid.options, _opt);                grid.options = _opt;            } else {                grid=new JfTable(this,_opt);                $(this).data('jfTable',grid);            }        });    }    var JfTable=function (element,option) {        this.$element=$(element);        if(option.select){            option.columns.unshift({                type:'check',                width: 50            });        }        this.option= $.extend({},JfTable.default1, option);        this.init();        if(option.page){            this.$page=$("<div class='page-bar'></div>").insertAfter(this.$element);            this.initPage();        }    }    JfTable.prototype.init=function () {        $("<table class='layui-table'></table>").appendTo(this.$element.html(""));        if(this.option.url){            this.ajaxData();        }        this.initBody();        this.initToolbar();    };    JfTable.prototype.initEvent=function () {        var t=this,_opt=t.option;        if(_opt.select){            form.render("checkbox");            form.on('checkbox(allChoose)', function(data){                var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');                child.each(function(index, item){                    item.checked = data.elem.checked;                });                form.render('checkbox');            });        }    }    //初始化选中行事件    JfTable.prototype.initCheckbox=function(){        var t=this,_opt=t.option;        //获取tr的点击事件         $("tbody tr").click(function() {                var checkbox = $(this).find(":checkbox").attr("checked");                //由于重复使用渲染，导致重复点击行后会加载不出来样式，所以此处使用removeClass和addClass来操作                if(checkbox){                         $(this).find(":checkbox").attr("checked",false)                    $(this).find(":checkbox").next().removeClass("layui-form-checked");                }else{                          $(this).find(":checkbox").attr("checked",true)                     $(this).find(":checkbox").next().addClass("layui-form-checked");                }                 });    }    //生成工具栏    JfTable.prototype.initToolbar=function () {        var t=this,$e=t.$element,_opt=t.option,toolbar=_opt.toolbar,tool= $("<div class='layui-btn-group'></div>").prependTo($e);        $.each(toolbar,function (index,item) {            var btn=$("<button class='layui-btn "+_opt.toolbarClass+"'></button>").appendTo(tool);            if(item.icon){                $("<i class='layui-icon'>"+item.icon+"</i>").appendTo(btn);            }else{                btn.append(item.text);            }            btn[0].onclick=eval(item.handle||function (){});//绑定匿名事件        });    }    //加载分页    JfTable.prototype.initPage=function () {       var t=this,opt=t.option, page=t.$page;        laypage({            cont: page,            curr: opt.curr,            pages:opt.pages,            groups: 5,            jump: function (obj,s) {                t.option.queryParam=$.extend(opt.queryParam,{pageNumber:obj.curr});                if(!s){                    t.init();                }            }        });    }    JfTable.prototype.initBody=function () {        var t=this,$e=t.$element,opt=t.option,col=opt.columns,dt=opt.data,            $table=$e.find("table").html(""),            $cg=$("<colgroup></colgroup>").appendTo($table),            $th=$("<thead></thead>").appendTo($table),            $thr=$("<tr></tr>").appendTo($th),            $tb=$("<tbody></tbody>").appendTo($table);        $tb.html("");        if(opt.select){            $table.wrapAll("<div class='layui-form'></div>");        }        //遍历创建表头        for(var i=0,l=col.length;i<l;i++){            var c=col[i];            i==(l-1)?$("<col>").appendTo($cg):$("<col width='"+c.width+"'>").appendTo($cg);            c.type=='check'?$("<th><input type='checkbox' lay-skin='primary' lay-filter='allChoose'></th>").appendTo($thr):$("<th>"+c.text+"</th>").appendTo($thr);        }        //生成tbody  表格体        for(var i=0,l=dt.length;i<l;i++){            var d=dt[i],$tr=$("<tr></tr>").appendTo($tb);            //取出对应列值            for(var j=0,cl=col.length;j<cl;j++){                var c=col[j],v=d[c.name],f=c.formatter;                if(c.type=='check'){                    $("<td><input type='checkbox' value='"+i+"' lay-skin='primary'></td>").appendTo($tr);                    continue;                }                if(typeof f == "function"){                    v=f(v,d,i);                }                $("<td>"+v+"</td>").appendTo($tr);            }        }        opt.onLoadSuccess(dt);        if(opt.select){            t.initEvent();            t.initCheckbox();        }    }    JfTable.prototype.ajaxData=function () {        var opt=this.option,param=$.extend({},opt.queryParam,{pageSize:opt.pageSize}),        result=$.ajax({                url: opt.url,                method:opt.method,                data:opt.onBeforeLoad(param),                async:false            }).responseJSON;        var json=JSON.parse(result.data);          opt.dataFilter(result);        if(opt.page){            opt.pages=json.totalPage;            opt.curr=json.pageNumber;        }        opt.data= json.list;    }    JfTable.methods={        option: function (jq) {            //取出该table的option属性            return $.data(jq[0], "jfTable").option;        },        insertRow: function (jq, row) {            //插入一行            var s=$.data(jq[0],"jfTable"),opt=s.option;            opt.data.unshift(row);            s.initBody();        },        getRow: function (jq, args) {            //获取制定行的数据  返回row行数据            var s=$(jq[0]).jfTable('option');            return s.data[args];        },        reload: function (jq, param) {            var t=$.data(jq[0],"jfTable"),opt=t.option;            opt.queryParam= $.extend({},opt.queryParam,param);            t.init();            if(opt.page){                t.initPage();            }        },        updateRow:function (jq,param) {            //更新指定行的数据            var s=$.data(jq[0],"jfTable"),opt=s.option;            opt.data[param.index]=param.row;            s.initBody();        },        getSelected:function (jq) {            //获取选中行，返回数组['0','1']           var s = $(jq[0]).find("table.layui-table tbody .layui-form-checked"),r=[];           for(var i=0,l=s.length;i<l;i++){               var index=$(s[i]).prev().val();               r[i]=this.getRow(jq,index);           }           return r || undefined;        }    };    JfTable.default1={        columns: [],        url: null,        data:[],        method:"get",        select:false,        toolbar:[],        pageSize:20,        queryParam: {},        onBeforeLoad: function (param) {            //加载前事件，参数为table获取url数据发送的参数            return param;        },        onLoadSuccess: function (data) {            //加载成功后触发，参数是数据体            return data;        },        dataFilter:function (res) {            //数据过滤事件，参数是url的响应体            return res;        }    };    exports('jfTable', {});});

以上为jfTable.js 使用layUI 的朋友们放到modules文件夹下。这点基础我就不上图了。
然后在layUI.js 中 的modules中添加对应的引用

//内置模块modules = {  layer: 'modules/layer' //弹层  ,jfTable: 'modules/jfTable' //列表参照easyUI的dataGrid写的 作者：嘉文-------------在这里哦  ,'layui.all': 'dest/layui.all' //PC模块合并版};

方便大家看清楚，所以我把其他引用删除了
下边是使用方法

layui.use(['element','laypage', 'layer','jquery','laytpl','form','layedit', 'laydate','jfTable'], function(){    var laypage = layui.laypage    ,layer = layui.layer    ,$ = layui.jquery    ,laytpl = layui.laytpl    ,form = layui.form()    ,layedit = layui.layedit    ,laydate = layui.laydate;    var config = {              url:"${ctx}/member/getList",//获取数据的url              queryParam: {},//查询参数              page:true,//是否分页              pageSize:10,//每页数量              select:true,//是否生成checkbox              columns: [                          {text:'昵称',name: 'nickName',width: 100,formatter:function(value,row,index){return value;}},                         {text:'电话',name: 'phone',width: 100,formatter:function(value,row,index){return value;}},                         {text:'用户类型',name: 'userType',width: 100,formatter:function(value,row,index){return value;}}                         ],              method:"post",//请求方式              onBeforeLoad: function (param) {                  return param;              },              onLoadSuccess: function (data) {                  return data;              },              dataFilter:function (data) {                  return data;              }          }          $("#table").jfTable(config);//初始化列表});  //条件查询的时候，建议大家这么写，不然可能出错//还有我在用form作为提交条件的时候，发现执行条件查询会二次查询，第一次已经查询出来了//但是有form又会查一遍，而且这一遍没有加上你的条件。所以我才用//{"startTime":$("#startTime").val(),"endTime":$("#endTime").val(),"keywords":$("#keywords").val()};    $("#queryBtn").click(function(){        var param ={"startTime":$("#startTime").val(),"endTime":$("#endTime").val(),"keywords":$("#keywords").val()};        $("#table").jfTable('reload',param);    });

页面中只需要配置一个id 为table的div即可，id随便换。。。不过 $(“#table”).jfTable(config);//初始化列表 这里记得也换名字

<div id="table"></div> 

那么我们需要在后台指定的格式又是什么呢。《嘉文》道友并没有说明后台需要返回的什么格式。然后我就去断点找啊找
{“totalPage”:3,”pageNumber”:1,”list”:[{“nickName”:”小明”,”phone”:”18101051555”,”userType”:”管理员”}]}
totalPage 总页数
pageNumber当前页
list为数据

下面附送嘉文道友的说明文档。

jfTable 使用说明

---

jfTable基于layui实现的一个table插件，能够自动生成一个数据表格
内置分页以及按钮功能，实现方法大致参考easyui的datagrid
功能还在完善，喜欢的朋友多多提提意见，工作之余我尽量多完善,因为是基于layui的，所以必须要使用layui的方式去使用它

这个小东西也是我之前没事的时候对着easyui的datagrid的源码研究了一通，然后又想学着layui的使用方法做了个练手的东西。
很多地方不合理我也明白，希望大家多提点提点，js我也只会些粗浅的东西

效果演示

1 配置说明

使用方法

<div id="table"></div>var config={} $("#table").jfTable(config);//config参考下面进行配置  var config = {    url:"",//获取数据的url    data:[],//本地数据  不支持本地数据的分页    queryParam: {},//查询参数    page:true,//是否分页    pageSize:10,//每页数量    select:true,//是否生成checkbox    columns: [ {//列数组            text:'用户名',//显示的表头            name: 'username',//显示的数据key            width: 100,//宽度            formatter:function(value,row,index){//value 当前值  row 当前行数据  index 当前行索引            }        }],    method:"post",//请求方式    toolbarClass:"layui-btn-small",//按钮的样式    toolbar:[{//按钮数组            text:"新增",//icon缺省时显示            icon:"&#xe654;",//按钮图标（如果不为空则显示按钮不显示text）            handle:function () {//绑定函数            }        }]，    //事件   一定要return     onBeforeLoad: function (param) {        return param;    },    onLoadSuccess: function (data) {        return data;    },    dataFilter:function (data) {        return data;    }}

2 目前实现的方法

2.1 option //无参数

取出该table的option属性

2.2 reload （param）

重新根据param加载，param可以自定义，其中包含了初始化的参数

2.3 insertRow(row)

插入一行

2.4 getRow(index)

获取制定行的数据 返回row行数据

2.5 update(data{index:1,row{}})

更新指定行的数据
参数格式

{    index:1,//索引    row:{  //数据    }}

2.6 getSelected //无参数

获取选中行，返回数组[‘0’,’1’]

3 事件（自定义事件一定要写返回）

3.1 onBeforeLoad(param)

加载前事件，参数为table获取url数据发送的参数

3.2 onLoadSuccess(data)

加载成功后触发，参数是数据体

3.3 dataFilter(res)

数据过滤事件，参数是url的响应体