Nesting drop-down boxes in Layui data table

1. First, prepare the script tag. The id is used to bind his id to the row in the table.

<script type="text/html" id="selectClause" ></script>

2. There are many ways to implement the template. After that, prepare the selcet tag under the script tag, and all the option tag fields need to be written up. You only need to correspond to the data in the database then your drop-down box is correct. Here is a simple return to fixed.

 <select name='clauseid'  lay-filter="testSelect" lay-search='' style="text-align: center">
        <option value="1" {{# if (d.clauseid==1){ }} selected="selected" {{# } }}>报名注册费</option>
        <option value="2" {{# if (d.clauseid==2){ }} selected="selected" {{# } }}>代收费</option>
        <option value="3" {{# if (d.clauseid==3){ }} selected="selected" {{# } }}>培训费</option>
        <option value="4" {{# if (d.clauseid==4){ }} selected="selected" {{# } }}>科一考试费</option>
        <option value="5" {{# if (d.clauseid==5){ }} selected="selected" {{# } }}>科二考试费</option>
        <option value="6" {{# if (d.clauseid==6){ }} selected="selected" {{# } }}>科三考试费</option>
        <option value="6" {{# if (d.clauseid==7){ }} selected="selected" {{# } }}>科四考试费</option>
    </select>

3. Complete; 1. The row binding id in the corresponding data table; 2. The corresponding name in the corresponding name determines whether he can get the value in the value of the option tag below him on the page. That is, the id value of the corresponding database is used for modification. 3. The value in value corresponds to the id value in the table database. 4. The name in the corresponding table database.

Insert picture description here


4. We can realize the effect of monitoring the drop-down box in the data table by monitoring the form of layui.

		//监听数据表格中到的下拉框
        form.on('select(testSelect)', function (data) {
            var elem = $(data.elem);
            var trElem = elem.parents('tr');
            var tableData = table.cache['tesc'];
            // 更新到表格的缓存数据中,才能在获得选中行等等其他的方法中得到更新之后的值
            tableData[trElem.data('index')][elem.attr('name')] = data.value;
            //修改状态 ....这里省略一个ajax请求... 传值:表单变化后的值传递到后台数据库进行实时修改,例如,根据id修改这条数据的状态。
			// 其他的操作看需求 TODO
            // 其他的操作看需求 TODO
        });

5. Data table, templet: "#selectClause" is the binding id, which is the id in the script tag

	//渲染表格组件
    tableInsT  = table.render({
        elem: '#tesc',
        url: '${pageContext.request.contextPath}/admin/compilation/list2?studentid='+data.studentid,
        cols: [[
             {type: 'checkbox', fixed: 'left',LAY_CHECKED:true,hide:true},
             {field: 'statementid', title: "statementid",width: 100,hide:true },
             {field: 'studentid', title: "#",width: 50},
             {field: 'moneyid', title: "moneyid",hide:true},
             {field: 'clauseid',title: "款项" ,align: "center",width:150,templet:"#selectClause"},
             {field: 'paymentid', title: "收费方式", align: "center" , width:110,templet: "#selectPayment"},
             {field: 'amountmoney', title: "金额",edit:'text', align: "center",width:120},
             {field: 'expendituretate', title: "支出", align: "center",width:70,templet:function (d){
                   return d.expendituretate == 1 ? "":"<font style=' padding: 5px; background: rgb(229 229 229);' color='#1E9FFF'>退费</font>";
                   }},
             {field: 'arrearage', title: "欠费",edit:'text', align: "center",width:120},
             {field: 'amend', title: "收费人",edit:'text', align: "center",width:100},
             {field: 'enterstate', title: "入账状态", align: "center" ,templet:'#selectEnterstate' ,width:150},
              {field: 'cancellationstate', title: '操作', width:100, toolbar: '#currentnnnn', align: "center"}
         ]],
            page: true,
     });

6. Set the style of the drop-down box and beautify it.

/*使下拉列表框不被遮挡*/
.layui-table-cell {
    overflow: visible !important;
}
/*使列表框与表格单元格重合*/
td .layui-form-select {
    margin-top: -10px;
    margin-left: -5px;
    margin-right: -5px;
}

7. The effect diagram of the nested drop-down box of the data table.

Insert picture description here