精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui数据表格加序号的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layUI表格分页插件

    2017-06-14 17:54:49
    大部分代码转自layUI社区 《嘉文》 道友的自定义分页插件 随后我增加了CheckBox选中行功能,并完善了一些《嘉文》道友没有明确指出的部分用法。 layui.define(['form','jquery', 'laypage'], function ...
    大部分代码转自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].οnclick=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) {
            	//重新根据param加载,param可以自定义,其中包含了初始化的参数
            	//参数格式
            	//{
            		//index:1,//索引
            	    //row:{  //数据
            	    //}
            	//}
                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中添加对应的引用


    加载完后,我们随机就可以在页面中调用了


    记得引用哦

    使用方法如下:


    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);//config
    });
      

    页面中只需要定义一个ID为table的div即可使用了

    <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我也只会些粗浅的东西


    ###效果演示
    ![效果演示](http://git.oschina.net/uploads/images/2017/0401/142909_f2175c5f_417829.png "效果演示")




    ###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的响应体




    展开全文
  • 关于layui框架自带分页表格重载的接口解析问题

    万次阅读 热门讨论 2018-08-09 16:06:31
    **需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格) data 格式例如: { "count": 11, "code&...

    首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致!
    首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致

    **需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格)
    data 格式例如:

    {
      "count": 11,
      "code": 0,
      "msg": "",
      "data": [
        {
          "id": "1",
          "money": 20,
          "toptype": "在线",
          "operationtype": "充值",
          "remittanceid": 1,
          "img": "",
          "datetime": "2018-08-01 16:01:09",
          "accountid": "wyp666",
          "statusid": "P05",
          "orderid": "2",
          "userid": "wdm123456",
          "audittime": "2018-07-25 16:02:53",
          "tradingid": "",
          "message": "已审核",
          "ip": ""
        }]
       }
    

    这时候注意分页后台json的参数名称要与框架保持一致,特别是page(当前第几页)和 limit(每页显示条数),这时可以通过框架分页属性来直接设置当前为第几页和每页显示条数不用通过data传递这两个参数到后台了;如果page不传的话会默认为第一页;
    例如:

     table.render({
                elem: '#detail',
                url : '后台接口',
                method:'请求方式',
                cellMinWidth : 95,
                page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,groups: 1 //只显示 1 个连续页码
                    ,first: false //不显示首页
                    ,last: false //不显示尾页
                },
                unresize:false, //禁止拖拽td框,默认为false可拖拽
                limits : [10,15,20,25], //这里设置可选择每页显示条数
                limit : 10, //这里设置的是每页显示多少条
                id : "表格ID",
                cols : [[..........]]
    

    效果图如下:
    这里写图片描述

    **表格重载(头部搜索功能):通过传入的日期来搜索请求后台查询出数据

    //搜索查询
            var active = {
                reload: function(){
                    var date_s = $('#date_s').val(); //传入搜索的日期值 
                    //执行重载
                    table.reload('重载表格id', {
                        url : '搜索请求接口',
                        method:'请求类型',
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: { //类似于 data
                            beginDate:date_s //传入日期参数
                        }
                    });
                }
            };
            $('#rechar_btn').on('click', function(){
                var type = $(this).data('type');
                //不能为空验证
                if( $('#date_s').val()==""){
                    layer.msg('查询起始日期不能为空');
                    return false;
                }
                active[type] ? active[type].call(this) : '';
            });
    

    特别要注意的是执行表格重载时,点击的按钮btn最好不要用button或者input(容易入坑)否则点击搜索时页面会刷新,接口会提交两次,把 button 换成 div 就会避免这个问题。
    类似于:

    <button class="layui-btn" data-type="reload"  lay-filter="rechar_btn" id="rechar_btn" >搜索</button>
    换成 div
    <div class="layui-btn" data-type="reload"  lay-filter="rechar_btn" id="rechar_btn" >搜索</div>
    

    最后说一下:分页也支持回调----看文档里的-切换分页的回调

    laypage.render({
      elem: 'test1'
      ,count: 70 //数据总数,从服务端得到
      ,jump: function(obj, first){
        //obj包含了当前分页的所有参数,比如:
        console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数
        
        //首次不执行
        if(!first){
          //do something
        }
      }
    });
    

    都是项目里遇到的一些小问题,顺手写一笔,如果各位大神不巧看到这里还请大家多多提点意见和建议,大家多多沟通和分享~

    如果你觉得对你有帮助的话,求打赏哦~~

    展开全文
  • (2)分页后端的数据处理 具体代码如下: 前端界面代码:包括分页,增删改查,刷新(搜索功能还没做,后端是java代码) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...

    整体效果图如下:
    在这里插入图片描述

    (1)分页前端界面处理

    在这里插入图片描述

    (2)分页后端的数据处理
    在这里插入图片描述

    具体代码如下:
    前端界面代码:包括分页,增删改查,刷新(搜索功能还没做,后端是java代码)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Data-Table 表格</title>
        <link rel="stylesheet" href="../frame/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../frame/static/css/style.css">
        <link rel="icon" href="../frame/static/image/code.png">
        <!--//表单样式的修改-->
        <style>
            .layui-form-label{
                width: 100px;
            }
            .layui-input-block {
                margin-left: 130px;
                min-height: 36px
            }
        </style>
    </head>
    
    <body class="body">
    
    <!-- 工具集 -->
    <div class="my-btn-box">
        <span class="fl">
            <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量添加</a>
            <a class="layui-btn btn-add btn-default" id="btn-get">采集设备总数</a>
            <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
            <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
        </span>
        <span class="fr">
            <div class="demoTable">
                <span class="layui-form-label">搜索条件:</span>
                <!--// 搜索ID:-->
            <div class="layui-inline">
             <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入搜索条件">
            </div>
            <button class="layui-btn" data-type="reload">查询</button>
            </div>
        </span>
    </div>
    
    
    <!--&lt;!&ndash; 表格 &ndash;&gt;-->
    <script type="text/javascript" src="../frame/layui/layui.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <!-- 表格操作按钮集 -->
    <script type="text/html" id="barOption">
        <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
    </script>
    <script>
        layui.use(['table', 'form', 'layer', 'vip_table'], function () {
    
    // 操作对象
            var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , vipTable = layui.vip_table
                , $ = layui.jquery
            var totals= $.ajax({
                url: "/getCollectorInfoTotalRow",
                type: "get",
                success: function (data) {
                    var json=JSON.parse(data)
                    return json.count
                }
            });
    
            table.renderBefore=function(res){ //修改res
                var counts=totals; //数据总量
                res.count = counts;
                return res; //此时的res就有count属性了
            }
            // 表格渲染
            var tableIns = table.render({
                elem: '#test'                  //指定原始表格元素选择器(推荐id选择器)
                , height: vipTable.getFullHeight()    //容器高度
                , toolbar: '#toolbarDemo'
                , title: '采集设备表'
                , cols: [[                  //标题栏
                    {checkbox: true, sort: true, fixed: true, space: true}
                    , {field: 'eqptType', title: 'eqptType', width: 150}
                    , {field: 'eqptTypeName', title: 'eqptTypeName', width: 150}
                    , {field: 'eqptIdCode', title: 'eqptIdCode', width: 150}
                    , {field: 'eqptName', title: 'eqptName', width: 180}
                    , {field: 'createTime', title: 'createTime', width: 200}
                    , {field: 'creator', title: 'creator', width: 100}
                    , {fixed: 'right', width: 178, align: 'center', toolbar: '#barOption', title: '操作'}
                ]]
                , id: 'dataCheck'
                // , url: '../json/decice_type.json'//本地数据
                ,url:'/getCollectorInfo'
                , page: true
                 ,limit:15
                , limits: [ 15, 30, 40, 50]
                , loading: true
                , done: function (res) {
                    console.log(res);
                }
            });
            //监听表格复选框选择
            table.on('checkbox(demo)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.alert(JSON.stringify(data));
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/deleteCollector",
                            type: "POST",
                            data: {eqptType: data.eqptType, eqptIdCode: data.eqptIdCode},
                            success: function (msg) {
                                var json = JSON.parse(msg);
                                var returnCode = json.returnCode;
                                if (returnCode == 200) {
                                    //删除这一行
                                    obj.del();
                                    //关闭弹框
                                    layer.close(index);
                                    layer.msg("删除成功", {icon: 6});
                                } else {
                                    layer.msg("删除失败", {icon: 5});
                                }
                            }
                        });
                        return false;
                    });
                } else if (obj.event === 'edit') {
                    //formData = data;
                    if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
    
                        layer.open({
                            //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                            type: 1,
                            title: "修改采集设备信息",
                            area: ['420px', '330px'],
                            content: $("#popUpdateTest")
                        });
                        setFormValue(obj,data);//动态向表单赋值
                    }
                }
            });
            //监听弹出框表单提交
            function setFormValue(obj,data){
                form.on('submit(demo11)', function(massage) {
                    $.ajax({
                        url:'/updateCollectorAndConfig',
                        type:'POST',
                        dataType:'json',
                        data:{
                            oldeqptType:data.eqptType,
                            oldeqptIdCode:data.eqptIdCode,
                            neweqptType:massage.field.neweqptType,
                            neweqptIdCode:massage.field.neweqptIdCode,
                            eqptName:massage.field.neweqptName
                        },
                        success:function (msg) {
                            var returnCode = msg.returnCode;
                            if(returnCode==200){
                                layer.closeAll('loading');
                                layer.load(2);
                                layer.msg("修改成功", {icon: 6});
                                setTimeout(function(){
                                    obj.update({
                                        eqptType:massage.field.neweqptType,
                                        eqptIdCode:massage.field.neweqptIdCode,
                                        eqptName:massage.field.neweqptName
                                    });//修改成功修改表格数据不会跳转到首页
                                    layer.closeAll();
                                }, 1000);
                            }else{
                                layer.msg("修改失败", {icon: 5});
                            }
                        }
                    })
                    return false;
                })
    
            }
    
    
    
            //添加采集设备
            $('#btn-add').on('click', function () {
                layer.open({
                    type: 2,
                    title: '采集设备添加',
                    maxmin: true,
                    area: ['420px', '330px'],
                    shadeClose: false, //点击遮罩关闭
                    content: 'CollectorAdd-form.html',//下面是添加界面的代码
                });
            });
    
    
            //获取采集设备总数
            $('#btn-get').on('click', function () {
                var msg = "";
                $.ajax({
                    url: "/getCollectorInfoTotalRow",
                    type: "get",
                    success: function (data) {
                        var json = JSON.parse(data)
                        msg = "采集设备的总数为:" + json.count;
                        layer.open({
                            type: 1,
                            area: ['250px', '180px'],
                            btn: '关闭',
                            shadeClose: true, //点击遮罩关闭
                            content: '<div style="padding:30px;">' + msg + '</div>'
                            , yes: function () {
                                layer.closeAll();
                            }
                        });
                    }
                });
    
            });
    
            //搜索功能的实现
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    
            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');
    
                    //执行重载
                    table.reload('idTest', {
                        where: {
                            key: {
                                field: demoReload.val()
                            }
                        }
                    });
                }
            };
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    
            // 刷新表格
            $('#btn-refresh').on('click', function () {
                tableIns.reload()
            });
        });
    </script>
    
    //这是修改弹出框的代码style="display:none是界面的隐藏,只有调用才会在界面显示
    <div class="layui-row" id="popUpdateTest" style="display:none;">
        <div class="layui-col-md10">
            <form class="layui-form layui-from-pane" style="margin-top:20px" >
                <div class="layui-form-item">
                    <label class="layui-form-label">采集设备类型</label>
                    <div class="layui-input-block">
                        <select name="neweqptType" lay-filter="eqptType">
                            <option value="0a0003biac">0a0003biac</option>
                            <option value="0a0003ahup" selected="">0a0003ahup</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">eqptIdCode</label>
                    <div class="layui-input-block">
                        <input type="text" name="neweqptIdCode"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备地址" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">eqptName</label>
                    <div class="layui-input-block">
                        <input type="text" name="neweqptName"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备名称" class="layui-input">
                    </div>
                </div>
    
                <div class="layui-form-item" style="margin-top:40px">
                    <div class="layui-input-block">
                        <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    </body>
    </html>
    

    添加功能的界面和代码
    在这里插入图片描述

    添加界面代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>表单</title>
        <link rel="stylesheet" href="../frame/layui/css/layui.css">
        <link rel="stylesheet" href="../frame/static/css/style.css">
        <link rel="icon" href="../frame/static/image/code.png">
        <style>
            .layui-form-label{
                width: 100px;
            }
            .layui-input-block {
                margin-left: 130px;
                min-height: 36px
            }
        </style>
    </head>
    <body class="body">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加采集设备</legend>
    </fieldset>
    
    <form class="layui-form layui-from-pane" action="/addCollector" style="margin-top:20px" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">采集设备类型</label>
            <div class="layui-input-block">
                <select name="eqptType" lay-filter="eqptType">
                    <option value="0a0003biac">0a0003biac</option>
                    <option value="0a0003ahup" selected="">0a0003ahup</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">eqptIdCode</label>
            <div class="layui-input-block">
                <input type="text" name="eqptIdCode"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">eqptName</label>
            <div class="layui-input-block">
                <input type="text" name="eqptName"  required  lay-verify="required" autocomplete="off" placeholder="请输入采集设备名称" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item" style="margin-top:40px">
            <div class="layui-input-block">
                <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script src="../frame/layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form','layer','jquery'], function(){
            var form = layui.form
                    ,layer = layui.layer
                     ,$=layui.jquery,
                      table= layui.table
            //监听提交
            form.on('submit(demo1)', function(data){
                //layer.alert(JSON.stringify(data.field))
                  //data=JSON.stringify(data.field)
                $.ajax({
                    url:'/addCollector',
                    type:'POST',
                    dataType:'json',
                   data:{eqptType:data.field.eqptType,eqptIdCode:data.field.eqptIdCode,eqptName:data.field.eqptName},
                    success:function (msg) {
                        var returnCode=msg.returnCode;
                        if(returnCode==200){
                            layer.msg("添加成功", {icon: 6});
                            setTimeout(function(){
                               window.parent.location.reload();//添加成功后刷新父界面
                            }, 1000);
                        }else{
                            layer.msg("已经存在该设备,不支持重复添加", {icon: 5});
                        }
                    }
                })
                return false;
            });
        });
    </script>
    </body>
    </html>
    

    后端的分页数据返回代码

      //获取采集设备总记录数
         String getCollectorInfoTotalRow="";
        @RequestMapping("/getCollectorInfoTotalRow")
        public  String getCollectorInfoTotalRow() throws Exception {
            String url = "/getCollectorInfoTotalRow";
            String equirments = equipmentService.getEquirement(url);
            JSONObject json = JSONObject.parseObject(equirments);
            getCollectorInfoTotalRow=json.get("count").toString();
            System.out.print(equirments);
            return equirments;
        }
        //获取采集设备信息
        @RequestMapping("getCollectorInfo")
        public  String getCollectorInfo(int page,int limit) throws Exception {
            String url = "/getCollectorInfo?page="+page+"&pageSize="+limit;
            String equirments = equipmentService.getEquirement(url);
            JSONObject json = JSONObject.parseObject(equirments);//将数据转化为json对象
            json.put("count",getCollectorInfoTotalRow);//把对象的count,进行赋值
            System.out.println(json.toString());
            return json.toString();
        }
    返回的数据为:
    //返回数据的总的记录数
    {"msg":"200","code":0,"count":4}
    //返回后台的数据不带count字段
    {"returnCode":"200","data":[{"eqptIdCode":"075500005","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:26:54","eqptName":"075500005","eqptType":"0a0003biac"},{"eqptIdCode":"075500006","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:27:02","eqptName":"075500006","eqptType":"0a0003biac"},{"eqptIdCode":"000075500907","eqptTypeName":"北电以太网采集器","creator":"dyd","createTime":"2018-09-07 14:17:33","eqptName":"无锡展会zigbee网关","eqptType":"0a0003ahup"},{"eqptIdCode":"075500009","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-10 13:51:21","eqptName":"水电集中器","eqptType":"0a0003biac"}]}
    
    //经过处理后的字段,返回前端需要自动渲染的格式:
    {"msg":"200","code":0,"data":[{"eqptIdCode":"075500005","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:26:54","eqptName":"075500005","eqptType":"0a0003biac"},{"eqptIdCode":"075500006","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-04 19:27:02","eqptName":"075500006","eqptType":"0a0003biac"},{"eqptIdCode":"000075500907","eqptTypeName":"北电以太网采集器","creator":"dyd","createTime":"2018-09-07 14:17:33","eqptName":"无锡展会zigbee网关","eqptType":"0a0003ahup"},{"eqptIdCode":"075500009","eqptTypeName":"北电国网I型集中器","creator":"dyd","createTime":"2018-09-10 13:51:21","eqptName":"水电集中器","eqptType":"0a0003biac"}],"count":"4"}
    
    
    展开全文
  • Layui表格分页心得

    2021-09-15 10:05:26
    很多小伙伴们在使用layui的时候,发现它的表格渲染实现很简单,只需要给个接口,在后台拿数据并且使用规定的格式返回数据就行了,具体返回的json格式如下(用的是Java代码) private int code;//状态码 private ...

    很多小伙伴们在使用layui的时候,发现它的表格渲染实现很简单,只需要给个接口,在后台拿数据并且使用规定的格式返回数据就行了,具体返回的json格式如下(用的是Java代码)

        private int code;//状态码
        private String msg;//信息
        private Object data;//返回的数据
        private String count;//数据条数

    但是我们渲染表格数据完成之后,往往需要分页,这个时候很多小伙伴们在查看官方文档的时候,会有点看不明白,甚至大多数都是这个问题:

    我草?我明明给了每页显示条数跟下拉列表参数啊,为什么他还是只显示全部的数据呢?具体代码可能是这样的:

     table.render({
                elem: '#currentTableId',
                url: "${pageContext.request.contextPath}/admin?method=selectAllUser",
                toolbar: '#toolbarDemo',
                limits: [10, 20, 40, 55, 70, 85],
                limit: 10,
                page: {
                    theme: '#1E9FFF',
                    curr: 1,
                },
                skin: 'line',
                method: 'post',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {type: "checkbox", width: 50},
                    {field: 'userId', width: 320, title: 'ID', sort: true},
                    {field: 'userName', width: 160, title: '用户昵称'},
                    {field: 'realName', width: 160, title: '用户真实姓名'},
                    {field: 'sex', width: 80, title: '性别'},
                    {field: 'address', width: 80, title: '地址', width: 100},
                    {field: 'phone', title: '电话号', width: 150},
                    {field: 'role', width: 100, title: '角色', sort: true},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                ]],

    这个时候大家就在网上找来找去了,我也同样遇到了这个坑,不过自己也是总结出来使用的方法了

    首先,一定要确定layui的json返回格式是官网上规定的,跟我这样写就行了

    第二,要将参数page设置为true,代表开启分页,但是这个参数很明显 是一个bool类型的参数,官网上写的很清楚,它是可以设置为object类型的,那么我们就可以自定义其中的属性,从而达到自定义样式以及相关操作了

    pageBoolean/Object开启分页(默认:false)。支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外)

     第三,就是上面提到的大多数的问题

    我们在后台写数据接口的时候,其实就是一个select * from table_name 拿到的是所有数据,我们只需要在前端进行分页显示就行了,我的解决办法就是直接在后台拿到所有的数据,然后再前端进行数据截取就行了

    首先确保自己的放回json是标准layui所支持的类型,这个很关键

            然后再进行表格渲染的时候,将page参数设置为object类型,具体参考如上图

    其中将curr(当前页码)设置为1,因为如果不设置的话默认就是undetifiled,会写很多重复代码

    然后最关键的点来了:

            官网上给出了一个表格参数叫

    parseData:function(data){
    }

            它可以拿到我们的返回json数据,所以说到这里就差不多明白了

    我们可以定义一个变量进行数据data的返回,比如我们定义一个result,用来返回数据

                parseData: function (res) {
                    //这个page参数,开启分页后,它的值是true的,它是一个bool类型
                    //当点击了分页工具的操作的时候,它就是一个对象了
                    /*包含以下信息,里面的curr就代表当前页码数,我们可以根据这个来自定义返回的数据是什么
                    //可以在page上面定义这些json值,这样好操作
                    *
                    * {elem: 'layui-table-page1', count: 13, limit: 10, limits: Array(6), groups: 3, …}
                            count: 13
                            curr: 2
                            elem: "layui-table-page1"
                            groups: 3
                            index: 1
                            jump: ƒ (e,t)
                            layout: (6) ['prev', 'page', 'next', 'skip', 'count', 'limit']
                            limit: 10
                            limits: (6) [10, 20, 40, 55, 70, 85]
                            pages: 2
                    *
                    * */
                    console.log(this.page.curr);
                    console.log(this.limit);
                    var result;
                    // if (this.page.curr) {
                    //(10(2-1),10*2)也就是10,20
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    // } else {
                    //一开始就是0-10,点击第二页的时候,curr就是2,limit还是自己定义的10,想达到分页就只需要对查询出来的数据进行划分
                    //对于result进行赋值,每次的值根据需要进行截取
                    // result = res.data.slice(0, this.limit);
                    // }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };

    然后再其中用上刚刚所提到的截取操作,根据curr(当前页码),和limit(每页显示的数据量)进行result赋值。

            比如我这里limit是10 curr起始是1 那么result就是json数据返回中data的值截取0-10之间的值,这样我们就拿到了0-10的数据,从而达到第一页面显示10条数据,当我们点击第二页的时候,curr就是2,第二页的数据就是10-20,以此类推,即可满足自己的需要啦

    展开全文
  • 什么是LayUi? 我本身是一个后端工程师,但是我却接触到了这个框架,所以给大家分享一个我的心得,当然,这只是一个基础的LayUi的使用,大神请勿围观, 不卖关子了,切入正题~ LayUi是一款非常强大的前端框架,...
  • 使用layui分页时有时候可能会遇到查询出来的数据与显示的数据不一致的问题 以显示公告为例: 由上图可以发现查询出来的数据一共十二条但显示出来的只有三条, 在查询数据正确的情况如果出现这种情况是因为在提取...
  • Layui 数据表格的重载

    万次阅读 2019-03-30 17:34:19
    下面我们使用layui里的数据表格模块初始化并渲染表格,后台代码与bsgrid数据表格书写方式一样,而前台代码需要注意设置参数:request(用于对分页请求的参数:page、limit重新设定名称), response(用于对返回的数据...
  • Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页、上一页、跳转按钮进行切换另外一个...
  • Layui已经给出了多选记录的解决方案,是在每条数据的前面加上CheckBox,每次选择都有监听。效果是这样: 实现监听的代码如下,这是一种解决选择多条数据的方案: table.on('edit(test)', function(obj){ //注...
  • layUI分页列表,自定义插件
  • layui表格内下拉框联动的实现

    千次阅读 2020-05-12 15:39:53
    可把下列代码在https://www.layui.com/demo地址内演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no...
  • Layui数据表格的引用

    千次阅读 2019-06-09 21:11:52
    对于一些编程插件的引用,相信大多数的编程人员都不会感觉到陌生,因为在对程序开发和项目开发的过程中往往都会需要引用到插件,那么... 对于引用插件,我们就引用layui插件里面的表格来进行说明: 第一步:最主要...
  • 先要获取到选择的Layui表格中的ID值 然后将该值传递给后端 Controller获取到值之后,执行相应Service方法。。。 部分HTML代码如下: 表格部分: <table id="order" class="layui-hide" lay-filter="order"> &...
  • layui 数据表格表头动态修改

    万次阅读 2019-06-20 10:21:48
    1.在html页面分别设置成不同的数据表格,根据点击事件来show或者hide,这样可以达到我们的目的,但是,这样违法了代码精简的原则,出现了很多重复的代码. 2.直接通过js来实现不同的表格,通过点击事件来做if-else操作,...
  • layui.table(表格)跨页多选

    千次阅读 2019-07-19 16:09:39
    使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下。 效果演示 实现思路 实现思路大致分为以下三步 1.定义两个全局变量用于保存选中行的id,以及当前页所有行的id(全选时使用) 2.监听表格复选...
  • 关于layui表格分页

    2020-12-20 13:30:25
    layui里面的表格也有这样子的功能 它在向后台发送请求的时候,会传递两个参数到后台,一个是当前页面,一个是每页多少条数据 这样子后台会根据这两个参数,去像后台拿到应有的数据,这样子,在数据量过大的时候,...
  • layui数据表格初始化的问题

    千次阅读 2019-01-08 18:32:53
    layui table组件 支持【自定义传入数据】 支持【直接从接口请求数据】 注意,在第二个模式下,对入参和出参,有严格限制,甚至对返回数据格式也有要求 建议使用第一种方案 layui.use('table', function(){ var ...
  • 简单的多表查询和数据显示 开发工具与关键技术:Visual Studio layui框架和Linq查询语句 作者:李明润 撰写时间:2019年4月 16日 常听人家说,对于许多的程序员来说,增删查改是他们的日常工作。许多的都是重复性...
  • layui后台表格的增删改查

    千次阅读 2019-07-23 11:51:23
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据 <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目 <button class="layui-btn layui-btn-sm" ...
  • ssm项目、layui表格、结合分页插件的模糊查询 同样在搭建好框架之后,新建的jsp页面,声明全局变量初始化layui之后,完成表格渲染: function searchPClass() { var ProductClass=$("#ProductClass").val(); var ...
  • layui table 合并相同的列

    千次阅读 2020-09-10 15:19:16
    效果 table.render({ elem: '#samples' ,url: '/index/Develorderss/samplelists?... layout: ['prev', 'page', 'next', 'count','skip','limit'] //自定义分页布局 //,curr: 5 //设定初始在第 5
  • 为什么80%的码农都做不了架构师?... ,id: 'LAY_article' //设定一个id,防止重复弹出 ,btn: ['确定'] ,btnAlign: 'c' ,content:data.content ,moveType: 1 }); } else if(obj.event === 'update'){ //当...
  • 项目中遇到给用户在所有产品中匹配一部分产品。用layui 第一页选好之后到第二页再选,等回到第一页时之前选择的都没了,解决这个问题的办法... //表格数据缓存 var table_data = new Array(); var adid = "";...
  • // 接口 三要数 code 必须为 0 否则 表格 不渲染数据 return json(['code'=>0,'msg'=>'success','data'=>$data,'count'=>$count]); } return view(); } PHP 后台 逻辑 /** * 用户信息保存更新 */ public function ...
  • jsp嵌入视频和layui分页操作

    千次阅读 2019-07-15 23:15:58
    jsp页面直接嵌入就行,src地址你也可以换成你自己服务器上的地址 通过访问 <embed src=... layui分页操作 引入css js文件 ...
  • 使用layui框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可如下图,提供新增,编辑,查看等功能js方法/** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @...
  • 改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 212
精华内容 84
关键字:

layui表格分页数据重复