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>
相關文章
相關標籤/搜索