精华内容
下载资源
问答
  • Layui 初始化赋值select后回显
    2021-12-21 15:21:30
    <div class="layui-inline">
        <label class="layui-form-label">物流公司</label>
        <div class="layui-input-inline layui-inline-4">
            <select name="regionId" lay-verify="required" id="regionId" lay-filter="selectShip" lay-reqText="请选择物流公司" lay-search>
                <option value="">搜索选择物流公司</option>
                {{# layui.each(d.params.data.shipCosts, function(index, item){ }}
                <option value="{{item.id}}" {{index==0?'selected="selected"':''}}>{{item.logiName}} ({{item.postfee.toFixed(2)}}) --- {{item.tempName}}</option>
                {{# }); }}
                <option value="other">其他</option>
            </select>
        </div>
    </div>
    
    $("#regionId").val(item.id);
    
    //初始化赋值select后回显
    var select = 'dd[lay-value="' + $('#regionId').val() + '"]';
    $('#regionId').siblings("div.layui-form-select").find('dl').find(select).click();
    
    form.render('select');
    
    更多相关内容
  • 今天小编就为大家分享一篇对layui初始化列表的CheckBox属性详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui表格设计以及数据初始化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui之table checkbox初始化时选中对应选项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui 初始化数据

    千次阅读 2020-08-27 11:18:03
    table.render({ elem: '#order_query_table' , url: '../order/getAutomaticRequestRecordlist' , where: datafield , title: '自动请货记录表' , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 ...
     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;
                           });
    

    初始化显示效果:

    在这里插入图片描述

    展开全文
  • layui初始化列表的CheckBox属性详解,初始化属性通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终...

    对layui初始化列表的CheckBox属性详解,初始化属性

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

    前端js拼接列表代码:

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

    以上这篇对layui初始化列表的CheckBox属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持3672js教程。

    本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。

    展开全文
  • 一、 我们在使用layui.table前必须初始化layui模块,用到的模块一般常用的有两种 layer(弹出层)和 table(数据表格),然后用function进行模快的初始化,当然在初始化模块之前我们必须声明几个全局变量, ...

    一、 我们在使用layui.table前必须初始化layui模块,用到的模块一般常用的有两种 layer(弹出层)和 table(数据表格),然后用function进行模快的初始化,当然在初始化模块之前我们必须声明几个全局变量,
    声明两个变量(layer和layuiTable)来接收模块的数据,并且保存layui模块以便全局使用。
    声明一个变量(tabStudent)来放置表格数据。
    在这里插入图片描述

    二、开始初始化模块
    首先我们在加载事件里面将声明的那两个变量来接收layer(弹出层)和 table(数据表格)
    在这里插入图片描述

    三、接下来就是初始化表格,初始化得到的数据就放入刚刚声明的全局变量(tabStudent)里面

    在这里插入图片描述

    四、在然后就是写初始化表格里面的参数:

    1. 将表格的ID放入elem(指定原始table容器的选择器或DOM,方法渲染方式必填)里面
    2. 查询方法的路径(url: 异步数据接口相关参数,url参数为必填项)
    3. 设置表头(cols) 将表格的结构放入
      例:在这里插入图片描述

    需要写一个方法来设置最后一列来返回设置在最后一列所设置的操作按钮,比如当我们要在操作那行设置一个修改和删除的按钮的时候:
    在这里插入图片描述
    Onclick是点击事件
    4. 设置表格每页的行数:page(开启分页):{
    limit:n (指定每页显示的条数)
    limits: [ 5,10,20,n] (每页条数的选择项)}
    5. 当你需要表格的一些“列显示隐藏” “打印” 或者 “导出” 功能的时候你就必须设置开启表格的工具栏
    参数toolbar的作用便是开启表格头部工具栏区域,该参数支持4种类型值:
     toolbar: ’#toolbarDemo(注:该代码取的是自定义好的模板的ID 该模板可以放在页面的任意位置)’ 指定自定义工具栏模板选择器
     toolbar: ’xxx’ 直接传入工具栏模板字符
     toolbar: true 仅开启工具栏,不显示左侧模板
     toolbar: ‘default ’ 让工具栏左侧显示默认的内置模板
    该参数的默认值为false.
    6. 设置表格的图标:
    defaultToolbar:可以自由配置头部工具右侧的图标,数组可以3种:
    defaultToolbar :[‘filter’]:显示筛选图标
    defaultToolbar [‘exports’]:显示导出图标
    defaultToolbar [‘print’]:显示打印图标
    这些值也可以根据排序的顺序来显示排版图标,如defaultToolbar:[‘filter’,’exports’,’print’
    7. Table容器的默认宽度是跟随它的父元素铺满的,你也可以设定一个固定的值(width),当容器中的内容超出了该宽度时,会自动出现横向滚动条。甚至还可以设置表格的高(height)。
    8. 如果你点击一个切换分页时不知道它是否为加载状态,则你可以添加loading这个参数,它的作用就是是否显示加载条,默认值是为true,如果设置false则在切换分页时不会出现加载条(注:该参数只是适于url参数开启的方式)。
    五、然后就是在控制器为表格添加数据,数据添加完成后将其方法名称放入url里面。

    展开全文
  • 今天小编就为大家分享一篇Layui table field初始化加载时进行隐藏的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1、使用 Layui 官方提供的 【转换静态表格】 方式初始化加载时报 id 找不到的错误(自己的锅) 2、传递参数问题(姑且算是 Layui 官方的锅) 笔者使用的 table 加载刷新方案 有一个页面,左侧是一个 tree,右侧是一...
  • layui初始化表格时带条件查询

    千次阅读 2020-11-21 11:24:10
    {field:'patientName',title:'患者姓名',width:'10%',templet:"#patientName"} ]], page: false, height: "full-158", cellMinWidth: 100, cols: Policyfile.initColumn(), //layui初始化表格时带条件查询,...
  • Layui表格初始化

    千次阅读 2019-05-17 09:18:43
    然后加载和初始化layui的table模块,elem指定原始表格元素选择器(推荐id选择器),url是连接控制器的数据接口。 cols是表头的内容,field设定字段名,是表格数据列的唯一标识,字段名要和数据库表格里的字...
  • layui初始化列表的CheckBox属性

    千次阅读 2018-05-21 21:51:54
    通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候始终加载不上. 前端js拼接列表代码: 在这种情况下,...
  • layer内置了轻量级加载器,不需要单独引入css等文件...当在页面一打开就要执行弹层时,最好是将弹层放入ready方法中,如: //页面一打开就执行弹层 layer.ready(function(){ layer.msg('很高兴一开场就见到你');...
  • 初始化下拉框——layui

    千次阅读 2019-05-07 21:28:29
    页面代码: <div id="levelView"></div> 下拉框html模板 <script id="level" type="text/html">...div class="layui-input-block"> <select name="level" id="_level" la...
  • Layui select 动态初始化

    2021-02-20 17:04:28
    layui.use(['form'], function () { let form = layui.form; $.ajax({ url: '/system/role/getRoles', dataType: 'json', data:{}, //查询状态为正常的所有机构类型 type: 'post', success: function
  • 先说一下背景:有一个如下页面,我需要能通过页面的开关来设置是否允许某个...先上代码:layui.use(['jquery','table','form','layer','laytpl'], function(){var layer =layui.layer;var table =layui.table;var...
  • 如无需自定义,去除该参数即可 title: '学生成绩信息', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], title: '学生成绩信息', initSort: { field: 'sid' //排序字段,对应 cols 设定的各字段名 ,type: '...
  • layui select 编辑 初始化赋值

    千次阅读 2021-01-26 17:52:12
    form class="layui-form" action=""> <div class="layui-input-block input_block"> <select name="city" lay-verify="required" lay-filter="monitor" id="editSelect"> <!--...
  • 有一个这样的业务需求,就是当layui table中某页的数据被用户选中完以后,用户切换到下一页浏览,然后再返回到该页面的时候,之前选中的数据应该保持选中的状态。 全局变量ck_Ids: var ck_Ids=[];//存储的表格数据...
  • div class="layui-input-inline"> <input type="radio" name="toUrlType" value="1" title="页面跳转"> <input type="radio" name="toUrlType" value="2" title="外链" checked=...
  • 渲染方式如下: layui.form.render("checkbox"); layui.form.render("select");
  • layui数据表格初始化的问题

    千次阅读 2019-01-08 18:32:53
    layui table组件 支持【自定义传入数据】 支持【直接从接口请求数据】 注意,在第二个模式下,对入参和出参,有严格限制,甚至对返回数据格式也有要求 建议使用第一种方案 layui.use('table', function(){ var ...
  • Layui数据表格以及数据初始化

    千次阅读 2019-06-18 08:09:14
    一. 首先我今天要介绍的就是平时我用的layui框架,...在使用该插件写数据表格时,我们需要加载他的模块化方法加载完成就开始表格初始化。首先我们要获取到表格的ID(tabDspeake),声明一个变量把它赋值给layuiTable...
  • //------------------html------------------ <form class="layui-form" id="craftFormAdd"> <div class="craftMsg"> <table id="craftTable" class="layui-table b...

空空如也

空空如也

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

layui初始化方法