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);
    }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#form01{
			padding:100px;
			background-color: pink;
		}
		</style>
		<script type="text/javascript">
		//入口函数,防止页面上的标签还没被渲染出来，JS的代码就出来了
		window.onload=function(){
			let items=document.getElementsByName("items");
			let allselectcheck=document.getElementById("checkallbox");
			let allselect=document.getElementById("checkboxyes");
			let allnosel=document.getElementById('checkboxno');
			let antiselect=document.getElementById('checkboxanti');
			let submit=document.getElementById('submit');
			allselect.onclick=function(){//全选
				for (var i = 0; i < items.length; i++) {
					items[i].checked=true;
				}
				allselectcheck.checked=true;
			};
			allnosel.onclick=function(){//全不选
				for (var i = 0; i < items.length; i++) {
					items[i].checked=false;
				}
				allselectcheck.checked=false;
			};
			antiselect.onclick=function(){//反选
				for (var i = 0; i < items.length; i++) {
					if(items[i].checked)//如果被选中
					items[i].checked=!items[i].checked;//取反
				}
				if(allselectcheck.checked)//如果全部被选中，则全部取反
				allselectcheck.checked=!allselectcheck.checked;
			};
			submit.onclick=function(){//提交弹出框
				for (var i = 0; i < items.length; i++) {
					if(items[i].checked)
					alert(items[i].value);//弹出选中的值
				}
			};
			allselectcheck.onclick=function(){
				for (var i = 0; i < items.length; i++) {
					items[i].checked=allselectcheck.checked;
				}
			};
          //当只有一个没被选中时，点击，全选框被选中，反之当全部选中，取消一个，全不选被选中
			for (var i = 0; i < items.length; i++) {
				items[i].onclick=function(){
					allselectcheck.checked=true;
					for (var j = 0; j < items.length; j++) {
						if(!items[j].checked){//循环哪一个没被选中
							allselectcheck.checked=false;
							break;
						}
					}
				}
			};
		}
			
		</script>
	</head>
	<body>
		<div id="form01">
			<form action="" method="post">
				你的hobby是：<input type="checkbox" name="" id="checkallbox" value="" />全选/全不选
			<br />
			<input type="checkbox" name="items" id="" value="EXO" />EXO
			<input type="checkbox" name="items" id="" value="boy" />boy
			<input type="checkbox" name="items" id="" value="sports" />sports
			<input type="checkbox" name="items" id="" value="eat" />eat
			<input type="checkbox" name="items" id="" value="study" />study
			<br>
			<input type="button" name="" id="checkboxyes" value="全选" />
			<input type="button" name="" id="checkboxno" value="全不选" />
			<input type="button" name="" id="checkboxanti" value="反选" />
			<input type="button" name="" id="submit" value="提交" />
			</form>
			
		</div>
	</body>
</html>

效果演示：