今天遇到个问题就是Layui treeSelect 的回写与特定选中，网络上居然没啥资料，有的也是不全的，于是花了点时间处理好了，这里写一下，方便以后有遇到的朋友借鉴。

一、父页面

二、Form编辑框默认选中

三、点击查询选中

选中的高亮状态，重新选择的可以回填。

  

四、注意事项

需要的是新增或者编辑打开Form页面自动渲染，如果选中的数据父ID是根部目录，即pId=0，则回填，如果有pId，则需要回填，点击不替换状态，treeSelect对应项目需要高亮，替换为新的目录，需要能回填。

五、父页面代码

  1.  1 //新增编辑
  2.  2         function addEdit(data) {
  3.  3             layer.open({
  4.  4                 type: 2
  5.  5                 , title: (data ? "编辑" : "新增") + "菜单"
  6.  6                 , content: '/Menu/Form'
  7.  7                 , maxmin: true
  8.  8                 , area: ['350px', '400px']
  9.  9                 , btn: ['提交', '取消']
  10. 10                 , success: function (layero, index) {
  11. 11                     if (data) {
  12. 12                         var content = layero.find("iframe").contents().find(".layui-form");
  13. 13                         for (var key in data) content.find("input[name='" + key + "']").val(data[key]);
  14. 14                         //content.find("select[name='AccountType'] option[value='{0}']".format(data.AccountType)).prop("selected", true);
  15. 15                         layero.find("iframe")[0].contentWindow.layui.form.render();
  16. 16                     }
  17. 17                 }
  18. 18                 , yes: function (index, layero) {
  19. 19                     var submit = layero.find('iframe').contents().find("#formSubmit");
  20. 20                     submit.click();
  21. 21                 }
  22. 22             });

需要注意的就是这句：

循环传值，就是把选中的那条数据，对应的列值，传递给Form页面对应的name值。

六、Form页面

  1.   1 <!DOCTYPE html>
  2.   2 <html lang="zh-CN">
  3.   3 <head>
  4.   4     <meta charset="UTF-8">
  5.   5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.   7     <link rel="stylesheet" href="../layui/css/layui.css">
  8.   8     <style>
  9.   9         .readonly {
  10.  10             background: #f2f2f2;
  11.  11             cursor: not-allowed;
  12.  12         }
  13.  13
  14.  14         .fileList > li {
  15.  15             float: left;
  16.  16             line-height: 30px;
  17.  17             margin-left: 16px;
  18.  18         }
  19.  19
  20.  20             .fileList > li a {
  21.  21                 color: #0082be;
  22.  22             }
  23.  23
  24.  24                 .fileList > li a:hover {
  25.  25                     text-decoration: none;
  26.  26                 }
  27.  27     </style>
  28.  28 </head>
  29.  29 <body class="layui-view-body" style="margin:2px;2px;2px;2px;background-color:#EAEAEA">
  30.  30     <div class="layui-container">
  31.  31         <div class="layui-row">
  32.  32             <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
  33.  33                 <div class="layui-form layui-form-pane" style="padding:8px">
  34.  34                     <input type="hidden" name="id" />
  35.  35                     <div class="layui-card">
  36.  36                         <div class="layui-card-body">
  37.  37                             <div class="layui-form-item item-width100">
  38.  38                                 <label class="layui-form-label">上级菜单</label>
  39.  39                                 <div class="layui-input-block">
  40.  40                                     <input type="text" id="tree" name="pId" placeholder="请填写上级菜单名称" class="layui-input" lay-filter="tree">
  41.  41                                 </div>
  42.  42                             </div>
  43.  43                             <div class="layui-form-item item-width100">
  44.  44                                 <label class="layui-form-label">菜单图标</label>
  45.  45                                 <div class="layui-input-block">
  46.  46                                     <input type="text" name="icon" placeholder="请填写上级菜单图标" class="layui-input">
  47.  47                                 </div>
  48.  48                             </div>
  49.  49                             <div class="layui-form-item item-width100">
  50.  50                                 <label class="layui-form-label"><span style="color:red">*</span>菜单路径</label>
  51.  51                                 <div class="layui-input-block">
  52.  52                                     <input type="text" name="url" placeholder="请填写菜单路径" class="layui-input" lay-verType="tips" lay-verify="required" required>
  53.  53                                 </div>
  54.  54                             </div>
  55.  55                             <div class="layui-form-item item-width100">
  56.  56                                 <label class="layui-form-label"><span style="color:red">*</span>菜单名称</label>
  57.  57                                 <div class="layui-input-block">
  58.  58                                     <input type="text" name="name" placeholder="请填写菜单名称" class="layui-input" lay-verType="tips" lay-verify="required" required>
  59.  59                                 </div>
  60.  60                             </div>
  61.  61                             <div class="layui-form-item item-width100">
  62.  62                                 <label class="layui-form-label"><span style="color:red">*</span>排序编号</label>
  63.  63                                 <div class="layui-input-block">
  64.  64                                     <input type="number" name="sort" placeholder="请填写排序编号" class="layui-input" lay-verType="tips" lay-verify="required|number" required>
  65.  65                                 </div>
  66.  66                             </div>
  67.  67                         </div>
  68.  68                     </div>
  69.  69                     <div class="layui-form-item layui-hide">
  70.  70                         <input type="button" lay-submit lay-filter="formSubmit" id="formSubmit">
  71.  71                     </div>
  72.  72                 </div>
  73.  73             </div>
  74.  74         </div>
  75.  75     </div>
  76.  76
  77.  77     <script src="../layui/layui.all.js"></script>
  78.  78     <script src="../js/jquery-3.1.1.min.js"></script>
  79.  79     <script type="text/javascript">
  80.  80         //引用第三方插件 treeselect
  81.  81         layui.config({
  82.  82             base: '../js/'
  83.  83         }).extend({
  84.  84             treeSelect: 'treeSelect/treeSelect',
  85.  85         });
  86.  86
  87.  87         layui.use(['treeSelect', 'form', 'layer'], function () {
  88.  88             var $ = layui.jquery;
  89.  89             var treeSelect = layui.treeSelect;
  90.  90             var form = layui.form;
  91.  91             var layer = layui.layer
  92.  92
  93.  93             //加载上级菜单树
  94.  94             treeSelect.render({
  95.  95                 elem: '#tree',
  96.  96                 //data: '../json/data3.json',
  97.  97                 data: '../Menu/GetMenuTree',
  98.  98                 type: 'get',
  99.  99                 placeholder: '请选择上级菜单',
  100. 100                 search: true,
  101. 101                 style: {
  102. 102                     folder: { enable: false },
  103. 103                     line: { enable: true }
  104. 104                 },
  105. 105                 // 点击回调
  106. 106                 click: function (d) {
  107. 107                     $('#tree').val(d.current.id);
  108. 108                 },
  109. 109                 // 加载完成后的回调函数
  110. 110                 success: function (d) {
  111. 111                     //获取返回的父节点
  112. 112                     var pIdValue = $("#tree").val();
  113. 113
  114. 114                     if (pIdValue !== 0 && pIdValue !== null && pIdValue !== "" && pIdValue !== undefined) {
  115. 115                         //默认选中节点，根据id筛选
  116. 116                         treeSelect.checkNode('tree', pIdValue);
  117. 117                     }
  118. 118
  119. 119                     // 获取zTree对象，可以调用zTree方法
  120. 120                     //var treeObj = treeSelect.zTree('tree');
  121. 121
  122. 122                     ////刷新树结构
  123. 123                     //treeSelect.refresh('tree');
  124. 124                 }
  125. 125             });
  126. 126
  127. 127             //监听提交
  128. 128             form.on("submit(formSubmit)", function (data) {
  129. 129                 var entity = data.field, index = parent.layer.getFrameIndex(window.name);
  130. 130                 $.ajax({
  131. 131                     url: "../Menu/SaveMenu",
  132. 132                     type: "get",
  133. 133                     dataType: "json",
  134. 134                     data: { strJson: JSON.stringify(data.field) },
  135. 135                     success: function (res) {
  136. 136                         if (res.code == 0) {
  137. 137                             layer.msg(res.msg, { icon: 1 });
  138. 138                             setTimeout(function () {
  139. 139                                 parent.layer.close(index);
  140. 140                                 //parent.layui.table.reload("menuTable");
  141. 141                                 window.parent.location.reload();//刷新父页面
  142. 142                             }, 500)
  143. 143                         } else {
  144. 144                             layer.msg(res.msg, { icon: 2 });
  145. 145                         }
  146. 146                     }
  147. 147                 });
  148. 148             });
  149. 149         });
  150. 150     </script>
  151. 151 </body>
  152. 152 </html>

特别注意这几点：

父页面刷新参考：

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

Layui treeSelect 回写与对应选中的更多相关文章

  1. Page Cache与Page回写

    综述 Page cache是通过将磁盘中的数据缓存到内存中,从而减少磁盘I/O操作,从而提高性能.此外,还要确保在page cache中的数据更改时能够被同步到磁盘上,后者被称为page回写(page ...

  2. JMeter--使用URL回写来处理用户会话

    如果测试的Web应用系统使用URL回写而非Cookie来保存会话信息,那么测试人员需要做一些额外的工作来测试web站点 为了正确回应URL回写,JMeter需要解析从服务器收到的HTML,并得到唯一的 ...

  3. JMeter学习笔记--使用URL回写来处理用户会话

    如果测试的Web应用系统使用URL回写而非Cookie来保存会话信息,那么测试人员需要做一些额外的工作来测试web站点 为了正确回应URL回写,JMeter需要解析从服务器收到的HTML,并得到唯一的 ...

  4. 使用layui的form.on绑定select选中事件, form.on()不执行的原因分析

    使用layui的form.on绑定select选中事件中, form.on()不执行, 主要原因有 1, select标签中没有写lay_filter属性,用来监听 <select id=&qu ...

  5. ZTSD_008_1表没有某订单数据，无法回写交期

    ZTSD_008_1表没有某订单数据,无法回写交期, 取系SAP组检查执行此RFC:ZFM_FP_025_1 为什么没有将数据导进来 select * from SAPSR3.ZTSD_008_1@S ...

  6. SAP无损耗，FP前台和回写均有2%损耗

    SAP前台显示无损耗 FP前台显示有损耗 回写也有损耗 检查:从SAP取数到FP表是没有损耗 1132物料编码的主数据也是没有损耗 检查:FP_MO2SAP存储过程

  7. 《Linux内核设计与实现》读书笔记（十六）- 页高速缓存和页回写

    好久没有更新了... 主要内容: 缓存简介 页高速缓存 页回写 1. 缓存简介 在编程中,缓存是很常见也很有效的一种提高程序性能的机制. linux内核也不例外,为了提高I/O性能,也引入了缓存机制, ...

  8. 使用client对象模型回写SharePoint列表

    使用client对象模型回写SharePoint列表 client对象模型是一个有效的方式回写SharePoint列表. 1. 管理员身份打开VS,新建WPF应用程序SPWriteListApp,确保 ...

  9. Linux页快速缓存与回写机制分析

    參考 <Linux内核设计与实现> ******************************************* 页快速缓存是linux内核实现的一种主要磁盘缓存,它主要用来降低 ...

随机推荐

  1. 1000000 / 60S 的 RocketMQ 不停机，扩容，平滑升级！

    一.背景 1.各业务系统持续迭代过程中,JDK.SpringBoot.RocketMQ Client 等框架也进行了升级,高版本的 RocketMQ Client 发送的消息到低版本中,在控制台中午无 ...

  2. Oracle学习（十六）Oracle安装

    为了本地创建数据库自己玩耍,还是下个Oracle的客户端吧... 一.下载地址 注意,要用Oracle的帐号进行登录后才能下载 http://download.oracle.com/otn/nt/or ...

  3. Java JVM参数在idea里面配置

    找到你需要配置的启动类选择 接着点击Edit Configurations 在VM options里面配置就完成了

  4. [Abp vNext 源码分析] - 21. 界面与文字的本地化

    一.简介 ABP vNext 提供了全套的本地化字符串支持,具体用法可以参考官方使用文档.vNext 本身是对 Microsoft 提供的本地化组件进行了实现,通过 JSON 文件提供本地化源,这一点 ...

  5. ios7.1发布企业证书测试包的问题

    关于升级了ios7.1之后发布企业版证书的测试包不能下载的问题,这个苹果也挺坑的,什么都不说,也不警告一下,直接就不能用了 用xcode的organizer里面的console里发现安装的时候提示这个 ...

  6. spring+springmvc+mybatis+shiro

    创建maven框架https://blog.csdn.net/Ajax_mt/article/details/78549119 具体下边 https://blog.csdn.net/w2222288/ ...

  7. linux系统或centos7安装nginx

    一.Linux下安装nginx 1.添加源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-cen ...

  8. ESP8266 玩板记

    一.前言 esp8266的玩板记,后面应该会去更一些其他东西,这一块内容,这算是收官之战了. IoT,江湖有缘再相会 二.ESP8266实现WiFi杀手/钓鱼 这次的博客做的是一个娱乐性较强的项目. ...

  9. CentOS7 没有安装 ifconfig 命令

    ifconfig 命令是设置或显示网络接口的程序,可以显示出我们机器的网卡信息. 除此之外, ip a 命令,也可以设置或显示网卡的信息 在 CentOS 7 下,默认 ifconfig 命令是没有安 ...

  10. Scala小记（一）

    Scala小记----初识Scala 一,什么是Scale? Scala是一门面向对象的,使用JVM运行的函数式编程语言,(函数式编程语言:指的就是那些将方法或者说是函数来作为参数 进行传递的编程语言 ...