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>