被Layui坑过的那些天之TreeSelect
我tm服了 ,今天select check功能不管用了。看了下源码如下:
/** * 选中节点,因为tree是异步加载,所以必须在success回调中调用checkNode函数,否则无法获取生成的DOM元素 * @param filter lay-filter属性 * @param id 选中的id */ TreeSelect.prototype.checkNode = function (filter, id) { var o = obj.filter(filter), treeInput = o.find('.layui-select-title input'), treeObj = obj.treeObj(filter), node = treeObj.getNodeByParam("id", id, null), name = node.name; treeInput.val(name); o.find('a[treenode_a]').removeClass('curSelectedNode'); treeObj.selectNode(node); };
它位于treeselect.js 是layui的重要组成部分,看注释可以知道,
<div class="layui-block"> <label class="layui-form-label">具体地址</label> <div class="layui-input-block"> <div id="addressDetail"> <input id="dizhi" type="text" name="dizhi" lay-verify="" autocomplete="off" placeholder="请输入具体地址" class="layui-input"> @*<dl id="addressTip" class="addressDl"></dl>*@ </div> </div> </div> </div>
var treeSelect = layui.treeSelect; treeSelect.render({ elem: '#areas', data: apiUrl + "/api/Base_Region/GetRegionAndChildrenListTreeAsync", type: 'GET', placeholder: '地址', search: true, click: function (d) { $("#area").val(d.current.id); var parmas = { url: "/api/Base_Region/GetItem?id=" + d.current.id, type: 'POST' }; interaction(parmas).then(data => { $("#dizhi").val(data); layer.msg("已选择" + data, { icon: 1, time: 2000 }, function () { }); }).catch(err => { }); }, success: function (d) { bindInfo(); } });
var mc_util = youyaboot_all; var identify = mc_util.getParameter('id')//从url中检测主键 function bindInfo() { // alert(identify); if (identify != null && identify != '') { var parmas = { url: "/api/Sys_Organization/GetItem?id=" + identify, type: 'POST' }; interaction(parmas).then(data => { if (data.pic != "") { $("#imgBtn").attr("src", apiUrl + data.pic); } pca.init('select[name=province]', 'select[name=city]', 'select[name=area]', data.province, data.city,data.area); mc_util.mappingEntityToFormUiValue($("body"), data); form.render(); treeSelect.checkNode('tree2', data.parentid); treeSelect.checkNode('tree3', data.area); }).catch(err => { console.log(err); }); } else { $("#parentid").val(mc_util.getParameter('parentid')); pca.init('select[name=province]', 'select[name=city]', 'select[name=area]'); if (mc_util.getParameter('parentid') != 0) { treeSelect.checkNode('tree2', mc_util.getParameter('parentid')); treeSelect.checkNode('tree3', data.area); } } }
分类:
Layui Life
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
2019-01-02 Vue基于vue-quill-editor富文本编辑器使用心得