精华内容
下载资源
问答
  • layUI初始化表格时,按钮功能加载多次问题 根据需求的不同,页面需要加载多个带有查询条件的表格,根据点击事件切换表格进行刷新,需要把layui加载表格写在方法里,就比如以下代码: function getData(clickFlag){...

    layUI初始化表格时,按钮功能加载多次问题

    根据需求的不同,页面需要加载多个带有查询条件的表格,根据点击事件切换表格进行刷新,需要把layui加载表格写在方法里,就比如以下代码:

    function getData(clickFlag){
        $('#clickFlag').val(clickFlag)
    	  //主题精选
    	  if(clickFlag == 1){
    		  layui.use('table', function(){
    			  var table = layui.table;
    			  table.render({
    				    elem: '#LAY_table_user'
    				    ,url:'/recommend/recommendList'
    				    ,where: { typeFlag: 1 }
    				    ,cols: [[
    					  {type:'numbers',align:'center', width:'6%',title: '序号'}
                          ,{field:'title',align:'center', width:'13%', title: '主题名称'}
    				      ,{field:'goodsNum',align:'center', width:'10%', title: '主题单品'}
    				      ,{field:'statusFlag',align:'center', width:'12%', title: '当前状态'}
    				      ,{field:'topFlag',align:'center', width:'5%',title: '置顶'}
    				      ,{field:'createTime',align:'center',width:'13%',title:'创建时间'}
    				      ,{field:'upTime',align:'center', width:'13%', title: '上线时间'}
    				      ,{field:'topEndTime',align:'center', width:'13%', title: '下线时间'}
                          ,{fixed:'right',align:'center', width:'10%', toolbar: '#barDemo',title: '操作'}
    				    ]]
    				    ,page: true
    				    ,id: 'reload'
    				  });
    			   var $ = layui.$, active = {
    			        reload: function(){
                            var topStartTime = $('#startTime1');
                            var topEndTime = $('#endTime1');
                            var statusFlag = $("#state");
                            var topFlag = $("#type1");
    
                            table.reload('reload', {
                                where: {
                                    typeFlag :1,
                                    topStartTime : topStartTime.val(),
                                    topEndTime : topEndTime.val(),
                                    statusFlag : statusFlag.val(),
                                    topFlag : topFlag.val()
                                },page: {
        		                    curr: 1
      		                  }
    			            });
    			        }
    			  };
                  $('.btn-danger').on('click', function(){
                      var type = $(this).data('type');
                      active[type] ? active[type].call(this) : '';
                  });
    

    但点击事件来回切换时,都会对表格的“查询”按钮绑定一次事件,就是下面这一句
    $(’.btn-danger’).on(‘click’, function(){
    var type = $(this).data(‘type’);
    active[type] ? active[type].call(this) : ‘’;
    });
    就是说加载了三次表格也对“查询”按钮绑定了三次事件,一次点击就会造成三次执行
    在layui社区也没找到关于解决这一块的方法
    我想的是只对“按钮”绑定一次事件,定义一个全局变量orderTableFlag,默认为true,第一次加载完成后置为false,在此切换时,就不进行绑定了
    如下代码:

    			  if(orderTableFlag){
    				  var $ = layui.$, active = {
    				        reload8: function(){
    				            var orderNum = $('#orderNum');
    				            var startTime = $('#startTime8');
    				            var endTime = $('#endTime8');
    				            var userIds = $("#userId").val();
    				            sumMoney(2,1,userIds,startTime.val(),endTime.val());
    				            table.reload('reload8', {
    				                where: {
    				                	orderNo: orderNum.val(),
    				                	payTime : startTime.val(),
    				                	settleTime : endTime.val(),
    				                	userId: userIds
    				                },page: {
    				                    curr: 1
    				                  }
    				            });
    				        }
    					  };
    					  $('.selectTable8 .btn-danger').on('click', function(){
    				        var type = $(this).data('type');
    				        active[type] ? active[type].call(this) : '';
    					 });
    				orderTableFlag = false;
    			  };
    

    目前就想到这么个方法,大家还有好的方法么,支个招呀!

    展开全文
  • 有一个这样的业务需求,就是当layui table中某页的数据被用户选中完以后,用户切换到下一页浏览,然后再返回到该页面的时候,之前选中的数据应该保持选中的状态。 全局变量ck_Ids: var ck_Ids=[];//存储的表格数据...

    业务分析:
            有一个这样的业务需求,就是当layui table中某页的数据被用户选中完以后,用户切换到下一页浏览,然后再返回到该页面的时候,之前选中的数据应该保持选中的状态。

    全局变量ck_Ids:

    var ck_Ids=[];//存储的表格数据编号
    

    done回调函数代码示例:

     done: function (res, curr, count) {
      //如果是异步请求数据方式,res即为你接口返回的信息。
      $.each(res.data, function (index, row) {
           var result = ck_Ids.some(function (item) {//判断编号是否存在
               if (item == row['Id']) {
                   return true;
               } else {
                return false;
               }
            });
           if (result) {
            //这里才是真正实现的有效勾选
            row["LAY_CHECKED"] = 'true';
           //找到对应数据改变勾选样式,呈现出选中效果
            var _index = row['LAY_TABLE_INDEX'];
            $('tr[data-index=' + _index + '] input[type="checkbox"]').prop('checked', true);
            $('tr[data-index=' + _index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
            }
      });
    
      //设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
      var checkStatus = table.checkStatus('test');
      if (checkStatus.isAll) {
        //设置表头的checkbox勾选样式
        $('.layui-table-header th[data-field="Id"] input[type="checkbox"]').prop('checked', true);
        $('.layui-table-header th[data-field="Id"] input[type="checkbox"]').next().addClass('layui-form-checked');
       }
    }
    

    至此,业务需求完美解决!欢迎评论点赞。
        

        

    不为模糊不清的未来担忧,只为清清楚楚的现在努力。

    展开全文
  • 今天小编就为大家分享一篇对layui初始化列表的CheckBox属性详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题:在查看数据的时候,页码到了100页,但当使用搜索功能时,传给后台的page不是为1,而是100,那么怎么初始化table的分页呢? 1、原始的写法: table.reload('tb-zhoubao', { url: layui.setter.request_...

    问题:在查看数据的时候,页码到了100页,但当使用搜索功能时,传给后台的page不是为1,而是100,那么怎么初始化table的分页呢?
    1、原始的写法:

    table.reload('tb-zhoubao', {
                    url: layui.setter.request_urlOnline + "/zhoubao/search_"
                    , method: "POST"
                    , contentType: 'application/json'
                    , where: {
                        key: search_key,
                        value: search_value
                    } //设定异步数据接口的额外参数
                });
    

    2、修改后的写法:只需要加上page初始化page参数即可

    table.reload('tb-zhoubao', {
                    url: layui.setter.request_urlOnline + "/zhoubao/search"
                    , method: "POST"
                    , contentType: 'application/json'
                    , where: {
                        key: search_key,
                        value: search_value
                    } //设定异步数据接口的额外参数
                    ,page: {
                        curr: 1
                    }
                });
    

    简单吗?简单吧

    展开全文
  • layui 初始化数据

    千次阅读 2020-08-27 11:18:03
    loaddata();//首次加载 function loaddata(datafield) { //alert(JSON.stringify(data));... table.render({ elem: '#order_query_table' , url: '../order/getAutomaticRequestRecordlist' .
     loaddata();//首次加载
                function loaddata(datafield) {
                    //alert(JSON.stringify(data));
                    table.render({
                        elem: '#order_query_table'
                        , url: '../order/getAutomaticRequestRecordlist'
                        , where: datafield
                        , title: '自动请货记录表'
                        , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                        , limits: [10, 20, 30, 40, 50, 200, 400, 600]
                        , limit: 10
                        , page: true
                        , done: function (data) {
    
                            console.log(data);
                        }
                        , cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        {
                            field: 'Operator', title: '操作人', style: "text-align:center", align: "center",
                        },
                        //{
                        //    field: 'StoreId', title: '门店id', style: "text-align:center", align: "center",
                        //},
                        {
                            field: 'R_time', title: '请货日期', style: "text-align:center", align: "center",
    
                        },
                        {
                            field: 'R_requestId', title: '请货号', style: "text-align:center", event: "getaddress", align: "center",
    
                        },
                        {
                            field: 'R_type', title: '请货类型', style: "text-align:center", align: "center",
                            templet: function (mydata) {
                                if (mydata.R_type == 1) {
                                    return "手动";
                                } else {
                                    return "自动";
                                }
                            }
                        },
                        {
                            field: 'R_state', title: '请货状态', style: "text-align:center;color:red;", event: "getprodetail", align: "center",
                            templet: function (mydata) {
                                if (mydata.R_state == 1) {
                                    return "是";
                                } else {
                                    return "否";
                                }
                            }
    
                        },
                        //{
                        //    field: 'GOODSID', title: '商品Id', style: "text-align:center", align: "center",
    
                        //},
                        //{
                        //    field: 'GOODSNAME', title: '商品名称', style: "text-align:center", align: "center",
    
                        //},
                        //{
                        //    field: 'GOODSTYPE', title: '规格',style: "text-align:center", align: "center",
                        //},
                        //{
                        //    field: 'FACTORYNAME', title: '厂商', style: "text-align:center", align: "center",
                        //},
                        //{
                        //    field: 'BARCODE', title: 'UPC',  style: "text-align:center", align: "center",
                        //},
                        //{
                        //    field: 'GOODSQTY', title: '库存', style: "text-align:center", align: "center",
                        //},
                        //{
                        //    field: 'R_Detail_time', title: '确定请货时间', style: "text-align:center", align: "center",
                        //},
                        {
                            fixed: 'right', title: '操作', toolbar: '#barDemo'
                        }]],
                        toolbar: "#toolbarDemo",
                        done: function (res, curr, count) {
                            $('th').css({ 'background-color': '#bdccea', 'color': 'black', 'font-weight': '500' });
                            $('th').css({ 'background-color': '#bdccea', 'color': 'black', 'font-weight': '500' });
                            $('layui-table-total.layui-table tbody tr').css({ 'color': 'red' });
                            $('.layui-table-total.layui-table tbody tr').css({ 'background-color': '#ffffb4' });
    
                            var that = this.elem.next(); res.data.forEach(function (item, index) {
                                //console.log(item.empName);item表示每列显示的数据
                                if (index % 2 == 0) {
                                    var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css('background-color', '#ecedff').addClass('addclass');
                                } else {
                                    var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css('background-color', '#E0EEF6').addClass('addclass');
                                }
                            }) 
                            },
                        text: {
                            none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
                        },
                        id: 'order_list'
                    });
                }
    

    datafield 放在提交时调用:

      form.on('submit(s_submit)',
                           function (data) {
                               if (data.field.s_timeend!="") {
    
                                   if (data.field.s_timestart > data.field.s_timeend) {
    
                                       layer.alert("开始日期不能大于结束日期", { icon: 2, title: "错误提示", offset: "auto", skin: 'layui-layer-molv' });
                                   return false;
                                   }
    
                               }
                        //填充到where所需要的的值
                           var  datafiled=   {
                                R_requestId: data.field.R_requestId,
                                GOODSID: data.field.GOODSID,
                                GOODSNAME: data.field.GOODSNAME,
                                R_type: data.field.R_type,
                                R_state: data.field.R_state,
                                s_timestart: data.field.s_timestart,
                                s_timeend: data.field.s_timeend
    
                            }
                               loaddata(datafiled);
                            return false;
                           });
    

    初始化显示效果:

    在这里插入图片描述

    展开全文
  • 1.表格初始化渲染, layui.use("table", function () { var table = layui.table; table.render({ elem: "#search_njq_result", url: ajaxurl.searchNJQInfo + "?qsdw_code=" + code + "&zjrxm=" + ...
  • 1.初始化table,table中的各种事件操作 (1)先展示html页面代码 <table class="layui-table" type="hidden" id="bcastMng" lay-filter="demo"></...
  • table.render({ id: 'orderList', elem: '#' + Policyfile.tableId, url: Feng.ctxPath + '/policyfile/list', cols: [[ {type:'numbers',title:'序号',width:'5%',align:'centenr'}, //这个tem
  • 今天小编就为大家分享一篇layuitable checkbox初始化时选中对应选项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Layui table field初始化加载时进行隐藏的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • //------------------html------------------ <form class="layui-form" id="craftFormAdd"> <div class="craftMsg"> <table id="craftTable" class="layui-table b...
  • Layui table初始化时不显示数据 不采用url 在进行关键字查询的时候,在进行reload添加url (后台方法)
  • Layui表格初始化

    千次阅读 2019-05-17 09:18:43
    然后加载和初始化layuitable模块,elem指定原始表格元素选择器(推荐id选择器),url是连接控制器的数据接口。 cols是表头的内容,field设定字段名,是表格数据列的唯一标识,字段名要和数据库表格里的字...
  • 最近在做一个医疗服务系统,想用layui作为前端框架,可是一开始就不会了,哈哈 登录进来啥也没有,要点选项卡了才显示 看着好别扭
  • 这个问题需要后台返回的数据格式跟layui中的示例中返回数据格式一模一样下面是数据格式参考,第一个LAY_CHECKED:true是让checkbox选中的最重要的参数LAY_CHECKED:truecity:"浙江杭州"email:"xianxin@...
  • Layui框架 中table解决日期格式问题
  • 1、使用 Layui 官方提供的 【转换静态表格】 方式初始化加载时报 id 找不到的错误(自己的锅) 2、传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一...
  • 一、layui获取table内复选框选中数据。 var table = layui.table; var checkStatus = table.checkStatus("table-data"), selectedData = checkStatus.data; //获取选中的数据 二、layui数据设置table的控件时,...
  • 解决layui数据表格table固定列行高不一致的情况 //动态监听表头高度变化,冻结行跟着改变高度 $(".layui-table-header tr").resize(function () { $(".layui-table-header tr").each(function (index, val) { $...
  • layui--table有权限时的异步数据加载

    千次阅读 2018-09-17 23:09:40
    1、直接修改layui的源生table.js 找到table.js的ajax,添加权限。代码如下: beforeSend:function (xhr) {xhr.setRequestHeader(&amp;quot;authorization&amp;quot;, localStorage.getItem(&amp;...
  • layui数据表格table在选项卡tabs中分页条不显示的解决 解决:渲染后重新设置高度:$(".layui-table-box").css("height...原因:通过F12可发现,初始化时未显示的表格渲染出来的高度与平时不一致,重新设置一下高度 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,751
精华内容 700
关键字:

layui初始化table