layui 下拉表插件--改动

版权声明：如有雷同，纯属巧合！！！ https://blog.csdn.net/COCOLI_BK/article/details/87882787

原网址 ，tableSelect下拉表

最新的完善：主要当表格超出文档，会定位不准，改动源码部位在最后面，前面的 点搜索有问题！！！

改动及完善：

• 结构

  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">

  <style>
    .layui-form-label {
      width: 90px;
    }
  </style>
    
 <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">客户名称<i style="color:red;">*</i></label>
              <div class="layui-input-inline" style="position:relative ;">
                <input type="text" id="customerId" name="projectCustomerId" lay-verify="required" autocomplete="off" placeholder="搜索..."
                       class="layui-input"/>

              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">客户电话</label>
              <div class="layui-input-inline">
                <input type="text" id="customerTel" placeholder="" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>

• js代码

 layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
  }).extend({
    tableSelect: 'lib/tableSelect' //主入口模块
  }).use([ 'form', 'laydate','tableSelect'], function () {
    var $ = layui.jquery
      , form = layui.form
      , laydate = layui.laydate
      , tableSelect = layui.tableSelect ;
      console.log(tableSelect)
    lay('.lay-input-date').each(function () {
      laydate.render({
        elem: this,
        format: 'yyyy-MM-dd',
        type: 'date',
        trigger: 'click'
      })
    })

    //===============下拉树 渲染===========
    tableSelect.render({
      elem: '#customerId',         //所操作的元素
      searchKey: 'customerName',   //搜索输入框的 搜索所条件name
      searchPlaceholder: '名字筛选...', // 搜索框中的提示信息
      checkedKey: 'customerName',  // 利用复选框时的name
      table: {
        url: '/project/customer',  //数据的地址
        limit:5,   //返回限制条数
        width:350,    //表格宽度
        cols: [[
          { type: 'radio' },
          { field: 'customerId', title: '序号' },
          { field: 'customerName', title: '姓名' },
        ]]
      },
      done: function (elem, data) {
        console.log(JSON.stringify(data))
        var NEWJSON = []
        layui.each(data.data, function (index, item) {
          NEWJSON.push(item.customerName)  //双击时的name
        })
        elem.val(NEWJSON.join(","))

      //  由用户id查客户详细信息 type仅为 radio时 调用客户信息！！！！
       var customerId = data.data[0].customerId;
        getCustomerInfo(customerId);
      }
    });

    //=============由用户id查客户详细信息=============
    function getCustomerInfo(customerId){
        $.ajax({
          url: '/project/customer/' + customerId,
          type: "get",
          contentType: "application/json", //设置请求参数类型为json字符串
          dataType: "json",
          success: function (res) {
            console.log(res.status)
            if (res.status == 200) {
              layer.msg("查询成功", {
                icon: 6
              });

            // ==这里写渲染客户信息的函数==
              var data = res.data;
              //赋值客户信息
              setCustomerInfo(data)

            } else {
              layer.msg(res.msg, {
                icon: 5
              });
            }
          }
        })
    }

    // //==渲染客户信息==
    function setCustomerInfo(data){
      var customerAddress = data.customerAddress  //地址
        ,customerDepositBank =data.customerDepositBank  //开户行
        ,customerInvoiceTitle = data.customerInvoiceTitle   //开票抬头
        ,customerTel =data.customerTel   //客户电话
        ,customerTaxid = data.customerTaxid // 税号

        ,contacts = data.contacts  //联系电话数组



    }

    form.on('submit(component-form-element)', function (data) {
      layer.msg(JSON.stringify(data.field));
      var index = parent.layer.getFrameIndex(window.name); /* 先得到当前iframe层的索引 */
      parent.layer.close(index); //再执行关闭
      return false;
    });
  });

改动的源代码

• ---

    //FIX位置
        var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height();
        var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width();
        // overHeight && tableBox.css({'top':'auto','bottom':'0px'});
        overHeight && tableBox.css({'top':t,'left':l});  //直接还是赋值 上面的死值！！！
        overWidth && tableBox.css({'left':'auto','right':'5px'})