精华内容
下载资源
问答
  • 通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式...其实回到我们刚刚的那个再初始化的方法,这个初始化方法是要在
  • layui初始化列表的CheckBox属性

    千次阅读 2018-05-21 21:51:54
    通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终加载不上. 前端js拼接列表代码: 在这种情况下,...

    通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终加载不上.
    前端js拼接列表代码:
    这里写图片描述
    在这种情况下,你会发现初始化的checkbox属性只能用一下.当你点击下一页或者是搜索查询的时候你的这个列表的checkbox样式是不生效的.这个时候你就需要在js那边引用一个重新初始化的方法了:form.render();但当你用这个的时候,你会发现列表初始化回显checkbox不生效.这个时候你就怀疑是不是样式有没有加载全或者什么的.其实回到我们刚刚的那个再初始化的方法,这个初始化方法是要在你所有的数据加载完成后再初始化才起作用.比如说你初始化完之后,你在设置回显的值这个时候回显是不起作用的所以这里要特别注意.

    展开全文
  • 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;
    			  };
    

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

    展开全文
  • 要实现初始化多个同类型插件有两种方法:一种是each,一种是map,下方代码是以layui调色板模块为示例。废话不多说,直接上代码。 代码 写法一: $('.color-btn').each(function(){ var _this = $(this); ...

    前言

    在封装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 field初始化加载时进行隐藏的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui table初始化时不显示数据 不采用url 在进行关键字查询的时候,在进行reload添加url (后台方法)

    Layui table初始化时不显示数据

     

    不采用url

     

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

     

    展开全文
  • 今天小编就为大家分享一篇layui之table checkbox初始化时选中对应选项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一、 我们在使用layui.table前必须初始化layui模块,用到的模块一般常用的有两种 layer(弹出层)和 table(数据表格),然后用function进行模快的初始化,当然在初始化模块之前我们必须声明几个全局变量, ...
  • 开发工具与关键技术: VisualStudio 2015 mvc ...这个插件我们可以模块化使用,我们只用到table这一块,所以我们先需要加载他模块化的方法,加载完成就到表格初始化,表格初始化这一块,首先是上面说到的table里的ID
  • Layui数据表格以及数据初始化

    千次阅读 2019-06-18 08:09:14
    一. 首先我今天要介绍的就是平时我用的layui框架,...在使用该插件写数据表格时,我们需要加载他的模块化方法加载完成就开始表格初始化。首先我们要获取到表格的ID(tabDspeake),声明一个变量把它赋值给layuiTable...
  • 由于我们的layer内置了轻量级加载...当你在页面一打开就要执行弹层时,你最好是将弹层放入ready方法中,如: //页面一打开就执行弹层 layer.ready(function(){ layer.msg('很高兴一开场就见到你'); }); ...
  • layUI使用方法

    2020-07-24 16:37:50
    调用方式:通过layui.use(‘layer’,callback)加载和初始化layer模块。 2.作为独立组件使用,如果你只是想使用的是layer,你可以去layer独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并...
  • LayUI底层方法

    千次阅读 2018-11-19 17:57:20
    Layui模块化页面用法 需要即加载模块 //引入js,css文件跳过,看文档 ...//在页面中,如同编写JavaScript一样 ... layui.use(['layer','form'],function(){//需要加载的模块 ...//初始化模块变量 ...
  • 一个在线demo胜过千言万语: 详见:http://www.shagua.wiki/project/3?p=96
  • 功能:layui按钮点击选择年级学科等信息、模板列表渲染数据、展开与收起、复杂公式转换、全选、初始化数据、批量初始化数据、删除视频、layui表单选择、ajax请求封装方法、加载中动画效果 <?php $version = '66...
  • 一、自动渲染二、方法渲染在方法table.render()内部进行渲染render()内部有一些特殊的方法:​ 1、elem指定原始表格元素的选择器(推荐使用id选择器);​ 2、height:容器高度​ 3、url数据接口相关参数,获取表格数据...
  • 详细参考该篇文章(复制下方地址到浏览器上访问) http://www.shagua.wiki/project/3?p=99 挺好的,总结的很详细,收藏下来以后备用
  • //对于任意一个 table,按照官方的说法,有三种不同的初始化渲染方式,不多介绍,而这里使用的方式姑且看做第三种:转换静态表格 方式//转换静态表格方式,自然首先需要有一个已经存在的表格,然...
  • layuilayui与JQuery冲突的解决方法

    万次阅读 2019-05-21 20:39:45
    出现的问题 当在使用layui模块时,引入了JQuery,而layui与JQuery版本冲突导致出现此错误。...此时layui加载了我进入的jquery.min.js,但由于这个版本和layui不匹配,导致无法初始化table。 解决方法 根据la...
  • 1.layui怎样使用各自对应的api方法,首先是初始化,代码如下:layui.use(['form','laydate','layer'], function(){var form = layui.form;var layer = layui.layer;var laydate = layui.laydate;form.render();});...
  • 1.layui怎样使用各自对应的api方法,首先是初始化,代码如下: layui.use(['form','laydate','layer'], function(){ var form = layui.form; var layer = layu...
  • 官方文档:http://www.layui.com/demo/layedit.html 官网文档目前是不支持layedit扩展式的。 自己手动实现扩展,定义自己的样式...代码需要写在layui.use(..)页面初始化方法之内。 $(".layui-form .layui-form-item.l
  • 解决方法:需要使用layer对象,需先初始化,如下: layui.use('layer', function () { var layer = layui.layer; layer.open({ }); }); /*跳转网页*/ function goOtherWebsite(websiteName, websiteUrl) { ...
  • 本文实例为大家分享了laydate时间日历控件的使用方法,供大家参考,具体内容如下此控件可使用layui或者独立版的layDate,两者初始化有些不同在 layui 模块中使用layui.codelayDate快速使用layui.use('laydate', ...
  • 此控件可使用layui或者独立版的layDate,两者初始化有些不同 在 layui 模块中使用layui.code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layDate快速使用</title...
  • layui合并单元格

    2020-07-27 22:09:34
    layui初始化完成之后done回调中调用该方法,同一列中有相同值会合并,第二个值需在控制台尝试 var execRowspan = function(fieldName,index,flag){ // 1为不冻结的情况,左侧列为冻结的情况 let fixedNode = ...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 135
精华内容 54
关键字:

layui初始化方法