layui 树组件tree 通过API获取数据

一、简单

	var treedata=[];
	tree.render({
		elem: '#addLeftType',
		id: 'demoId',
		data: treedata,
		showCheckbox: true,
		oncheck: function(obj){
			console.log(obj.data); // 得到当前点击的节点数据
			console.log(obj.checked); // 节点是否被选中
			console.log(obj.elem); // 得到当前节点元素
		},
		edit: ['add', 'update', 'del'] // 开启节点的右侧操作图标
	});
	get_tree_data(0);//初始化
	// 使用 layui 的 ajax 方法来获取树节点数据
	function get_tree_data(id){
		$.ajax({
			type:'post',
			url: "{:url('classif_listjson')}",
			data: {id:id},
			success:function(response){
				tree.reload('demoId', {
					data:response,
				});
				tree.setChecked('demoId', [1,2]); //单个勾选 id 为 1 的节点
			}
		});
	};

初始化 默认选中：只能这个位置才能生效

tree.setChecked('demoId', [1,2]); //单个勾选 id 为 1 的节点

二、复杂（只能单选）：增加、编辑、删除功能

//tree组件 操作 开始
	var show_btn = [];
	var show_btn_ids='';
	var array_ids=[];
	function get_tree_id(checkarr){ 
		for(var i=0;i<checkarr.length;i++){ 
			if(checkarr[i].children){
				get_tree_id(checkarr[i].children)
			}else{
				show_btn_ids += checkarr[i].id+',';
				array_ids.push(checkarr[i].id);
				$("#classify_ids").val(show_btn_ids);
			}

		} 
	}

 	var treedata=[];
	 //用来修改后的节点数据
	var update_treedata=[];
    //渲染
    var inst1 = tree.render({
      elem: '#addLeftType'  //绑定元素
	  ,id: 'demoId'
	  ,edit: ['add', 'update', 'del']
	  ,showCheckbox: true
      ,data:treedata
	  ,click: function(obj){
      	//layer.msg(JSON.stringify(obj.data));
      },oncheck: function(obj){
		// console.log(obj); //得到当前点击的节点数据 
		show_btn_ids = '';
		$("#classify_ids").val('');
		$("#showLeftType").html('');
		//获得选中的节点
		var checkData = tree.getChecked('demoId');
		$("#showLeftType").html("");
		//console.log(checkData.length)
		// 取消其它选中，只能单选
		uncheckAllExceptOne()


		get_tree_id(checkData); 
	
	 },operate: function(obj){
			var type = obj.type; //得到操作类型：add、edit、del
			var data = obj.data; //得到当前节点的数据
			var elem = obj.elem; //得到当前节点元素
			//Ajax 操作
			var id = data.id; //得到节点索引
			var all_id = data.pid_all.split(","); 
			if(type === 'add'){ //增加节点
				addType(id,all_id);
				//返回 key 值
				return '增加';
			} else if(type === 'update'){ //修改节点
				var title = elem.find('.layui-tree-txt').html()
				$.ajax({
					type: "post",
					url: "{:url('classif_add')}",
					dataType:"json",   //返回格式为json
					data: {id:id,title:title,field:'name',action:'ajax_update'},
					success: function(data){
						layer.msg(data.msg);
						$("#"+id).text(title);
					},
					error: function(){
						layer.msg('更新失败!');
					}
				});
			} else if(type === 'del'){ //删除节点
				$.ajax({
					type: "post",
					url: "{:url('classif_add')}",
					dataType:"json",   //返回格式为json
					data: {id:id,del_is:1,action:'ajax_del'},
					success: function(data){
						layer.msg(data.msg);
						if(data.code==200){
							//获得选中的节点
							var checkData = tree.getChecked('demoId');
							//清空选中
							array_ids=[];
							//重新获取选中id
							get_tree_id(checkData); 
							//treedata 结构数据，id递归删除对应id，array_ids给默认选中的id加上
							update_treedata= delete_tree_id(treedata,id,array_ids,"del",0,all_id);
							//重新渲染组件
							tree.reload('demoId', {data:update_treedata});
							//清空
							$("#showLeftType").html("");
							//再次获得选中的节点
							var checkData = tree.getChecked('demoId');
							//再次清空选中
							array_ids=[];
							//再次重新获取选中id
							get_tree_id(checkData); 
						}
					},
					error: function(){
						layer.msg('更新失败!');
					}
				});
			};
	  }
    });

	//取消除了当前选中所有选项
	function uncheckAllExceptOne(checkboxId) {
		var checkboxes = document.querySelectorAll('#addLeftType input[type="checkbox"]');
		for (var i = 0; i < checkboxes.length; i++) {
			checkboxes[i].checked = false;
		}
	}
	function get_page_data(id){
		$.ajax({
			type:'post',
			url: '{:url('classif_listjson')}',
			data: {id:id},
			success:function(response){
				treedata = response.data;
				if(response.code!=200){
					treedata =[{title:response.msg,id:99999999,children:[]}];
				}
				tree.reload('demoId', {
					data:treedata
				});
				{notempty name="$rs"}
				tree.setChecked('demoId', [{$rs['classify1']},{$rs['classify2']}]); //单个勾选 id 为 1 的节点
				{/notempty}
			}
		});
	};
	var p_id=0;
	var add_terr_item_title="未命名";
	get_page_data({$id});
	tree.setChecked('demoId', [1, 2]); // 批量勾选 id 为 1,3 的节点
	//操作节点type：del删除 add 添加
	function delete_tree_id(data,id,array_ids,type,addid,all_id){ 
		var is_data=data;
		var one_data=[];
		var p_spread=true;
		
		for(var i=0;i<data.length;i++){
		
			if(id==data[i].id&&type=="del"){
				is_data.splice(i,1);
			}else if(type=="add"&&(id==data[i].id)){
				if(is_data[i].children){
					is_data[i].children.push({id:addid,title:add_terr_item_title,pid_all:all_id.toString()+','+addid});
				}else{
					is_data[i].children=[];
					is_data[i].children.push({id:addid,title:add_terr_item_title,pid_all:all_id.toString()+','+addid});
				}
			}
			for (let index = 0; index < array_ids.length; index++) {
					var acid = array_ids[index];
					if(data[i]&&acid==data[i].id){
						if(is_data[i]){
							is_data[i].checked=true;
						}
					}
			} 
			//父节点展开
			if(data[i]&&data[i].id==id){
				is_data[i].spread=p_spread;//父节点展开
			}
			if(all_id){
				for (let k = 0; k <all_id.length; k++) {
					const sp_id = all_id[k];
					if(data[i]&&sp_id==data[i].id){
						is_data[i].spread=p_spread;//父节点展开
					}
				}
			}
			if(data[i]&&data[i].children){
				delete_tree_id(data[i].children,id,array_ids,type,addid,all_id);
			}
		}
		one_data=is_data;
		return  one_data;
	}

	function addType(pid,all_id){
		var typetitle = $("#typetitle").val();
		var title
		if(pid==p_id||pid==""||pid==0||pid==null||pid==undefined){
			title = typetitle? typetitle:add_terr_item_title;
		}else{
			title=add_terr_item_title;
		}
		add_terr_item_title=title;
		$.ajax({
			type: "post",
			url: "{:url('classif_add')}",
			dataType:"json",   //返回格式为json
			data: {pid:pid,title:title,level_limit:{$level_limit}},
			success: function(data){
				layer.msg(data.msg);
				if(data.code==200){
					//获得选中的节点
					var checkData = tree.getChecked('demoId');
					//清空选中
					array_ids=[];
					//重新获取选中id
					get_tree_id(checkData); 
					//treedata 结构数据，id递归删除对应id，array_ids给默认选中的id加上,all_id
					update_treedata= delete_tree_id(treedata,pid,array_ids,"add",data.add_id,all_id);
					if((pid==0||pid==null||pid==undefined||pid==""||pid==p_id)){
						update_treedata.push({id:data.add_id,title:add_terr_item_title,pid_all:p_id.toString()+','+data.add_id});
					}
					//重新渲染组件
					tree.reload('demoId', {data:update_treedata});
					//清空
					$("#showLeftType").html("");
					//再次获得选中的节点
					var checkData = tree.getChecked('demoId');
					//再次清空选中
					array_ids=[];
					//再次重新获取选中id
					get_tree_id(checkData); 
					add_terr_item_title="未命名";
				}else{
					//重新渲染组件
					tree.reload('demoId');
				}
			},
			error: function(){
				layer.msg('更新失败!');
			}
		});
	}
	$("#addType").click(function(){
		//更新后台数据
		addType(p_id,0);
	})

//tree组件 操作 结束

去掉uncheckAllExceptOne()就可以多选了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/258762.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

模拟组建网络的过程

模拟组建网络的过程

DNS是域名系统&#xff0c;作用是将域名解析成ip地址 要求 1.使用172.16.0.0网段组建网络 2.使用3台pc&#xff0c;可以配置DHCP服务自动分配ip 3.添加两个网站服务器 第一台是www.taobao.com 第二台www.jd.com 他们可以通过DNS服务器为客户解析域名 172开头的是B类ip地…
阅读更多...
获取税率GET_TAX_PERCENTAGE

获取税率GET_TAX_PERCENTAGE

FTXP查看税码 GET_TAX_PERCENTAGE CALL FUNCTION GET_TAX_PERCENTAGEEXPORTINGaland ls_lfa1-land1datab sy-datummwskz ps_out-mwskztxjcd MWVS * EXPORT TABLESt_ftaxp lt_ftaxp.READ TABLE lt_ftaxp INTO DATA(ls_ftaxp) INDEX 1.IF sy-subrc 0.cs_po-…
阅读更多...
javascript_1

javascript_1

3) string ⭐️ js 字符串三种写法 let a "hello"; // 双引号 let b "world"; // 单引号 let c hello; // 反引号 html 代码如下&#xff0c;用 java 和 js 中的字符串如何表示&#xff1f; <a href"1.html">超链接</a> …
阅读更多...
年终汇报这么写，升值加薪必有你！

年终汇报这么写，升值加薪必有你！

#01 你这么能干&#xff0c; 老板知道吗&#xff1f; — 打工人最怕什么&#xff1f; 最怕你忙前忙后&#xff0c;干活一大堆&#xff0c;气出一身结节&#xff0c;锅还没少背&#xff0c;最后升职加薪没有你&#xff0c;出国旅游不带你&#xff1b;更怕你日常996&#xf…
阅读更多...
（企业 / 公司项目）前端使用pingyin-pro将汉字转成拼音

（企业 / 公司项目）前端使用pingyin-pro将汉字转成拼音

1.官方网址&#xff1a;pinyin-pro | pinyin-pro 2.介绍​ pinyin-pro 是一个专业的 JavaScript 中文转拼音的库&#xff0c;具备多音字识别准确、体积轻量、性能优异、功能丰富等特点。 在同类产品中&#xff0c;pinyin-pro 无论是多音字识别准确率、体积、性能还是功能的支…
阅读更多...
[AutoSar]基础部分 RTE 01 介绍

[AutoSar]基础部分 RTE 01 介绍

目录 关键词平台说明一、什么是RTE二、RTE的主要功能 关键词 嵌入式、C语言、autosar、EcuM、wakeup、flex 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&#xff0c;C编译器HighTec (GCC) 一、什么是RTE RTE&#xff08;Run-Time Environment&…
阅读更多...
React高手都会用的useMemo有什么用的？

React高手都会用的useMemo有什么用的？

在 React 中&#xff0c;性能优化一直是开发者们关注的焦点之一。为了减少组件的重渲染和提高应用程序的性能&#xff0c;React 提供了一些钩子函数&#xff0c;其中之一就是 useMemo。本文将深入探讨 useMemo 的用法&#xff0c;展示它如何帮助我们优化 React 组件。 目录 1.…
阅读更多...
深入了解常见的应用层网络协议

深入了解常见的应用层网络协议

目录 1. HTTP协议 1.1. 工作原理 1.2. 应用场景 1.3. 安全性考虑 2. SMTP协议 2.1. 工作原理 2.2. 应用场景 2.3. 安全性考虑 3. FTP协议 3.1. 工作原理 3.2. 应用场景 3.3. 安全性考虑 4. DNS协议 4.1. 工作原理 4.2. 应用场景 4.3. 安全性考虑 5. 安全性考虑…
阅读更多...
【华为OD机试真题2023CD卷 JAVAJS】加密算法

【华为OD机试真题2023CD卷 JAVAJS】加密算法

华为OD2023（C&D卷）机试题库全覆盖，刷题指南点这里 加密算法 知识点DFS搜索 题目描述： 有一种特殊的加密算法，明文为一段数字串，经过密码本查找转换，生成另一段密文数字串。规则如下： 1. 明文为一段数字串由0~9组成 2. 密码本为数字0~9组成的二维数组 3. 需要…
阅读更多...
npm install安装报错phantomjs-prebuilt安装脚本失败

npm install安装报错phantomjs-prebuilt安装脚本失败

前言: 进入了一个新项目,项目经理给了工程权限,我拉取代码建立好分支之后,安装依赖,报错 报错如下: 问题就是我本地安装了phantomjs,当我运行npmi install 的时候,它总尝试通过下载来安装,然后公司代理阻止了直接下载, 运行phantomjs -v看到本地版本,它正常工作在 解决问题: …
阅读更多...
Stable Diffusion Windows 部署简单认知

Stable Diffusion Windows 部署简单认知

写在前面 偶然看到&#xff0c;简单了解博文为 SD 部署&#xff0c;以及简单使用&#xff0c;部署过程遇到问题解决理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。…
阅读更多...
铲屎官必备——在拍宠物萌照这一块，Mate X5可能真的是遥遥领先

铲屎官必备——在拍宠物萌照这一块，Mate X5可能真的是遥遥领先

养宠物已经成了年轻人的潮流之一&#xff0c;谁不想要有可爱高萌的猫猫狗狗作伴呢&#xff1f;也正因为如此&#xff0c;如何给自家主子拍一张可以分享炫耀到朋友圈的萌宠美照就成了难题&#xff0c;很多时候明明萌宠可爱溢出&#xff0c;却因为拍照出片的效果太差&#xff0c;…
阅读更多...
【算法】红黑树

【算法】红黑树

一、红黑树介绍 红黑树是一种自平衡二叉查找树&#xff0c;是在计算机科学中用到的一种数据结构&#xff0c;典型的用途是实现关联数组。 红黑树是在1972年由Rudolf Bayer发明的&#xff0c;当时被称为平衡二叉B树&#xff08;symmetric binary B-trees&#xff09;。后来&am…
阅读更多...
R语言——文件读写（三）

R语言——文件读写（三）

目录 一、获取数据 二、读取文件 三、写入文件 四、读写Excel文件 五、读写R格式的文件 参考 一、获取数据 获取数据的三种途径&#xff1a; 1. 利用键盘来输入数据 2. 通过读取存储在外部文件上的数据 3. 通过访问数据库系统来获取数据 edit()&#xff1a;定义一个数…
阅读更多...
在使用mapstruct，想忽略掉List＜DTO＞字段里面的，`data` 字段的映射， 如何写ignore： 使用@IterableMapping

在使用mapstruct，想忽略掉List＜DTO＞字段里面的，`data` 字段的映射， 如何写ignore： 使用@IterableMapping

在使用mapstruct，想忽略掉List字段里面的，data 字段的映射， 如何写ignore 代码如下： public interface AssigmentFileMapper {AssigmentFileDTO assigmentFileToAssigmentFileDTO(AssigmentFile assigmentFile);AssigmentFile assigmentFileDTOToAssigmentFile(Assigment…
阅读更多...
【Proteus仿真】【Arduino单片机】视力保护仪

【Proteus仿真】【Arduino单片机】视力保护仪

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使LCD1602液晶&#xff0c;DS18B20温度传感器、按键、蜂鸣器、继电器开关、HC05蓝牙模块等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD16…
阅读更多...
5252D 5G基站测试仪

5252D 5G基站测试仪

01 5252D 5G基站测试仪 产品综述&#xff1a; 5252D多通道综测仪打破了信号发生器进行信号发射、频谱分析仪进行观看频域波形的测试方案&#xff0c;将信号收发融为一体&#xff0c;推动无线通信测试进入全新时代。其独具的多通道收发一体、高性能、全方位测试能力及直观操作…
阅读更多...
UE5 runtime模式下自定义视口大小和位置并跟随分辨率自适应缩放

UE5 runtime模式下自定义视口大小和位置并跟随分辨率自适应缩放

本文旨在解决因UI问题导致屏幕中心位置不对的问题 处理前的现象&#xff1a;如果四周UI透明度都为1&#xff0c;那么方块的位置就不太对&#xff0c;没在中心 处理后的现象&#xff1a; 解决办法&#xff1a;自定义大小和视口偏移 创建一个基于子系统的类或者蓝图函数库(什么类…
阅读更多...
链表对象的封装

链表对象的封装

前言 前面我自己写了一个对链表对象的封装&#xff0c;现在看来&#xff0c;确实还得是大佬的封装思路更加完善 前言知识介绍 __init__方法 __init__方法是Python中的一个特殊方法&#xff0c;用于初始化一个新对象。当一个类的实例被创建时&#xff0c;__init__方法会被自…
阅读更多...
【数据结构和算法】 K 和数对的最大数目

【数据结构和算法】 K 和数对的最大数目

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;双指针排序 三、代码 3.1 方法一&#xff1a;双指针排序 3.2 方法二&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站