layui treeSelect checkNode无法选中节点

【LayUI】LayUI拓展组件:TreeSelect树形下拉选择器 基于 layui 的树形下拉选择器。支持异步加载,提供点击回调函数,提供设置占位符、选中节点等方法。组件下载地址:https://gitee.com/sang93/treeselect。 阅读详情

/**
   * 选中节点,因为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);
  };

 

问题出在treeObj = obj.treeObj(filter) 根本选不到该控件,这个地方treeObj无对象返回,不知道Layui是怎么回事,demo是没问题的,到我的项目中就出问题了。有可能版本不对吧

 

问题找到了,只能解决。下面贴出我解决的代码

<div class="layui-inline layui-col-md4">
 <label class="layui-form-label bg-blue">实施人员</label>
 <div class="layui-input-block"  >
  <input type="text" class="layui-input" lay-filter="tree" id="tree"/>
 </div>
</div>




layui.use(["treeSelect"], function () {
            var treeSelect = layui.treeSelect;
            treeSelect.render({
                // 选择器
                elem: '#tree',
                // 数据
                data: 'project/getMemberList.do',
                // 异步加载方式:get/post,默认get
                type: 'get',
                // 是否开启搜索功能:true/false,默认false
                search: true,
                // 一些可定制的样式
                style: {
                    folder: {
                        enable: true
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function(d){
                    console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    console.log(d);
//                选中节点,根据id筛选
                    treeSelect.checkNode('tree', ${data.id},d.treeId);
                }
            });

 

treeSelect.checkNode('tree', ${data.id},d.treeId);在这我加了个传参d.treeId

下面再看我treeSelect.js的修改部分

 /**
   * 选中节点,因为tree是异步加载,所以必须在success回调中调用checkNode函数,否则无法获取生成的DOM元素
   * @param filter lay-filter属性
   * @param id 选中的id
   */
  TreeSelect.prototype.checkNode = function(filter, id,treeId){
    var newTreeId = treeId.replace('layui-treeSelect','layui-treeSelect-body');
    var inputId = treeId.replace('layui-treeSelect','treeSelect-input');
    var treeObj = $.fn.zTree.getZTreeObj(newTreeId);
    var node = treeObj.getNodeByParam("id", id, null);
    var treeInput = $("#"+inputId);
    treeInput.val(node.name);
    treeObj.selectNode(node);
  };

这是我采用投机的办法,曲线救国。其他的方法我就没去改了,这样可以选中节点。

【HarmonyOS 5.0.0 或以上】构建树形选择组件 TreeSelect:支持节点展开 / 多选 / 搜索过滤 / 动态加载 第59篇:【HarmonyOS 5.0.0 或以上】构建操作确认组件 ConfirmAction:二次确认 / 支持滑动确认 / 延迟倒计时按钮。可拓展为 check 全选/半选、图标、异步加载等功能。多层级数据选择场景(如组织架构、城市、类目)构建一个可复用的树形结构选择组件。支持节点展开/收起、单选/多选。支持懒加载子节点(按需展开) 阅读详情

相关推荐

基于CRU和WorldClim的高分辨率(1km)气候数据生成

基于CRU和WorldClim的高分辨率(1km)气候数据生成

lhq7842955的博客 1693

treelist中自带的checkNode,全选,全部选,部分选

treeList1.OptionsView.ShowCheckBoxes = true; treeList1.OptionsBehavior.AllowIndeterminateCheckState = true; //控制checkout的关联 选中父节点,子节点也被选中。子节点全部选中时,父节点自动选中。子节点可以单独选中 //判断...

lemonemmm的博客 4402

Modelsim安装教程以及管理员身份运行patch_dll.bat时找不到文件mgls.dll的解决

Modesim安装教程 Modesim版本有很多,但是安装方式大都相同,我们以modesim.10.5为例,电脑使用的是win10 64位,讲一下安装过程中的步骤以及出现问题的解决方法 一 安装 1.首先解压安装包,在解压的安装包内选择应用程序,右键选择管理员运行。 2.稍等一会,有的电脑会弹出是否允许modesim进行更改,选择 是 即可,然后出现下面的界面,点击下一步。 3.弹出此界面选择安装路径,选择安装路径,我是在D盘新建的文件夹,直接把文件夹中的路径复制在框内。文件夹名称切记不要带中文 4.

weixin_48564372的博客 1万+

layui treeselect no( reading ‘name‘)错误,导致checkNode无法选中节点

这是checkNode会跳转到这个地方执行 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, n

qq_48716989的博客 1195

【DeepSeek+Office/WPS】智能办公新时代的全新利器

DeepSeek是一家专注于通用人工智能技术研发的中国科技公司,其核心产品DeepSeek-R1是一款开源的推理大模型,专注于复杂任务的高效处理,支持智能对话、文本生成、语义理解、计算推理、代码生成与补全等多种应用场景。作为国产、免费、开源且强大的AI平台,DeepSeek不仅致力于为终端用户提供高质量的智能服务,还为开发者提供了一整套完善的技术解决方案,帮助他们快速构建和部署自己的智能应用。

2303_77200324的博客 2791

ICG cell如何通过Latch结构消除与门clock gating中的glitch?

本文深入解析了ICG Cell如何利用Latch结构解决传统与门时钟门控中的毛刺问题。通过将电平敏感锁存器与门控与门结合,ICG Cell将使能信号的变化严格限制在时钟低电平的安全窗口内采样和锁存,从而在时钟有效沿期间提供稳定的控制信号,从根本上消除了因信号延迟不同步而产生的glitch,确保了门控时钟的纯净与电路功能的可靠性。

weixin_29234423的博客 468

使用LayUI的第三方组件treeSelect,checkNode选中节点, 报错:Cannot read property ‘getNodeByParam‘ of null

之前使用treeSelect组件的时候没有发现问题,然后js一模一样复制过来,竟然报错: Cannot read property 'getNodeByParam' of null 我检查了n多遍,然后又改了n多次引入,变量定义,还是不行,处于崩溃的边缘。后来才发现,页面定义input的时候,下面加了一个hiddren类型的input框,错误代码如下: <div class="layui-inline"> <label class="layui-form-label">..

石懒猪很懒的博客 1233

Localizing LabVIEW Application to Different Languages

本文探讨了LabVIEW应用程序的多语言本地化实现方案。文章首先分析了LabVIEW对多语言的支持现状,指出其默认仅支持ANSI编码,对Unicode支持有限,且仅适配中英法德日韩六种语言。然后重点介绍了JKISimpleLocalization工具包的使用方法,该工具能导出/导入JSON词典文件,实现界面语言的实时切换。文章还结合实际工程案例,分析了该方案的局限性:部分控件不可翻译、切换速度较慢(33个界面需50秒)、小语种支持不足等。最后提供了完整的应用流程和工具包附件,包括词典文件转换工具和工程案例。

2301_80383260的博客 1409

记layui的treeselect三层选择出错解决办法

这个其实也不是很困难的事情,因为今天无意中用到发现此bug,看网络上没有这个bug的说明和解决办法,记一下给有需要的人。 问题场景重现: 拿网上的demo为例: 看一下这个树形select框,并且是在下拉选可以模糊查询的情况下如下图: 我们看到下拉中有一个元素叫添加用户,那我们查询“加”如果按预期我们会找到这个元素的。 但事实是我们输入完并未找到这个元素,如下图: 先说一下解决办法吧,修改一下treeSelect.js的代码: checkNodes: function (nodes) {

studentza的博客 1021

用urdf给自己的ROS小车编写模型

3.3 使用urdf编写自己的ROS小车模型 3.3.1 常见的ROS小车结构有哪些? 下面就是常见的ROS小车,相信在大家的脑海里已经有了自己小车的样子,下面我和大家一起使用urdf对ros小车建模。 这里只对urdf进行简单介绍,然后就带大家使用urdf最基础的标签,建立机器人的urdf机器人模型。关于更多细节,请参看官网:http://wiki.ros.org/urdf/Tutorials 3.3.2 什么是urdf?建模的原因? 什么是urdf? URDF(Unified Robot Descri

「小白学移动机器人」一个专注分享移动机器人相关知识的公众号! 1万+

linux系统下XDMA驱动的安装与测试问题总结

先看两个常见的问题。一个是驱动安装问题,一个是驱动测试错误;error 512 能识别PCIE的设备,但是The kernel modle installed correctly, but no devices were recognized.

whm128的博客 3805

【Layui-treeSelect】Select 树状下拉 遇到的问题

Select 树状下拉 treeSelect.checkNode('tree', 3); 时报错 Cannot read property 'getNodeByParam' of null

aadnf的博客 1151

【深度学习新浪潮】李飞飞团队VAGEN框架深度解析:让VLM智能体学会“三思而后行“

VAGEN框架的真正价值,不仅在于性能指标的突破,更在于重新定义了VLM智能体的发展方向——人工智能的进步不应只追求"做得对",更要实现"想得清"。李飞飞团队通过强制显式思考、动态表示适配和精细化奖励三大创新,让智能体第一次具备了可解释的世界建模能力。正如人类通过"观察-预测-行动"认识世界,VAGEN为AI注入的这种思考范式,或许正是通往通用人工智能的关键一步。对于开发者而言,开源的VAGEN框架不仅提供了强大的工具,更揭示了一个重要理念:让AI学会思考,比让它学会执行更重要。

专注:太空算力、AI infra、异构调度、大模型成本工程 280

layui Treeselect

treeSelect的checknode,选中节点包空指针。 跟踪发现treeObj是undefined treeObj 是由于 treeId undifined treeId undifined是因为o元素选择错误了,代码中,o为带有lay-filter=***的节点的下一个 虽然html代码中,input 与其生成的树,似乎应该在一起 ...

weixin_30672019的博客 1223

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

LayUI下拉树TreeSelect的使用

树形结构在实际开发中是很长用的一种结构。最近写了一个LayUI的小案例,其中用到了TreeSelect,这里整理一下。 TreeSelect官网地址:https://fly.layui.com/extend/treeSelect/ 显示效果图。 因为TreeSelect不是LayUI官方开发的,而是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。 之后页面只需要引入...

小马同学 3万+

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

treeselect只选了分支节点全选_React计算antd的TreeSelect组件所选中的子节点数量

antd的TreeSelect组件在处理例如公司层级、学科系统、分类目录等等的树形选择需求时很好用。在使用这个组件时,我们往往需要获取所选中的所有节点以及所选中的所有子节点的数量。查看TreeSelect的api找到了组件的选中回调方法onChange在理解onChange方法的参数含义前,要先知道TreeSelect组件的数据格式onChange方法有三个参数,value表示所选中的节点的val...

weixin_39844284的博客 1524

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

layui tree监控选中事件,同步选中和取消

需求:需要分配权限时,要通过组织架构分配,也要通过角色分配,还是把选择的结果显示出来。代码分页面,类和SQL。

小熊猫 1925

layui 树形组件元素全选,全不选,反选

layui的tree组件官方介绍的不多,而且元素的名称都得是固定的所以如何将后台的数据与前台交互需要自己再设计 1、后台到前端(有递归调用) private Object fun(List<SeriesRuleClass> tree, List<HashMap<String, Object>> result) { for (SeriesRuleClass aClass : tree) { HashMap<St.

hunagzheng123456的博客 9887

TreeSelect 禁止选中父级,只能选择子级 使用isDisabled 为true

加一个 :disable-branch-nodes="true" 就可以完成这个的效果。在我们的开发中,经会出现部门的选择, 禁止选中父级,只能选择子级 这样的情况。话不多说,直接上代码。

m0_71835253的博客 4592

vue设置treeselect 部门树下拉树根节点不可选

vue设置treeselect 部门树下拉树根节点不可选

qq_22905801的博客 1618

组织树组件treeselect的选中事件与父级不可选控制

el-form-item label="谈话室" prop="zdthDd">placeholder="请选择父级编号"/>

m0_63524137的博客 1654

treeselect 禁用父节点后无法选择子节点的解决

【代码】treeselect 禁用父节点后无法选择子节点的解决。

qq_31683775的博客 675

treeSelect数据回显问题

var treeObj = treeSelect.zTree(id);//获取tree对象 id是lay-filter="treeSelectTwoId" //其实就是使用zTree里面对应的方法操作 var nodes=treeObj.getCheckedNodes(true); var nodeId;//子节点对应的id for(var t=0;t<nodes.length;t...

qq_35642047的博客 1万+

Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值

Antd Select选择器 treeSelect 选择树 解决异步数据无法设置默认值

山外小楼 2969

layui-树型选择器

layui树型选择器 下载treeSelect.js到项目中: 数据库上 表中必须要有id,和pid,其中pid是父亲节点,存在值为0,就是根,其他字段都可以随意。 前端上 //前端页面上 <input type="text" name="href" id="tree_cat" lay-verify="required" lay-filter="tree" value="" lay-reqtext="选择框的默认提示内容" class="layui-input" > // 前端scrip

qq_36259105的博客 1684

踩坑layui tree.getchecked 为空数组

使用layui的tree 组件 一定要给数组里面添加id字段 不然得到的是空数组 粘代码 <div id="test12" class="demo-tree-more"></div> res为后端返回数组 res.map(item => { item.title = item.goods_name + '/' + item.shop_price + '元'; item.id = item.goods_id }); let Data2

qq_38932474的博客 3343
上一篇: update 多表关联 语法
下一篇: MySQL5.7修改了my.ini文件后服务启动不了
nb009网
博客等级 码龄18年 10粉丝 31原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值