Layui 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

特别注意这几点:

 

 

 

 父页面刷新参考:

 

 

 

  希望对大家有帮助。本内容原创,转载请注明出处哈!

Tags: