Layui treeSelect 回寫與對應選中
阿新 • • 發佈：2020-10-26
今天遇到個問題就是Layui treeSelect 的回寫與特定選中，網路上居然沒啥資料，有的也是不全的，於是花了點時間處理好了，這裡寫一下，方便以後有遇到的朋友借鑑。
一、父頁面
二、Form編輯框預設選中
三、點選查詢選中
選中的高亮狀態，重新選擇的可以回填。
四、注意事項
需要的是新增或者編輯開啟Form頁面自動渲染，如果選中的資料父ID是根部目錄，即pId=0，則回填，如果有pId，則需要回填，點選不替換狀態，treeSelect對應專案需要高亮，替換為新的目錄，需要能回填。
五、父頁面程式碼
1 //新增編輯 2 function addEdit(data) {View Code3 layer.open({ 4 type: 2 5 , title: (data ? "編輯" : "新增") + "選單" 6 , content: '/Menu/Form' 7 , maxmin: true 8 , area: ['350px', '400px'] 9 , btn: ['提交', '取消'] 10 , success: function (layero, index) {11 if (data) { 12 var content = layero.find("iframe").contents().find(".layui-form"); 13 for (var key in data) content.find("input[name='" + key + "']").val(data[key]); 14 //content.find("select[name='AccountType'] option[value='{0}']".format(data.AccountType)).prop("selected", true);15 layero.find("iframe")[0].contentWindow.layui.form.render(); 16 } 17 } 18 , yes: function (index, layero) { 19 var submit = layero.find('iframe').contents().find("#formSubmit"); 20 submit.click(); 21 } 22 });
需要注意的就是這句：
迴圈傳值，就是把選中的那條資料，對應的列值，傳遞給Form頁面對應的name值。
六、Form頁面
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <link rel="stylesheet" href="../layui/css/layui.css"> 8 <style> 9 .readonly { 10 background: #f2f2f2; 11 cursor: not-allowed; 12 } 13 14 .fileList > li { 15 float: left; 16 line-height: 30px; 17 margin-left: 16px; 18 } 19 20 .fileList > li a { 21 color: #0082be; 22 } 23 24 .fileList > li a:hover { 25 text-decoration: none; 26 } 27 </style> 28 </head> 29 <body class="layui-view-body" style="margin:2px;2px;2px;2px;background-color:#EAEAEA"> 30 <div class="layui-container"> 31 <div class="layui-row"> 32 <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"> 33 <div class="layui-form layui-form-pane" style="padding:8px"> 34 <input type="hidden" name="id" /> 35 <div class="layui-card"> 36 <div class="layui-card-body"> 37 <div class="layui-form-item item-width100"> 38 <label class="layui-form-label">上級選單</label> 39 <div class="layui-input-block"> 40 <input type="text" id="tree" name="pId" placeholder="請填寫上級選單名稱" class="layui-input" lay-filter="tree"> 41 </div> 42 </div> 43 <div class="layui-form-item item-width100"> 44 <label class="layui-form-label">選單圖示</label> 45 <div class="layui-input-block"> 46 <input type="text" name="icon" placeholder="請填寫上級選單圖示" class="layui-input"> 47 </div> 48 </div> 49 <div class="layui-form-item item-width100"> 50 <label class="layui-form-label"><span style="color:red">*</span>選單路徑</label> 51 <div class="layui-input-block"> 52 <input type="text" name="url" placeholder="請填寫選單路徑" class="layui-input" lay-verType="tips" lay-verify="required" required> 53 </div> 54 </div> 55 <div class="layui-form-item item-width100"> 56 <label class="layui-form-label"><span style="color:red">*</span>選單名稱</label> 57 <div class="layui-input-block"> 58 <input type="text" name="name" placeholder="請填寫選單名稱" class="layui-input" lay-verType="tips" lay-verify="required" required> 59 </div> 60 </div> 61 <div class="layui-form-item item-width100"> 62 <label class="layui-form-label"><span style="color:red">*</span>排序編號</label> 63 <div class="layui-input-block"> 64 <input type="number" name="sort" placeholder="請填寫排序編號" class="layui-input" lay-verType="tips" lay-verify="required|number" required> 65 </div> 66 </div> 67 </div> 68 </div> 69 <div class="layui-form-item layui-hide"> 70 <input type="button" lay-submit lay-filter="formSubmit" id="formSubmit"> 71 </div> 72 </div> 73 </div> 74 </div> 75 </div> 76 77 <script src="../layui/layui.all.js"></script> 78 <script src="../js/jquery-3.1.1.min.js"></script> 79 <script type="text/javascript"> 80 //引用第三方外掛 treeselect 81 layui.config({ 82 base: '../js/' 83 }).extend({ 84 treeSelect: 'treeSelect/treeSelect', 85 }); 86 87 layui.use(['treeSelect', 'form', 'layer'], function () { 88 var $ = layui.jquery; 89 var treeSelect = layui.treeSelect; 90 var form = layui.form; 91 var layer = layui.layer 92 93 //載入上級選單樹 94 treeSelect.render({ 95 elem: '#tree', 96 //data: '../json/data3.json', 97 data: '../Menu/GetMenuTree', 98 type: 'get', 99 placeholder: '請選擇上級選單', 100 search: true, 101 style: { 102 folder: { enable: false }, 103 line: { enable: true } 104 }, 105 // 點選回撥 106 click: function (d) { 107 $('#tree').val(d.current.id); 108 }, 109 // 載入完成後的回撥函式 110 success: function (d) { 111 //獲取返回的父節點 112 var pIdValue = $("#tree").val(); 113 114 if (pIdValue !== 0 && pIdValue !== null && pIdValue !== "" && pIdValue !== undefined) { 115 //預設選中節點，根據id篩選 116 treeSelect.checkNode('tree', pIdValue); 117 } 118 119 // 獲取zTree物件，可以呼叫zTree方法 120 //var treeObj = treeSelect.zTree('tree'); 121 122 ////重新整理樹結構 123 //treeSelect.refresh('tree'); 124 } 125 }); 126 127 //監聽提交 128 form.on("submit(formSubmit)", function (data) { 129 var entity = data.field, index = parent.layer.getFrameIndex(window.name); 130 $.ajax({ 131 url: "../Menu/SaveMenu", 132 type: "get", 133 dataType: "json", 134 data: { strJson: JSON.stringify(data.field) }, 135 success: function (res) { 136 if (res.code == 0) { 137 layer.msg(res.msg, { icon: 1 }); 138 setTimeout(function () { 139 parent.layer.close(index); 140 //parent.layui.table.reload("menuTable"); 141 window.parent.location.reload();//重新整理父頁面 142 }, 500) 143 } else { 144 layer.msg(res.msg, { icon: 2 }); 145 } 146 } 147 }); 148 }); 149 }); 150 </script> 151 </body> 152 </html>View Code
特別注意這幾點：
父頁面重新整理參考：
希望對大家有幫助。本內容原創，轉載請註明出處哈!