layui前端，弹窗多选表单，选择后自动添加到主表单，附带状态判断、除重、单行删除功能
实现效果如下：
点击选择，弹出弹窗
选择需要的数据后，主表格自动添加
除重
状态判断
主要前端代码如下：
HTML：
<div>
<table class="layui-table" lay-filter="main_table" id="choosetable" >
<thead>
<tr>
<div class="layui-btn-container">
<a class="layui-btn layui-btn-sm" id="choose" name="choose" >
<i class="layui-icon">选择</i>
</a>
</div>
</tr>
<tr>
<th >操作</th>
<th >资产单号</th>
<th>资产编码</th>
<th >资产名称</th>
<th >资产类别</th>
<th >资产来源</th>
<th >资产所在位置</th>
<th >价格</th>
</tr>
<tr th:each="perii,lstati:${assetList}"><!--Thymeleaf 的循环渲染表格（数据从后端传入-->
<td ><input type='button' value='删除' class='layui-btn' onclick='delLine11(this)'/></td>
<td><input readonly="readonly" style="border:none;" type="text" name="tid" th:value="${perii.tid}"></td>
<td th:text="${perii.labelId}">资产编码</td>
<td th:text="${perii.assetName}">资产名称</td>
<td th:text="${perii.assetTypeName}">资产类别</td>
<td th:text="${perii.assetSourceName}">资产来源</td>
<td th:text="${perii.assetPositionName}">资产所在位置</td>
<td th:text="${perii.price}">价格</td>
</tr>
</thead>
</table></div>
js：
<script>
//资产选择器
layui.tableSelect.render({
elem : '#choose', //定义输入框input对象
searchKey : 'search_LIKE_use_status', //搜索输入框的name值 默认keyword
table : { //定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
height : 220,
url : '[[@{/amc/asset/queryList}]]',
cols : [ [ {
checkbox : true
}, {
field : 'tid',
title : 'tid',
width : 0
},
{
field : 'labelId',
title : '资产编号',
width : 100
},{
field : 'useStatus',
title : '资产状态',
width : 100
},{
field : 'assetName',
title : '资产名称',
width : 100
},{
field : 'createdTime',
title : '购买时间',
width : 100
},{
field : 'usePeriod',
title : '使用期限',
width : 100
},{
field : 'assetTypeName',
title : '资产类别',
width : 100
},{
field : 'assetSourceName',
title : '资产来源',
width : 100
},{
field : 'assetPositionName',
title : '资产所在位置',
width : 100
}, {
field : 'price',
title : '价格',
width : 100
}] ]
},
done : function(elem, data) {
var tr = $("#choosetable tr"); // 获取table中每一行内容
var result =new Array();; // 数组
for (var i = 0; i < tr.length; i++) {// 遍历表格中每一行的内容
var tds = $(tr[i]).find("td");
if (tds.length > 0) {
result.push({
"tid" : $(tds[1]).find("input").val()
})
}
}
console.log("^^^^^^^^^^^^^^^^"+JSON.stringify(result));
//选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
//拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID... choosetable
if (data.data.length > 0) {
var elementById = data.data[0];
console.log(elementById);
for(var i=0; i<data.data.length;i++){
var tid=data.data[i].tid;
var labelId=data.data[i].labelId;
var assetName=data.data[i].assetName;
var assetTypeName=data.data[i].assetTypeName;
var assetSourceName=data.data[i].assetSourceName;
var assetPositionName=data.data[i].assetPositionName;
var price=data.data[i].price;
var useStatus = data.data[i].useStatus;
if (result.length == 0) {
if (useStatus == "已使用") {
var tr = document.createElement("tr");
tr.innerHTML = "<tr>"
+ "<td class='c6'><input class='layui-btn' type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>"
+ "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='tid' value='" + tid + "'></td>"
+ "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='labelId' value='" + labelId + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetName' value='" + assetName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetTypeName' value='" + assetTypeName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetSourceName' value='" + assetSourceName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetPositionName' value='" + assetPositionName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='price' value='" + price + "'></td>"
+ "</tr>";
// 添加数据到表中
document.getElementById("choosetable").appendChild(tr);
} else {
layui.layer.msg("只能选择已使用状态的资产，请重新选择");
}
} else {
// 除重
var bb = true;
for (var a = 0; a < result.length; a++) {
console.log("^^^^^^^for^^^^^^^^");
if (tid == result[a].tid) {
bb = false;
break
} else {
}
}
if (bb == true) {
if (useStatus == "已使用") {
var tr = document.createElement("tr");
tr.innerHTML = "<tr>"
+ "<td class='c6'><input class='layui-btn' type='button' value='删除' class='cla2' οnclick='delLine(this)'/></td>"
+ "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='tid' value='" + tid + "'></td>"
+ "<td class='c2'><input readonly='readonly' style='border:none;' type='text' name='labelId' value='" + labelId + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetName' value='" + assetName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetTypeName' value='" + assetTypeName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetSourceName' value='" + assetSourceName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='assetPositionName' value='" + assetPositionName + "'></td>"
+ "<td class='c3'><input readonly='readonly' style='border:none;' type='text' name='price' value='" + price + "'></td>"
+ "</tr>";
// 添加数据到表中
document.getElementById("choosetable").appendChild(tr);
} else {
layui.layer.msg("只能选择已使用状态的资产，请重新选择");
}
}else {
layui.layer.msg("重复资产，请重新选择");
}
// 除重
}
}
} else {
elem.val('');
$('#userInCompanyTid').val('');
}
}
});
//表格单行删除（用于弹窗中被选中的数据，在主表格中删除
function delLine(obj){
var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象
document.getElementById("choosetable").removeChild(tr);
}
//表格单行删除（用于后端传回在主表格中渲染的数据，在主表格中删除
function delLine11(obj){
var tr = obj.parentNode.parentNode;//parentNode 获取文档层次中的父对象
document.getElementById("choosetable").deleteRow(tr.rowIndex);
}
扫一扫
5394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
