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

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

数据表格:

 var n = {
     title: '变更后处室', field: 'useDepartIdAfter',width: 200,
     templet: function (d) {
          var layIndex = d.LAY_INDEX; //当前表格行数
          if(d.useDepartIdBefore) {
              //根据变更前处室调用函数,获取变更后处室下拉框数据
              layui.getUseDepartIdBeforeOption(d.useDepartIdBefore, '.lay_' + layIndex);
          }
          return '
'
; } };

发送请求的请求函数:

 // 暴露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 += ' data1[x].id + '">' + data1[x].departname + ''
             }
             $(selectClassName).html(useDepartOptions);
             form.render(); //layui中填充完数据后必须调用此方法渲染下表单,且数据表格中的下拉框必须包含在"class = layui-form" 的div中
         });
     });
 });

你可能感兴趣的:(js,IE,前端)