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、delvar 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",   //返回格式为jsondata: {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",   //返回格式为jsondata: {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=[];//重新获取选中idget_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=[];//再次重新获取选中idget_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 titleif(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",   //返回格式为jsondata: {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=[];//重新获取选中idget_tree_id(checkData); //treedata 结构数据，id递归删除对应id，array_ids给默认选中的id加上,all_idupdate_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=[];//再次重新获取选中idget_tree_id(checkData); add_terr_item_title="未命名";}else{//重新渲染组件tree.reload('demoId');}},error: function(){layer.msg('更新失败!');}});}$("#addType").click(function(){//更新后台数据addType(p_id,0);})//tree组件 操作 结束

去掉uncheckAllExceptOne()就可以多选了

表单提交的一些判断

/* 监听提交 */form.on('submit(component-form-demo1)', function(data){/* 启动加载... */var indexload = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景});// 加入分类var data = JSON.parse(JSON.stringify(data.field));var checkData = tree.getChecked('demoId');if (Object.keys(checkData).length === 0) {layer.close(indexload);/* 关闭加载弹层... */layer.msg('请选择分类');return}var classify1 = checkData[0]['id'];var classify2 =  checkData[0]?.children?.[0]?.id;;data.classify1=classify1;data.classify2=classify2;var addData = JSON.stringify(data);$.ajax({url: "{:url('add')}",type: "post",dataType:"json",   //返回格式为jsondata: {data:addData},success: function(data) {layer.close(indexload);/* 关闭加载弹层... */layer.msg(data['msg']);/* 延迟2秒刷新... */if(data['code']==200){setTimeout(function(){window.location.reload()  },2000)}},error: function() {layer.close(indexload);/* 关闭加载弹层... */layer.msg('{$form_server_error_title}');}});});

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

真VS假（数字化前提）

真VS假（数字化前提）

元宇宙最近消停了很多&#xff0c;起始这个词刚出来的时候&#xff0c;很多人搞不清楚&#xff0c;元宇宙就是看待真假一个典范。如果对真假有个清晰的认知&#xff0c;那么对于看待很多事情&#xff0c;会给您带来不一样的视角&#xff0c;不仅仅是对企业数字化&#xff0c;可…
阅读更多...
【DOM笔记四】事件高级！（注册/删除事件、DOM事件流、事件对象、事件委托、鼠标 / 键盘事件、相关案例）

【DOM笔记四】事件高级！（注册/删除事件、DOM事件流、事件对象、事件委托、鼠标 / 键盘事件、相关案例）

文章目录 7 事件高级7.1 注册事件概述7.2 删除事件7.3 DOM事件流7.4 事件对象7.5 事件委托7.6 鼠标事件7.6.1 常用的鼠标事件7.6.2 鼠标事件对象 7.7 键盘事件7.7.1 常用的键盘事件7.7.2 键盘事件对象 7 事件高级 7.1 注册事件概述 给元素添加事件&#xff0c;称为注册事件或…
阅读更多...
从零开始构建高效的网校平台：在线教育系统源码的开发指南

从零开始构建高效的网校平台：在线教育系统源码的开发指南

随着科技的不断发展&#xff0c;在线教育在现代社会中变得愈发重要。本文将为您提供一份详尽的指南&#xff0c;从零开始构建高效的网校平台&#xff0c;覆盖在线教育系统源码的关键开发步骤。 第一步&#xff1a;明确需求和目标 在开始之前&#xff0c;明确您的网校平台的需…
阅读更多...
基于深度学习的动物检测识别系统（含UI界面、yolov5、Python代码、数据集）

基于深度学习的动物检测识别系统（含UI界面、yolov5、Python代码、数据集）

项目介绍 项目中所用到的算法模型和数据集等信息如下&#xff1a; 算法模型&#xff1a;     yolov5 yolov5主要包含以下几种创新&#xff1a;         1. 添加注意力机制&#xff08;SE、CBAM等&#xff09;         2. 修改可变形卷积&#xff08;DySnake-主干c…
阅读更多...
青少年CTF-qsnctf-Web-Queen

青少年CTF-qsnctf-Web-Queen

题目环境&#xff1a; 题目难度&#xff1a;★★ 题目描述&#xff1a;Q的系统会不会有漏洞&#xff1f; 看到了登录窗口&#xff0c;使用burp suite工具进行抓包 burp suite抓包 admin 1 Repeater重放Send放包 Your IP is not the administrator’s IP address! 您的IP不是管理…
阅读更多...
管理类联考——数学——真题篇——按题型分类——充分性判断题——蒙猜A/B

管理类联考——数学——真题篇——按题型分类——充分性判断题——蒙猜A/B

老规矩&#xff0c;看目录&#xff0c;平均3-5题 文章目录 A/B2023真题&#xff08;2023-19&#xff09;-A-选项特点&#xff1a;两个等号&#xff1b;-判断需联立的难易&#xff1a;难&#xff0c;看着感觉需要联立&#xff0c;所以判断联立需要有理论支撑&#xff0c;不然还…
阅读更多...
Gin之GORM多表关联查询（多对多；自定义预加载SQL）

Gin之GORM多表关联查询（多对多；自定义预加载SQL）

数据库三个，如下： 注意：配置中间表的时候，表设计层面最好和配置的其他两张表契合，例如其他两张表为fate内的master和slave;要整合其对应关系的话，设计中间表的结构为master_id和slave_id最好（不然会涉及重写外键的操作） 重写外键（介绍） 对于 many2many 关系，连接表…
阅读更多...
HP服务器idrac设置以及系统安装

HP服务器idrac设置以及系统安装

HP服务器idrac设置以及系统安装 一、设置管理口的地址和密码1、HP服务器重新界面选择"F9"进入BIOS&#xff0c;设置iLo5(idrac)的IP和用户名密码。2、选择"系统配置"。3、选择"iLO 4"配置程序。4、网络选项是设置idrac管理口的地址&#xff0c;设…
阅读更多...
matplotlib科研绘图之折线图、柱状图、散点图、误差棒

matplotlib科研绘图之折线图、柱状图、散点图、误差棒

matplotlib折线图例子1 # -*- coding: utf-8 -*- # Time : 2023/12/19 10:56 # Author : 长沙有肥鱼 # FileName: 21.py # Software: PyCharm # Blog : https://blog.csdn.net/weixin_53660567?spm1010.2135.3001.5343# 导入Matplotlib库 import matplotlib import ma…
阅读更多...
中低压MOS 适用于电子烟等产品—— 较小的开关损耗 过流能力好

中低压MOS 适用于电子烟等产品—— 较小的开关损耗 过流能力好

工作原理&#xff1a; 当用户在吸嘴处抽吸时&#xff0c;气流经过进气孔&#xff0c;穿 过电路板上方的咪头&#xff0c;咪头即产生电信号&#xff0c;驱 动芯片板&#xff0c;让电池供电给雾化芯&#xff0c;雾化芯中的 发热丝将电能转化成热能&#xff0c;当温度达到…
阅读更多...
github订阅充值

github订阅充值

一、前言 GitHub是全球最大的面向开源及私有软件项目托管平台之一。它提供了一个基于Git的托管服务&#xff0c;使得用户可以轻松地在互联网上存储、共享和管理其代码仓库。 二、GitHub的主要特点 开放性和协作性&#xff1a;GitHub是面向开发者和开源社区的&#xff0c;其平…
阅读更多...
ios微信小程序table头部与左侧固定双重滚动会抖动的坑，解决思路

ios微信小程序table头部与左侧固定双重滚动会抖动的坑，解决思路

正常情况是左右滑动时&#xff0c;左侧固定不动&#xff0c;上下滑动时表头不动&#xff1b;而且需求不是完整页面滚动。而是单独这个表滚动&#xff1b; 第一个坑是他有一个ios自带的橡胶上下回弹效果。导致滚动时整个表都跟着回弹&#xff1b; 这个是很好解决。微信开发官网…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023