Layui treeSelect 回写与对应选中
layui、treeTable、treeSelect、回写
今天遇到个问题就是Layui treeSelect 的回写与特定选中，网络上居然没啥资料，有的也是不全的，于是花了点时间处理好了，这里写一下，方便以后有遇到的朋友借鉴。
一、父页面
二、Form编辑框默认选中
三、点击查询选中
选中的高亮状态，重新选择的可以回填。
四、注意事项
需要的是新增或者编辑打开Form页面自动渲染，如果选中的数据父ID是根部目录，即pId=0，则回填，如果有pId，则需要回填，点击不替换状态，treeSelect对应项目需要高亮，替换为新的目录，需要能回填。
五、父页面代码
1 //新增编辑 2 function addEdit(data) { 3 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 });
View Code
需要注意的就是这句：
循环传值，就是把选中的那条数据，对应的列值，传递给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
特别注意这几点：
父页面刷新参考：
希望对大家有帮助。本内容原创，转载请注明出处哈!
版权声明：本文为xiaobaicai12138原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。