LayerUI的table 里面加 select 下拉框 - Fly社区

来源： table 里面加 select 下拉框 – Fly社区

先上效果图：

直接上代码

//添加样式：
.table-select-icon{position:absolute;right:10px;line-height:34px;color:#d3d3d3}
.table-select-selected dl{display:block}
.table-select dl{position:absolute;left:0;padding:5px 0;z-index:999;min-width:100%;border:1px solid #d2d2d2;max-height:300px;
    overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box}

.table-select dl dd{cursor:pointer}
.table-select dl dd,.table-select dl dt{padding:0 10px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-select dl dd.layui-this{background-color:#5FB878;color:#fff}
.table-select dl dd,.table-select dl dt{padding:0 10px;line-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-select dl dd:hover{background-color:#f2f2f2}

//表格 field  需要配置 event  和 templet
<th lay-data="{field:'type', width:120,align:'center', event: 'type', templet: '#selectTpl_type',}">商品类型</th>
//模版
<script type="text/html" id="selectTpl_type">
{{d.type}}<i class="layui-icon table-select-icon"></i>
</script>

//代码部分
layui.use(['layer',  'element',  'table',  'form', 'upload'], function(exports){
var $ = layui.jquery,
    form = layui.form,
    element = layui.element,
    upload = layui.upload,
    table  = layui.table;
//这里才是重点...
    (function($,doc,o){
      var tk;
      var obj;
      var otd;
      var callback;
      o.show = function(h,e,c){
        callback = c;
        var d =  doc.getElementById('table_type_select');
        if(d){
          d.remove();
        }
        otd = e;
        var s = '<div id="table_type_select" class="table-select"><dl class="layui-anim layui-anim-upbit" style="padding: 0px;top: 0px">';
        for(var k in h.data){
          if(h.value == h.data[k].value){
            s += '<dd lay-value="'+ h.data[k].value + '" class="layui-this">'+ h.data[k].text + '</dd>';
          }else{
            s += '<dd lay-value="'+ h.data[k].value + '" >'+ h.data[k].text + '</dd>';
          }
        }
        s += '</dl></div>';
        otd.innerHTML = s + otd.innerHTML;
        obj = doc.getElementById('table_type_select');
        //console.log($(obj));
        obj.onmouseout = function(){
          tk = 1;
          setTimeout(function() {
            if(tk){
              if(obj){
                ke = 0;
                obj.remove();
              }
            }
          }, 200);
        }
        obj.onmouseover = function(){
          tk = 0;
        }
        obj.addEventListener('click', function(e){
          var value = $(e.srcElement).attr('lay-value');
          var text = e.srcElement.innerHTML;
          obj.remove();
          callback({value:value,text:text});
        });
      }
    })($,document, window.type_select = {});
//监听表格事件
table.on('tool(goods_table)',function(obj){
    if(obj.event === 'type'){
        //显示下拉框框
        type_select.show({
          //设置当前选择的id
          value:obj.data.type_id,
          //下拉选择数据
          data:[{
            value: '0',
            text: '实物'
          },{
            value: '1',
            text: '积分'
          },{
            value: '2',
            text: '虚拟卡'
          },{
            value: '3',
            text: '充值'
          }]}, this, function(e){
            //回调函数 返回结果
            obj.data.type_id = e.value;
            obj.data.type = e.text;
            obj.update(obj.data);
            form.render();
          });
        }
    }

 刚学习JavaScript
自己折腾了这个。不知道有没有更好的