layui学习——数据表格嵌套下拉列表，并实现动态更新
项目中有些字段的数据为固定的几个值，这些字段在数据表格中显示为汉字，但在数据库中以数字形式存储，例如：仓库属性(0:普通仓/1:检验仓/2:报废仓)，要对这些字段进行数据表格行内编辑有些麻烦。
因此，在数据表格中嵌套下拉列表是一个比较好的方案。
步骤1：创建数据表格嵌套下拉列表样式
使用layui的template功能，先创建一个下拉列表：
script type="text/html" id="WHAttr"
select lay-filter='table' lay-verify=''
option value="0"普通仓/option
option value="1"检验仓/option
option value="2"报废仓/option
/select
/script
以仓库属性字段为例。我在项目中使用的是自动渲染的方式渲染表格的，因此需要在仓库属性的th标签中加入lay-data属性：
th lay-data="{field:'WHAttr',templet:'#WHAttr'}"仓库属性/th
这样就在数据表格中嵌套一个下拉列表了，但样式好像不对，看起来怪怪的，下拉框与单元格大小不一致，下拉框也被遮挡了。
于是就要修改样式了：
style
/*使下拉列表框不被遮挡*/
.layui-table-cell {
overflow: visible !important;
}
/*使列表框与表格单元格重合*/
td .layui-form-select {
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
}
/style
到这一步，表格样式就做好了。
步骤2：实现数据同步
完成步骤1后，表格中已经嵌套下拉列表了，但是默认显示的是下拉列表的第一行，接下来要做的就是修改下拉列表的默认行，让表格能够显示正确的数据。
var divForm = $("#" + tableId).next(); // 获取表格
var tableCache = table.cache[tableCacheId]; // 获取表格缓存数据
var trJqs = divForm.find(".layui-table-body tr"); // 获取表格body下的所有tr标签
trJqs.each(function () { // 遍历每个tr标签
var trJq = $(this); // 获得当前遍历的tr标签
var dataIndex = trJq.attr("data-index"); // 得到当前数据行的data-index，即为第几行数据
trJq.find("td").each(function () { // 遍历tr标签下的每一个td标签
var tdJq = $(this); // 获得当前遍历的td标签
var fieldName = tdJq.attr("data-field"); // 获得当前td标签的字段名
var selectJq = tdJq.find("select"); // 获得当前td标签下的select标签
if (selectJq.length == 1) { // 判断select标签是否存在
selectJq.eq(0).val(tableCache[dataIndex][fieldName]); // 将表格里的缓存数据赋值给select标签
}
});
});
form.render('select'); // 重新加载select表单
完成了这一步，数据表格加载完成后，表格中下拉列表中默认显示的行数据就会与数据表格的缓存数据一致了。
步骤3：实现数据动态更新
使用layui form的select下拉选择事件，监听下拉列表的数据更新
form.on('select(table)', function (data) {
var tableCache = table.cache['table'], // 获得数据表格的缓存数据
value = data.value, // 得到下拉列表改变后的value值
field = data.othis.parents('td').attr('data-field'), // 获得下拉列表的父级td标签的字段名称
dataIndex = parseInt(data.othis.parents('tr').attr('data-index')), // 获得变化的下拉列表所在的行index
lineDate = tableCache[dataIndex]; // 获得数据表格中该行的缓存数据
if (tableCache[dataIndex][field] != value) { // 判断数据是否发生了变化
// 这里可以写ajax实现与后台数据的交互
tableCache[dataIndex][field] = value; // 将修改后的数据更新到数据表格的缓存数据中
}
});
全文完！
layui学习——数据表格嵌套下拉列表，并实现动态更新 相关文章
数据排序 Part One
目前未添加归并排序 因为我不会 为什么要对数据进行排序 举个简单的 例子 ： 国总统大选有n位竞争者 他们分别是A,B,C,D,E,F,G,H,I,J...... 他们的票数为710，273，123，654，354，725，443，353，204...... 而这个国家又很特别，要选选票第n小的人当 如
CSP20-2期末预测之最佳阈值
十万个数据就不可能用笨办法去一个一个试了，先将指数递减排序并假定阈值为最大值。阈值不断缩小时根据上一次的记录去修改得到新的阈值的正确率。如果选用下一个阈值时并没有缩小则记录，不立刻操作。 突然发现CSP有下载答卷功能。 #includebits/stdc++.husi
数据库SQL之学习SUM总和套用条件CASE WHEN语句
1.SQL之学习SUM总和套用条件CASE WHEN语句 2.条件语句CASE WHEN 格式已经在图中写的很明白了 -- 查询t_wzw库中所有数据 总和(条件为t_wzw.birthday = date_sub函数(当前时间(),范围 7天) 有就返回1 否则返回0 结束) 别名SELECT sum(CASE WHEN t_wzw.birthday
kubernetes-学习笔记_大魂师
第十三章、Kubernetes网络概念及策略控制 13.1、Kubernetes基本网络模型 13.1.1、k8s网络基本法则：约法三章 + 四大目标 1)Kubernetes对于Pod间的网络没有任何限制，只需满足如下【三个基本条件】： 所有 pod与其他Pod 之间其实是可以直接通信的，无需经过
JavaSE_基本语法学习
JavaSE_基本语法学习 1.注释 注释有三种: 1. 单行注释//2. 多行注释/**/3. 文档注释 /** */ 2.标识符与关键字 java所有的组成部分都需要名字. 标识符:类名,变量名以及方法名都被称为标识符 关键字:除类名,变量名以及方法名外,其他基本为关键字 //abstract定
lvm学习笔记01
为什么使用逻辑卷： 直接使用fdisk分区挂载的话，随着时间的推移，数据量越来越大，硬盘空间越来越小，要想扩充容量的话，就必须挂载新硬盘然后做数据迁移，这就必然导致前台业务的停止，不符合企业需求，因此完美的解决方法应该是在零停机前提下可以自如对
代码审计学习01-in_array() 函数缺陷
一、开始代码审计之旅 01 从今天起，学习代码审计了，这篇文章就叫代码审计01吧，题目来自PHP SECURITY CALENDAR 的第一题，结合红日安全写的文章，开始吧。 二、先看这道题目 1、题目名称：Wish List 2、in_array() 函数的作用 in_array() 函数的作用是
Spring Boot返回Json数据及如何进行数据封装
在项目开发中，接口与接口之间，前后端之间数据的传输都使用 Json 格式，在 Spring Boot 中，接口返回 Json 格式的数据很简单，在 Controller 中使用 @RestController 注解即可返回 Json 格式的数据， @RestController 也是 Spring Boot 新增的一个注解，我
导出数据
数据导出 首先是给一个导出的按钮事件 el-button type="primary" @click="clickExport"导出/el-button 表格给一个复选框进行当前的导出 el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" // 复选框事件 // 这个是
【JAVA】之获取CSV文件数据以及获取Excel文件数据
一、获取CSV文件数据 import org.apache.poi.ss.usermodel.Cell;import org.apache.poi.ss.usermodel.Sheet;import org.apache.poi.ss.usermodel.Workbook;import org.apache.poi.xssf.usermodel.XSSFWorkbook;import org.testng.SkipException;import org.t
