Layui(四) 表格嵌套下拉列表框

由于我又想着偷懒，结果试了很多方法不得行，最后写了一个很LOW的版本，权当学习吧。（能用就行，管那么多干嘛，略略略。。。有大佬知道更好的方法，可以给我留言，相互学习嘛！）

目的：

过程：

HTML:

// form 表单不一定非要 form 标签，只要标签中含有 layui-form就可以
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"><table class="layui-hide" id="door-status" lay-filter="demoEvent"></table>
</div>

Data: 模拟数据

 var data = [{"IP": "192.168.1.111", "status": "0", "z_name": "00001", "use_com": "gesgs,fjdk"},{"IP": "192.168.1.112", "status": "0", "z_name": "00001", "use_com": "gesgs,fjdk"},{"IP": "192.168.1.113", "status": "0", "z_name": "00001", "use_com": "gesgs,fjdk"}];

JS : 思路：将下拉菜单一字符串形式拼接返回到单元格中

 table.render({elem: '#IP', data: data, size: 'lg', cols: [[{type: 'checkbox'}, {field: 'IP', title: 'IP', width: 230, templet: "#dateTpl", unresize: true}, {field: 'status', title: '状态', width: 230, templet: '#selectTpl', unresize: true}, {field: 'z_name', title: '子名称', templet: '#s_date_group', unresize: true}, {field: 'use_com', title: '可用机子',unresize: true, templet: function (d) {//将返回的字符串值切割成列表var tg = d.t_group.split(',');// 将遍历的字符串列表以字符串形式拼接var res = "";$.each(tg, function (index, item) {res += '<option value=\"18000\">' + item + '</option>';});// 将所有的option和select 统一返回给表格单元格return '<select name="city" lay-filter="testSelect" lay-verify="required" data-value="' + index + '" >\n' + res + '</select>';}}]],done: function (res, curr, count) {//由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单$(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');// 一定要重新渲染表单form.render();}});

Layui(四) 表格嵌套下拉列表框相关推荐

layui中表格嵌套表格
在表格里面再嵌套一个表格,拿到项目看到视频里看见里面的演示,在表格里面还要嵌套一个表格,那时候脑袋一点思路也没有,就是一片空白的,然后就觉得很难,再然后就不管了,先做了再说. 平时的一张表格这些都是可 ...
layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表，并实现动态更新
layui学习--数据表格嵌套下拉列表,并实现动态更新项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废 ...
layui使用表格数据，json嵌套数据解决
layui使用表格数据,json嵌套数据解决 layui使用数据表格 json数据输出出现的问题 layui,返回的数据不符合规范,正确的成功状态码 (code) 应为:0 在数据嵌套时的使用 la ...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
简单使用layui完成表格
开发工具与关键技术:Visual Studio 2015 layui 作者:孙水兵撰写时间:2019年5月 15日一.layui及数据表格的简介 layui(谐音:类UI) 是一款采用自身模块规范 ...
Layui数据表格的引用
对于一些编程插件的引用,相信大多数的编程人员都不会感觉到陌生,因为在对程序开发和项目开发的过程中往往都会需要引用到插件,那么至于插件呢,也有很多种,比如: bootstrap jquery layui ...
Layui数据表格table排序（后端PHP）
一.需要添加二.html代码三.PHP部分代码四.其他一.需要添加 1.需要排序的字段加上 sort: true 属性 2.table.on('sort(lay-filter的值)', fun ...

Layui(四) 表格嵌套下拉列表框

由于我又想着偷懒，结果试了很多方法不得行，最后写了一个很LOW的版本，权当学习吧。（能用就行，管那么多干嘛，略略略。。。有大佬知道更好的方法，可以给我留言，相互学习嘛！）

目的：

过程：

Layui(四) 表格嵌套下拉列表框相关推荐

最新文章

热门文章