精华内容
下载资源
问答
  • layui的table的下拉框
    2020-11-04 17:51:31
    .layui-table-cell, .layui-table-tool-panel li{
                overflow:visible !important;
            }
    

    加以上样式

    更多相关内容
  • 主要为大家详细介绍了layui实现下拉框三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • html下拉多选框样式,h5下拉多选框整套样式,用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
  • layui渲染下拉框,设置下拉框,设置验证 <div class="layui-form-item"> <label for="department_id" class="layui-form-label"> <span class="x-red">*</span>部门 </label&...

    layui渲染下拉框,设置下拉框,设置验证

     <div class="layui-form-item">
                    	 <label for="department_id" class="layui-form-label">
                            <span class="x-red">*</span>部门
                        </label>
                        <div class="layui-input-block">
                            <select name="department_id" id="department_id" lay-filter="department_id" required  lay-verify="required">
                            	<option value="">--</option>
                            	<c:forEach items="${department_li }" var="item">
                            	<option value="${item.did }" <c:if test="${s.department_id eq item.did}">selected </c:if>  >${item.dname }</option>
                            	</c:forEach>
                            </select>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                    	 <label for="professional" class="layui-form-label">
                            <span class="x-red">*</span>科室
                        </label>
                        <div class="layui-input-block">
                            <select name="chamber_id" id="chamber_id" lay-filter="chamber_id" required  lay-verify="required">
                           		<option value="">--</option>
                            </select>
                        </div> 
                    </div>
    <div class="layui-form-item">
    	                <button class="layui-btn" type="submit" lay-submit lay-filter="formDemo">保存</button>
    	                <button class="layui-btn" type="reset">重置</button>
    	             </div>
    
    

    关键代码:设置需要渲染的下拉框,用 lay-filter
    id=“department_id” lay-filter=“department_id”

    js代码如下:

    layui.use(['form','layer'], function(){
            	  var form = layui.form;
            	  
            	  //监听提交
            	  form.on('submit(formDemo)', function(data){
            	    return true;
            	  });
            	  
            	  getChamber($('#department_id').val());  
              	form.on('select(department_id)', function(data){
                  	var department_id=(data.value);
                  	getChamber(department_id);
              	});
    
              	
              	function getChamber(department_id){
              		$("#chamber_id").html("");
              		 form.render('select');
              		if($.trim(department_id).length==0)return;
                 		 $.ajax({
                	                type: 'POST',
                	               url : "${ctx}/chamber/selectByDid",
    	  			    			data : {
    	  			    				department_id : department_id
    	  			    			},
                	                dataType:  'json',
                	                success: function(data){
      	           	                $.each(data, function(key, val) {
      	           								var option1 = $("<option>").val(val.cid).text(val.cname);
      	           								if("${s.chamber_id}"==val.cid)$(option1).attr('selected','selected');
      	           	                   			
      	           	                   			$("#chamber_id").append(option1);
      	           	                            form.render('select');
      	           	                 }); 
                	                }
                	       }); 
                  } 
            	});
    

    Layui 监听 select 获取自定义属性值

    form.on('select(doctor_id)', function(data){
                	var f= $(data.elem).find("option:selected").attr("data-f");
                	$('#money').val(f); 
                	 
            	}); 
    
    展开全文
  • div class="layui-inline"> <label class="layui-form-label">测试内容</label> <div class="layui-input-inline"> <select name="projectName" id="contentId" lay-filter=...
    <div class="layui-inline">
    			    <label class="layui-form-label">测试内容</label>
    			    <div class="layui-input-inline">
    			      <select name="contentName"  id="contentId" lay-filter="contentId" lay-verify="required"> 
    			       <option value="">请选择</option>
    			      </select>
    			  </div>
    			</div>
    

    方法一:

    function content(){
    			var available = 1;
    			$.get("/load/contentId?available="+available,function(objs){
    				
    				var types = objs.data;
    				var contentIdHtml= $("#contentId").html("");
    				contentIdHtml.append('<option value>请选择</option>'); 
    				$.each(types,function(index,item){
    					contentIdHtml.append("<option value="+item.contentName+">"+item.contentName+"</option>");
    				});
    				$("#contentId").val(contentNameAdd); //设置选中的值 contentNameAdd此处做全局变量
    				form.render("select");
    
    			}); 
    		};
    

    方法二:

    var contentId=$("#contentId");
       							var contentIdHtml="<option value='0'>请选择直属领导</option>";
       							$.each(users,function(index,item){
       								contentIdHtml+="<option value='"+item.id+"'>"+item.name+"</option>";
       							});
       							contentId.html(contentIdHtml);
       							//选中一个
       							$("#contentId").val(contentNameAdd); //设置选中的值 contentNameAdd此处做全局变量
       							//重新渲染
       							form.render("select");
    
    展开全文
  • 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下拉框的内容,以为使用原始的js写法可以实现,结果却不可以。 错误写法 <div class="layui-input-block"> <select name="year" lay-verify="required" id="year"></...
  • layui的插件效果,优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,...
  • 【经典】layui下拉框分页,大数据解决方案-附件资源
  • 今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Layui表格行工具事件与数据回填方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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升级...
  • layui下拉框只能模糊查询出已经加载的数据,当然用ajax 请求也能查询到,但是数据多了加载会很慢,而且layui的框放在android调试器上每个机型都不能保证完全适配 问题描述: 自己拼接了个下拉框,并且实时获取...
  • 记录:使用tableSelect插件实现下拉框表格,并多选或单选数据 HTML代码: <!-- 部分代码 --> <tr> <td><label class="layui-form-label required">巡防点</label></td> <...
  • 在修改数据的时候,打开编辑页面,打开数据表格下拉框时,已选中原有数据 <label class="layui-form-label">单选</label> <div class="layui-input-inline"> <input type="text" id="code...
  • @{ ViewBag.Title = “MySelfWeb”; //Layout = “~/Views/Shared/_Layout.cshtml”; Layout = null; Layout = “~/Views/Shared/_LayoutMain.cshtml”; } Myself <style type="text/css">... }
  • 上图是使用layui做出来的下拉框。 js代码: Form.render(); 这是layui下拉框绑定的特别之处。 别的下拉框绑定是不需要这句的代码的。 比如:Bootstrap框架。 但是layul框架没有这句代码layul的下拉框是绑定不...
  • layuiTable表格里的select下拉框设置默认选中的值 表格里面嵌套下拉框无法显示默认值 最近在做一款后台管理系统的时候,表格里面需要嵌套select下拉,在请求后台拿到对表格进行数据填充的时候发现select无法展示默认...
  • 记录:layui table动态渲染二级联动select下拉框 HTML代码: <style> #mytable{ min-width: 750px; } #mytable tr:hover{ background-color: #fff } #mytable td{ border: hidden; text-align: right...
  • @{ Layout = null; } <!DOCTYPE html> <html>...meta name="viewport" content="width=device-width" />...link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel="st
  • layui表格下拉框无法显示

    千次阅读 2019-07-08 08:09:12
    layui表格下拉框无法显示 开发工具与关键技术:java 作者:彭浩达 撰写时间:2019年 7月 4日 $(function () { layui.use([‘layer’, ‘table’], ...layuiTable = layui.table; layer = layui.layer, //执...
  • layui2.4.3select多选
  • 前端select下拉框带搜索,多选,反选
  • layui table单元格中下拉框显示
  • 如下所示: <!DOCTYPE html> <html> <head> <title>排课设置<...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">...link rel="stylesheet
  • layui搜索下拉框数据的动态绑定

    千次阅读 2020-11-03 16:42:53
    div class="layui-input-inline"> <select name="modules" id="nameselect" lay-search="" lay-verify="required"> </select> </div> js代码 function LayuiCreateSelect(selectId, url,...
  • Layui下拉框样式失效问题

    千次阅读 2019-03-04 11:33:58
    今天在调试Layui下拉框时,发现下拉框的样式失效,经过后期的调试发现,layui下拉框的样式想要生效,必须要在js里面使用 layui.use(["form","table"], function(){ }); 这个layui的初始...
  • 码云地址:https://gitee.com/kkk12/layui-table-select一、介绍此项目是为了解决layui table表格单元格(column)点击事件中无下拉列表(select)功能的问题。a.可异步ajax请求后台数据。b.可直接以数组形式传参...

空空如也

空空如也

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

layui的table的下拉框