通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终加载不上. 

前端js拼接列表代码: 

 

在这种情况下,你会发现初始化的checkbox属性只能用一下.当你点击下一页或者是搜索查询的时候你的这个列表的checkbox样式是不生效的.这个时候你就需要在js那边引用一个重新初始化的方法了:form.render();但当你用这个的时候,你会发现列表初始化回显checkbox不生效.这个时候你就怀疑是不是样式有没有加载全或者什么的.其实回到我们刚刚的那个再初始化的方法,这个初始化方法是要在你所有的数据加载完成后再初始化才起作用.比如说你初始化完之后,你在设置回显的值这个时候回显是不起作用的所以这里要特别注意.

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部分插件时，我发现文档中并未描述，同时初始化多个同类型插件，故有此文。
正文
要实现初始化多个同类型插件有两种写法：一种是each，一种是map，下方代码是以layui调色板模块为示例。废话不多说，直接上代码。
代码
写法一：
$('.color-btn').each(function(){
   var _this = $(this);
   colorpicker.render({
          elem: this
          ,predefine: true
          ,done: function(color){
              _this.next().val(color);
      	  }
    });
});

写法二：
$('.color-btn').map(function(){
   var _this = $(this);
   colorpicker.render({
          elem: this
          ,predefine: true
          ,done: function(color){
              _this.next().val(color);
      	  }
    });
});

后记
你以为这就结束了？既然用的是layui，当然是遵循layui的开发规范啦。查看layui文档>底层方法>其他方法。



这就是第三种写法。
彩蛋
看到这里，其实这个功能早就实现了。然而本着探索精神，我还是仔细查看layui文档，终于在字里行间找到了第四种写法，直接上代码。
lay('.color-btn').each(function(){
   var _this = $(this);
   colorpicker.render({
          elem: this
          ,predefine: true
          ,done: function(color){
              _this.next().val(color);
      	  }
    });
});

这段代码藏在代码示例>日期和时间选择



借此我实例了调色板模块，这些写法都基于jq的循环遍历方法，再深挖一点，就是js的遍历，再次强调了基础知识的重要。
温馨提示
1.实例化插件时要先引入哦。

2.使用$(this)即时缓存，在回调中直接调用时，会调用方法体哦。

Layui table初始化时不显示数据



 

不采用url

 

在进行关键字查询的时候，在进行reload添加url (后台方法)