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 });
需要注意的就是这句：
循环传值，就是把选中的那条数据，对应的列值，传递给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>
特别注意这几点：
父页面刷新参考：
希望对大家有帮助。本内容原创，转载请注明出处哈!
Layui treeSelect 回写与对应选中的更多相关文章
- Page Cache与Page回写
综述 Page cache是通过将磁盘中的数据缓存到内存中,从而减少磁盘I/O操作,从而提高性能.此外,还要确保在page cache中的数据更改时能够被同步到磁盘上,后者被称为page回写(page ...
- JMeter--使用URL回写来处理用户会话
如果测试的Web应用系统使用URL回写而非Cookie来保存会话信息,那么测试人员需要做一些额外的工作来测试web站点 为了正确回应URL回写,JMeter需要解析从服务器收到的HTML,并得到唯一的 ...
- JMeter学习笔记--使用URL回写来处理用户会话
如果测试的Web应用系统使用URL回写而非Cookie来保存会话信息,那么测试人员需要做一些额外的工作来测试web站点 为了正确回应URL回写,JMeter需要解析从服务器收到的HTML,并得到唯一的 ...
- 使用layui的form.on绑定select选中事件, form.on()不执行的原因分析
使用layui的form.on绑定select选中事件中, form.on()不执行, 主要原因有 1, select标签中没有写lay_filter属性,用来监听 <select id=&qu ...
- ZTSD_008_1表没有某订单数据，无法回写交期
ZTSD_008_1表没有某订单数据,无法回写交期, 取系SAP组检查执行此RFC:ZFM_FP_025_1 为什么没有将数据导进来 select * from SAPSR3.ZTSD_008_1@S ...
- SAP无损耗，FP前台和回写均有2%损耗
SAP前台显示无损耗 FP前台显示有损耗 回写也有损耗 检查:从SAP取数到FP表是没有损耗 1132物料编码的主数据也是没有损耗 检查:FP_MO2SAP存储过程
- 《Linux内核设计与实现》读书笔记（十六）- 页高速缓存和页回写
好久没有更新了... 主要内容: 缓存简介 页高速缓存 页回写 1. 缓存简介 在编程中,缓存是很常见也很有效的一种提高程序性能的机制. linux内核也不例外,为了提高I/O性能,也引入了缓存机制, ...
- 使用client对象模型回写SharePoint列表
使用client对象模型回写SharePoint列表 client对象模型是一个有效的方式回写SharePoint列表. 1. 管理员身份打开VS,新建WPF应用程序SPWriteListApp,确保 ...
- Linux页快速缓存与回写机制分析
參考 <Linux内核设计与实现> ******************************************* 页快速缓存是linux内核实现的一种主要磁盘缓存,它主要用来降低 ...
随机推荐
- 虚拟机系列 | JVM类加载机制
本文源码:GitHub·点这里 || GitEE·点这里 一.类加载简介 类的加载机制是指把编译后的.class类文件的二进制数据读取到内存中,并为之创建一个java.lang.Class对象,用来封 ...
- 利用glog打印日志
glog出自互联网豪门google,质量有保证,轻量级,入门简单,功能较全,线程安全.有关glog的打印细节本篇文章不再赘述,网上一大堆的资料,参考:glog日志库使用笔记. glog的托管地址:gi ...
- gRPC-go 入门（1）：Hello World
摘要 在这篇文章中,主要是跟你介绍一下gRPC这个东西. 然后,我会创建一个简单的练习项目,作为gRPC的Hello World项目. 在这个项目中,只有很简单的一个RPC函数,用于说明gRPC的工作 ...
- [SUCTF 2019]EasySQL1 及sql_mode
(我被虐到了,呜呜呜) 当 sql_mode 设置了 PIPES_AS_CONCAT 时,|| 就是字符串连接符,相当于CONCAT() 函数 当 sql_mode 没有设置 PIPES_AS_CON ...
- 转载：关于Python3中venv虚拟环境
https://www.cnblogs.com/zhaof/p/7299025.html
- python下正则表达式的随笔记录
使用了下正则的表达式: 目的:取出字符串中{}中的内容 最后使用的正则表达式为 {(.*?)} 先看 .*? : 首先 . 是用来匹配字符串,但是只能匹配一次. 所以加上 * ,可以让 ...
- C/的常用位运算符
双目运算符 位逻辑运算符 有6种位运算: & 与运算 | 或运算 ^ 异或运算 ! 非运算(求补) >> 右移运算 << 左移运算 与运算(&)双目运算.二个位 ...
- JDK1.8新特性之（一）--Lambda表达式
近期由于新冠疫情的原因,不能出去游玩,只能在家呆着.于是闲来无事,开始阅读JDK1.8的源代码.在开始之前也查询了以下JDK1.8的新特性,有针对性的开始了这段旅程. 只看不操作,也是不能心领神会的. ...
- IntelliJ IDEA Commons IO环境搭建
IntelliJ IDEA版本信息 1.打开.或新建工程之后,点击菜单File > Project Structure... 2.在Project Structure窗口中,选Project S ...
- JDK 中的栈竟然是这样实现的？
前面的文章<动图演示:手撸堆栈的两种实现方法!>我们用数组和链表来实现了自定义的栈结构,那在 JDK 中官方是如何实现栈的呢?接下来我们一起来看. 这正式开始之前,先给大家再解释一下「堆栈 ...