(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>
<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>
<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>
<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>