layui使用小记

layui

1. table 数据表格

• 使用内置模块table生成表格，根据文档说明使用table.render 自动渲染表格

   (1)  body体里面需要用到表格的地方
   <table class="layui-table" id="test" hidden></table>
  

   (2)  js动态渲染表格，官方文档给出了两种写法，根据引入的js文件不同选择不同的写法
   <script>
       $(window).load(function () {
           var table = layui.table;
           table.render({
               id: "list", //表格的唯一标识
               elem: '#test', //选择的元素，使用id选择器
               url:'get_info', //表格数据来源，使用url必须返回固定的数据格式，也可以使用ajax异步请求，将处理好的数据给data属性
               page: 'true', //是否分页
               cols: [[ //表头
                   {type:'checkbox'}, //是否渲染复选框
                 {field:'create_time', title:'创建时间', width:160}  // field 对应的值为后台返回数据的key值， title是页面显示的表头
                 ,{field:'name', title:'名称', width:120, }
                 ,{field:'desc', title:'描述', width:130, }
                 ,{field:'status', title:'状态', width:80, } 
                 ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:110} //barDemo为操作栏的id
               ]],
           {#data: data#}  //表格数据，data格式为列表包字典，字典key值对应表头field字段，有url则不需要data
        });
       });
   </script>
  

• 记录自己需要注意的几个点
  （1）统一设置单元格样式

  <style>
     // 匹配单元格classname设置样式
     [class^=" laytable-cell"] { //匹配classname以 laytable-cell开头的class
         padding: 4px;
         padding-left: 6px;
         height: auto;
         overflow: visible;
         text-overflow: inherit;
         white-space: normal;
     }
  </style>
  

  （2）设置操作栏的时候，需要根据某一列的值不同对应不同的操作，这样就可以实现只有一个按钮但是不同行操作不同，官网给的示例在django渲染的时候会报错，需要加上verbatim，如下示例两个按钮触发事件是同一个，在事件中对值进行判断即可完成不同操作，附上js代码

    <script type="text/html" id="barDemo">
     {% verbatim %}
        {{# if(d.status == "delete"){ }}
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="del">发布</a>
        {{#} else { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="del">删除</a>
        {{#} }}
     {% endverbatim %}
    </script>
  

  js代码

    table.on('tool(test)', function(obj){
          var data = obj.data; //操作的该行数据
          var on = this;
          var hint = '确定删除吗';
          var func = "delete";
          var text = "发布";
          if ($(on).html()==="上线"){
              hint = '确定发布吗';
              func = "publish";
              text = "删除"
          }
          if(obj.event === 'del') {
              layer.confirm(hint, function (index) { //将操作类型传回后台，一个url即可完成两种操作
                  $.get("delete",{"name":data["name"],"func":func}, function(data){
                      if (data.code===0) {
                          $(on).text(text);
                          layer.close(index);
                          window.location.reload()
                        }else {
                          layer.close(index);
                          layer.msg(text+"失败")
                       }
                    })
               });
             }
         })
     });
    </script>
  

  （3）保持表头不动，设置表格最高高度，超出高度显示滚动条，在render 里面加height的话为固定高度，即数据较少时会有空白部分，解决方案为设置表格的max-height

  <style type="text/css">
     [class="layui-table-body layui-table-main"] {
         max-height: 137px;
     }
  </style>
  

2. select 表单带输入搜索的下拉框

• 官方给的推荐是加lay-search就可以了，测试不生效，应该是版本不对，使用拼接方式自己做了个一样的
  • html

     <div class="layui-form-select">
         <div class="layui-select-title"  onclick="select()">
           <input type="text" placeholder="带搜索的选择框" value="" oninput="change_se(this.value)" id="input_m" class="layui-input">
           <i class="layui-edge"></i> // 三角符号
         </div>
          <dl class="layui-anim layui-anim-upbit" style="" id="select">
             {% for v in list %}
                 <dd value={{ v }} class="" onclick="change_s(this)">{{ v }}</dd>
             {% empty %}
                 <dd value="" class="">暂无可选择数据</dd>
             {% endfor %}
         </dl>
      </div>
       <div id="selected" style="border: 1px solid #fff;overflow-y:auto; max-height: 120px"></div> //选择的元素以button形式出现在下方
   </div>
  

  • js

   <script>
   // 控制下拉框，根据当前下拉框display修改该属性使得点击下拉框出现隐藏生效
   function select() {
       var select = document.getElementById("select");
       var dis = select.style.display;
       if (dis==="none"){
           select.style.display="inline";
       }else {    select.style.display="none";}
   }
   // 输入框输入的时候显示下拉框且显示匹配输入内容的值，使用比较原始的方式，匹配到则显示，匹配不到则隐藏
   function change_se(val) {
       var select = document.getElementById("select");
       var dd_info = $("dd");
       var length = dd_info.length;
       for (i=0;i<length;i++){
           if (dd_info[i].innerText.match(val)==null){
               dd_info[i].className="layui-hide";
           }else {
               dd_info[i].className="";
           }
       }
       select.style.display="inline";
   }
   // 选择下拉框中的值的时候触发，首先再次点击下拉框已经选择的不能再出现，避免重复选择，其次将选择的内容添加到下方div
   function change_s(val) {
       var select = document.getElementById("select");
       // 为了获取选择的值给点击的对象设置id
       $(val).attr("id","test");
       var onthis = document.getElementById("test");
       var dd_info = $("dd");
       // 获取下方已选择的数据，避免重复选择
       var se = document.getElementsByClassName("input-s");
       var length = se.length;
       var ses = [];
       for (i=0;i<length;i++) {
           // 将已经选择的值加入数组
           ses.push(se[i].value);
       }
       v = onthis.innerText;
       // 如果当前点击值不在已选择数组中，添加对象到div
       if (ses.indexOf(v)<0){
           var test = '<div class="se" style="float: left; position:relative;padding: 7px;padding-right: 16px;margin: 5px;background: #1E9FFF" >\n' +
           '<input type="button" class="input-s"  style="border:none;margin: 0;padding: 0;background: #1E9FFF;color:#ffffff;"             value=' + v + '>\n' +
           '<input type="button" class="layui-hide" value="×" onclick="del(this)" style="position: absolute; border:none;margin-left: 4px;margin-top:-11px;padding: 0;background:transparent;font-size: 20px;color:#ffffff;">\n' +
           '</div>';
           $("#selected").append(test)
       }
       document.getElementById("input_m").value=v;
       $(val).attr("id","");
       select.style.display="none";
       var d_length = dd_info.length;
       for (j=0;j<d_length;j++){
           if (ses.indexOf(dd_info[j].innerText)>=0){
               dd_info[j].className="layui-hide";
           }else {
               dd_info[j].className="";
           }
       onthis.className="layui-hide";
       }
   }
  </script>
  <script>
       // 鼠标悬浮按钮上显示删除
       let select = document.getElementById("selected");
       select.addEventListener("mouseover", function(e) {
           target = e.target;
           if (e.target.type==="button") {
               target = target.parentElement;
           }
           var c = target.children;
           if (c.length===2 && c[1].type==="button"){
               c[1].className=""
           }
       });
       select.addEventListener("mouseout", function(e) {
           target = e.target;
           if (e.target.type==="button") {
               target = target.parentElement;
           }
           var c = target.children;
           if (c.length===2 && c[1].type==="button"){
               c[1].className="layui-hide"
           }
       });
   </script>