layui 动态渲染数据表格中下拉框的选项值

今天药忘吃喽~ 2023-02-13 11:15 37阅读 0赞

思路：根据layui数据表格中 `templet`属性中的LAY\_INDEX字段动态生成下拉框的class，在渲染表格的时候发送请求，根据select.class操纵dom将接口返回数据填充到select下拉框中。

数据表格：

发送请求的请求函数：

// 暴露layui注册事件内部方法
     layui.define(['layer', 'table', 'form'], function (exports) { 
         var table = layui.table, form = layui.form;
         exports('getUseDepartIdBeforeOption', function (useDepartIdBefore, selectClassName) { //函数参数
             callAPIOptions("/newdepart.do?getDepartsBySameDepartments", 'departId='+useDepartIdBefore, function(data1) { 
                 var useDepartOptions = '';
                 for(var x = 0; x < data1.length; x++) { 
                     useDepartOptions += '<option value = "' + data1[x].id + '">' + data1[x].departname + '</option>'
                 }
                 $(selectClassName).html(useDepartOptions);
                 form.render(); //layui中填充完数据后必须调用此方法渲染下表单，且数据表格中的下拉框必须包含在"class = layui-form" 的div中
             });
         });
     });