精华内容
下载资源
问答
  • Layui下拉框回显问题
    2021-07-20 16:45:54

    最近项目中用到了Layui 然后遇到好多好多好多好多的问题 下拉框回显这个问题已经遇到了第二次了 这里记录一下 方便以后使用

    原理就是循环整个下拉列表 找到对应的那个 然后加上select属性

    $("#idName").each(function() {
       // this代表的是<option></option>,对option再进行遍历
        $(this).children("option").each(function() {
            // 判断需要对那个选项进行回显
            if (this.value == res.data.xxxx.bank) {
                // 进行回显
                $(this).attr("selected","selected");
            }
        });
        form.render('select');
    })
    

    注意后面要加上form.render('select'); 相当于是刷新一下 不然也不会显示。

    以及给下拉框赋值也记录一下

    var alldata = eval("(" + res.data+ ")");
    $.each(alldata, function (index, item) {
        if (item != null && item.name!=null){
            option = new Option(item.name, item.id);
        }
        $('#idName').append(option);// 下拉菜单里添加元素
    });
    layui.form.render("select");
    

    加上个时间回显

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //日期范围选择
        laydate.render({
            elem: '#startTime'
            ,trigger: 'click'
            ,value: new Date(sourceOrder.sendStartTime)
        });
    });
    
    
    更多相关内容
  • layui多选下拉框

    2021-07-23 11:00:25
    加上下面代码即可解决 在layui注册下拉框 layui.use(['upload', 'element', 'form', 'layer', 'laydate', "multiSelect"], function () { layui.multiSelect.render('select','selectTest'); }); js文件我就不分享了...

    HTML代码

     <select class="param_belong" multiple="multiple" 
     					lay-filter="selectTest" name="belong">
             <option value=""></option>
              <option
                 th:each="type, typeS: ${belong}"
                 th:value="${type.objId}"
                 th:text="${type.name}"
                 th:selected="${type.selected}"></option>
      </select>
    

    导入js

    <script th:src="@{/js/multiSelect.js}" charset="utf-8"></script>
    

    我使用时候 以上就可以实现多选下拉框的功能;我新增和修改页面用的同一个页面,但点击修改页面时,多选框变成了单选框,点击新增页面却无问题。后来发现是因为layui渲染的问题。加上下面代码即可解决

    在layui注册下拉框

    layui.use(['upload', 'element', 'form', 'layer', 'laydate', "multiSelect"], function () {
           layui.multiSelect.render('select','selectTest');
        });
    

    js文件我就不分享了,自己复制代码 新建js文件粘贴进去吧!文件名称取:multiSelect.js 嗷!

    layui.define("form", function(exports) {
    	var MOD_NAME = "multiSelect",
    		o = layui.jquery,
    		form = layui.form,
    		selected_vals = [],
    		multiSelect = function() {};
    
    	multiSelect.prototype.init = function() {
    		var ts = this;
    		o('select[multiple]').each(function(idx, item) {
    			var t = o(this),
    				selds = [];
    			t.find('option:selected').each(function() {
    				selds.push(o(this).val());
    			})
    			t.next().addClass('multi').find('.layui-select-title').click(function() {
    				selected_vals[idx] && o(this).find('input').val(selected_vals[idx].join(','));
    			}).next().find('dd').each(function() {
    				var dt = o(this),
    					checked = (dt.hasClass('layui-this') || o.inArray(dt.attr('lay-value'), selds) > -1) ? 'checked' : '',
    					title = dt.text(),
    					disabled = dt.attr('lay-value') === '' ? 'disabled' : '';
    				dt.html('<input type="checkbox" lay-skin="primary" title="' + title + '" ' + checked + ' ' + disabled + '>');
    				ts.selected(idx, t, dt);
    			}).click(function(e) {
    				var dt = o(this);
    				// 点击下拉框每一行触发选中和反选
    				if(e.target.localName == 'dd' && dt.attr('lay-value') !== '') {
    					var status = dt.find('.layui-form-checkbox').toggleClass('layui-form-checked').hasClass('layui-form-checked');
    					dt.find('input').prop('checked', status);
    				}
    				// 禁止下拉框收回
    				dt.parents('.layui-form-select').addClass('layui-form-selected');
    				ts.selected(idx, t, dt);
    			});
    		})
    		form.render('checkbox');
    	}
    
    	multiSelect.prototype.selected = function(idx, t, dt) {
    		// 选中值存入数组
    		selected_vals[idx] = [];
    		// 先清除真实下拉款选中的值,在下面循环中重新赋值选中
    		t.find('option').prop('selected', false);
    		dt.parents('dl').find('[type=checkbox]:checked').each(function() {
    			var val = o(this).parent().attr('lay-value');
    			t.find('option[value=' + val + ']').prop('selected', true);
    			selected_vals[idx].push(o(this).attr('title'));
    		})
    		// 显示已选信息
    		dt.parents('dl').prev().find('input').val(selected_vals[idx].join(','));
    	}
    
    	multiSelect.prototype.render = function(type, filter) {
    		form.render(type, filter);
    		this.init();
    	}
    
    	var i = new multiSelect();
    	i.init();
    
    	exports(MOD_NAME, i);
    });
    
    展开全文
  • 今天小编就为大家分享一篇Layui 设置select下拉框自动选中某项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一、吐槽,layui感觉真的是比较不好用二、为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿,可能一个功能的开发我用其vue框架很简便就实现了,但是使用这个就要用很...

    一、吐槽,layui感觉真的是比较不好用

    二、为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿,

    可能一个功能的开发我用其vue框架很简便就实现了,但是使用这个就要用很多行代码去实现。

    三、尤其说一下,组件这个问题,

    ①layui的组件需要引入(分引入layui和layer两种情况,)

    ②每使用一个组件就要在js中声明 layui.use([XXX,XXX,XXX])...

    ③然后嘞,以form为例,你每次刷新了数据后或者动态赋值后都要render一下,

    ④组件之间的控制也是在layui.use中,比较模式化。更多的时候使用起来比较僵硬

    ⑤当然也不是没有好的地方,基于原生态入门及操作比较容易,

    ⑥样式比较轻盈好看也是一个吧,

    四、废话呢么多,直接上代码吧

    setDefaultVla:function(){

    //部门

    $('#deptPanel').val(xa.deptId);

    //职位

    $('#postionPanel').val(xa.postionId);

    //性别

    $('#sexDom').val(xa.sex);

    //入职日期

    $('#joinDate').val(xa.joinDate);

    //合同起

    $('#contractStartDate').val(xa.contractStartDate);

    //合同止

    $('#contractEndDate').val(xa.contractEndDate);

    //身份证起

    $('#idCardStartDate').val(xa.idCardStartDate);

    //身份证止

    $('#idCardEndDate').val(xa.idCardEndDate);

    layui.form.render();

    }

    五、当然你也可以使用layui.form.render('select');来专门真多下拉框进行刷新操作。

    展开全文
  • Layui(table下拉框)

    千次阅读 2019-07-17 21:08:43
    用到的是layui插件,主要是layui插件的table模块。目的是要做到内嵌入select,并且通过select回填相对应的数据。 刚开始为无数据状态,然后添加一行数据,绑定好table内的select所需要的数据 然后是根据修理项目的...

    用到的是layui插件,主要是layui插件的table模块。目的是要做到内嵌入select,并且通过select回填相对应的数据。
    在这里插入图片描述
    刚开始为无数据状态,然后添加一行数据,绑定好table内的select所需要的数据
    在这里插入图片描述
    然后是根据修理项目的select选择一个选项,通过这样回填其他数据(维修性质不需要回填)
    在这里插入图片描述
    这样的做法,只有添加行与select绑定数据的时候是请求控制器的,其他,所有的数据都是保存在table内。

    @* 修理项目下拉框 *@
        <script type="text/html" id="selectRepairItemName">
            <select name="RepairItemName" lay-filter="RepairItemName" data-value="{{d.RepairItemName}}"></select>
        </script>
    

    var tabledata; //修理项目==》自定义全局变量

    //修理项目==》Table
                    tabRepairItem = layuiTable.render({
                        elem: "#tabRepairItem",
                        toolbar: '#toolbarDemo',//工具条
                        defaultToolbar: [],//去除其他工具
                        id: layTableId,//table的ID
                        limit: 100,//不开启分页,最多一百行。分页存在问题
                        edit: true,//可编辑
                        totalRow: true,//总计行
    data: [],//设置加载不存在数据
                        //data: [{ RepairItemName:1}],//默认一行数据,修理项目下拉列表默认选中第一个选项,
                        cols: [[
                            { type: 'radio', fixed: 'left' },
                            { type: "numbers", title: "序号", totalRowText: "合计" },
                            { field: "RepairItemID", title: "修理项目ID", hide: true },
                            {
                                field: "RepairItemName", width: 130, title: "修理项目", templet: '#selectRepairItemName'
                            }, 
                        ]],
                        done: function (res, curr, count) {
                            tabledata = res.data;
                            $.ajax({
                                //修理项目拼接下拉选项
                                type: "post",
                                url: "SelecttabRepairItem",
                                dataType: "json",
                                async: false,
                                success: function (data) {
                                    for (k in data) {
                                        $("select[name='RepairItemName']").append('<option value="' + data[k].id + '">' + data[k].text + '</option>');
                                    }
                                }
                            });
                            
                            //根据已有的值回填修理项目下拉框
                            layui.each($("select[name='RepairItemName']", ""), function (index, item) {
                                var elem = $(item);
                                elem.val(elem.data('value'));
                            }); 
                            form.render('select');
    
                            //计算行的金额
                            var RepairCost = $('.layui-table-main').find("td[data-field='RepairCost']");//根据layuitable的属性来查找到修理费这个单元格 先查找到外面的table属性 再找单元格
                            var Discount = $('.layui-table-main').find("td[data-field='Discount']");//折扣
    
                            //这里是单价的输入事件 计算小计用的 金额 = 修理费 X 折扣
                            RepairCost.on("input", function (e) {
                                var $cr = $(e.target);
                                var dataindex = $cr.parents('tr').attr("data-index");
                                var Discount = $cr.parents('tr').find("td[data-field='Discount']").children().html();
                                var sub = Discount * e.target.value;
                                $cr.parents('tr').find("td[data-field='ReceiptsSum']").children().html(sub);
                                $.each(tabledata, function (index, value) {
                                    if (value.LAY_TABLE_INDEX == dataindex) {
                                        value.ReceiptsSum = sub;
                                    }
                                });
                            });
                            Discount.on("input", function (e) {
                                var $cr = $(e.target);
                                var dataindex = $cr.parents('tr').attr("data-index");
                                var RepairCost = $cr.parents('tr').find("td[data-field='RepairCost']").children().html();
                                var sub = RepairCost * e.target.value;
                                $cr.parents('tr').find("td[data-field='ReceiptsSum']").children().html(sub);
                                $.each(tabledata, function (index, value) {
                                    if (value.LAY_TABLE_INDEX == dataindex) {
                                        value.ReceiptsSum = sub;
                                    }
                                })
                            });
    
                            var key = 'ReceiptsSum' //列id
                            var a = $("#tabRepairItem").next().find('.layui-table-total').find('td[data-field="' + key + '"] div').text();
                        }
                    })
    

    控制器

    //修理项目下拉框
            public ActionResult SelecttabRepairItem()
            {
                List<SelectVo> A = (from B in myModals.PW_RepairItem
                                    select new SelectVo
                                    {
                                        id = B.RepairItemID,
                                        text = B.RepairItemName
                                    }).ToList();
                //A = Tools.SetSelectJson(A);
                return Json(A, JsonRequestBehavior.AllowGet);
            }
    

    查询某个表绑定select所需要的值

    展开全文
  • 效果图 //后台返回数据 //前端代码 客户 </select> </div> </div> </div> <...//接口调用代码(需要引入layui.css,layui.js,jquery.js)
  • .layui-table-cell, .layui-table-tool-panel li{ overflow:visible !important; } 加以上样式
  • layui表格下拉框无法显示

    千次阅读 2019-07-08 08:09:12
    layui表格下拉框无法显示 开发工具与关键技术:java 作者:彭浩达 撰写时间:2019年 7月 4日 $(function () { layui.use([‘layer’, ‘table’], ...layuiTable = layui.table; layer = layui.layer, //执...
  • 今天小编就为大家分享一篇Layui组件Table绑定行点击事件和获取行数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 如下所示: <!DOCTYPE html> <html> <head> <title>排课设置<...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">...link rel="stylesheet
  • 今天小编就为大家分享一篇layui table 表格上添加日期控件的两种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 项目需要用layui的三级联动,自己整理了一下,做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键', `area_name` varchar(16) DEFAULT NULL COMMENT '区域...
  • link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" /> [removed][removed] layui.use('form',function){ var form=layui.form;//注:这是1.0升级...
  • 在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况: 解决方法:在页面里面找到...$(“.layui-table-body”).css(‘overflow’,’visible’); $(“.layui-table-box”).css(‘overflow’,’visible’); $(“.
  • 因为没有对表单渲染,加上这一句: form.render(‘select’);
  • 我使用的是后台传出map值和ajax自动在当前页面请求并渲染layui的form,记住给下拉框select的父元素form或者div增加class="layui-form"属性,还要
  • <script> layui.use(['form', 'layedit', 'laydate'], function () { function isSelcet(p1) { if (p1 == "真") { return true } else { return false } };
  • 今天小编就为大家分享一篇Layui表格行工具事件与数据回填方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • div class="layui-inline"> <label class="layui-form-label">测试内容</label> <div class="layui-input-inline"> <select name="projectName" id="contentId" lay-filter=...
  • @{ ViewBag.Title = “MySelfWeb”; //Layout = “~/Views/Shared/_Layout.cshtml”; Layout = null; Layout = “~/Views/Shared/_LayoutMain.cshtml”; } Myself <style type="text/css">... }
  • Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop...
  • 1,引入插件tableSelect layui.config({ base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 version: 'v1.5.10' // 插件版本号 }).extend({ soulTable: 'soulTable/soulTable', tableChild: 'soulTable...
  • layui获取下拉框的值

    万次阅读 2019-07-09 15:48:38
    Layui动态从数据库获取下拉框列表:https://blog.csdn.net/weixin_42189604/article/details/88797833 HTML: <select name="sex" lay-filter="sex"> <option value="1">男</...
  • 表格嵌套下拉框

    2019-03-22 13:36:46
    通过鼠标点击,在表格相应位置自动填入选择的内容,简洁方便高效,亲测,可用(版本已经转换为最低版本)!!
  • layuiTable表格里的select下拉框设置默认选中的值 表格里面嵌套下拉框无法显示默认值 最近在做一款后台管理系统的时候,表格里面需要嵌套select下拉,在请求后台拿到对表格进行数据填充的时候发现select无法展示默认...
  • layui——下拉框监听

    千次阅读 2018-10-23 14:45:48
    &lt;select name="" id="userSelect" lay-filter="userClass"&gt; &lt;option value="0"&gt;用户&lt;/option&gt; &lt;...l
  • 上图是使用layui做出来的下拉框。 js代码: Form.render(); 这是layui下拉框绑定的特别之处。 别的下拉框绑定是不需要这句的代码的。 比如:Bootstrap框架。 但是layul框架没有这句代码layul的下拉框是绑定不...
  • 今天要介绍的就是layui的form表单组件里的带查询的下拉框。 用任何插件都需要引用相应的css文件和js文件,在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块,少了这两步操作,select、...

空空如也

空空如也

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

layuitable下拉框