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.mzph.cn/news/235610.shtml

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

相关文章

java --- 反射

目录 一、什么是反射&#xff1f; 二、获取 Class对象 的三种方式 三、反射获取构造方法&#xff08;Constructor&#xff09; 四、反射获取成员变量&#xff08;Field&#xff09; 五、反射获取成员方法&#xff08;Method&#xff09; 一、什么是反射&#xff1f; 反射允…

app上架-您的应用在运行时,未同步告知权限申请的使用目的,向用户索取(相机)等权限,不符合华为应用市场审核标准。

上架提示 您的应用在运行时&#xff0c;未同步告知权限申请的使用目的&#xff0c;向用户索取&#xff08;相机&#xff09;等权限&#xff0c;不符合华为应用市场审核标准。 测试步骤&#xff1a;管理-添加-点击二维码&#xff0c;申请相机权限 修改建议&#xff1a;APP在调…

智能优化算法应用:基于非洲秃鹫算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于非洲秃鹫算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于非洲秃鹫算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.非洲秃鹫算法4.实验参数设定5.算法结果6.…

UE4 UE5 一直面向屏幕

一直面相屏幕&#xff0c;方法很简单 新建一个蓝图&#xff0c;如下添加组件&#xff1a; 蓝图如下&#xff1a; Rotation Actor &#xff1a;需要跟随镜头旋转的物体 Update&#xff1a;一个timeline&#xff08;替代event tick 只是为了循环&#xff09; Timeline&#xff…

百年东芝“瞄准”汽车「芯」机遇

在汽车“新四化”大变革的驱动下&#xff0c;汽车半导体市场进入需求暴涨的新周期。 “智能电动汽车所需要的半导体种类和数量正在急剧增加。” 东芝电子分立器件应用技术部经理成栋表示&#xff0c;东芝电子正在加大汽车半导体市场的布局&#xff0c;从而满足汽车电动化、智能…

深入了解Java中的锁机制

目录 1. synchronized关键字 1.1 基本概念 1.2 内置锁 1.3 限制 2. ReentrantLock 2.1 概述 2.2 公平性与非公平性 2.3 条件变量 3. 读写锁&#xff08;ReadWriteLock&#xff09; 3.1 概念 3.2 适用场景 4. StampedLock 4.1 概述 4.2 乐观读与悲观读 4.3 适用场…

WT588F34B-16S语音芯片:四通道16K采样率混音播放的应用优势

随着科技的不断进步&#xff0c;语音芯片在电子产品中的应用越来越广泛。其中&#xff0c;WT588F34B-16S语音芯片凭借其卓越的性能和创新的功能&#xff0c;引起了市场的广泛关注。特别是其支持四通道16K采样率混音播放的功能&#xff0c;为实际应用带来了显著的优势。本文将深…

w13渗透测试实战之https账号密码捕抓

此次实验需要配合arp欺骗,不知道arp欺骗的&#xff0c;可以查看这篇w13渗透测试实战之ARP欺骗攻击&#xff08;ARP断网攻击&#xff09; 一、实验环境 攻击机&#xff1a;linux Kali 靶机&#xff1a;window 7 网络环境&#xff1a;虚拟机NAT 网关&#xff1a;192.168.89.2实…

浅谈能耗系统在马来西亚连锁餐饮业的应用

1.背景信息 Background 针对连锁餐饮业能耗高且能源管理不合理的问题&#xff0c;利用计算机网络技术、通讯技术、计量控制技术等信息化技术&#xff0c;实现能源资源分类分项计量和能源资源运行监管功能&#xff0c;清晰描述各分店总的用能现状&#xff1b;实时监测各供电回路…

Hal深入实战/perfetto-systrace实战/SurfaceFlinger合集-安卓framework开发实战开发

背景 hi&#xff0c;粉丝朋友们&#xff1a; 大家好&#xff01; 下面来介绍一下新的framework专题halperfettosurafceflinger&#xff0c;这个专题主要就是分为3大块&#xff0c;但是彼此直接又是相互关联的。 比如surfaceflingre模块深入分析需要用到hal相关的模块&#xff…

IDEA创建springboot工程

选择spring boot的版本和依赖 finish创建完成 删除无用的文件

【make/Makefile】Linux下进度条的设计与实现

一、简单介绍make/Makefile Makefile 和 makefile 不区分大小写&#xff0c;但是一定只能是 “makefile” &#xff01;&#xff01;&#xff01; make 是一个指令&#xff0c;makefile 是一个文件。 Makefile 格式形式&#xff1a; 使用 make 生成目标文件时&#xff0c;默认…

论文解读:On the Integration of Self-Attention and Convolution

自注意力机制与卷积结合&#xff1a;On the Integration of Self-Attention and Convolution(CVPR2022) 引言 1&#xff1a;卷积可以接受比较大的图片的&#xff0c;但自注意力机制如果图片特别大的话&#xff0c;运算规模会特别大&#xff0c;即上图中右边(卷积)会算得比较快…

Python开发GUI常用库PyQt6和PySide6介绍之二:设计师(Designer)注意事项

Python开发GUI常用库PyQt6和PySide6介绍之二&#xff1a;设计师&#xff08;Designer&#xff09;注意事项 PySide6和PyQt6都有自己的设计师&#xff08;Designer&#xff09;&#xff0c;用于可视化地设计和布局GUI应用程序的界面。这些设计师提供了丰富的工具和功能&#xf…

快速入门 — — 在Moonbeam上开发

访问熟悉的以太坊工具是一回事&#xff0c;获得顶级支持、拥有构建突破性跨链应用程序的资源是另一回事。 Moonbeam汇集了通过集成互操作性解决方案访问任何链的能力、具有完全以太坊兼容性的理想开发环境&#xff0c;以及使用Substrate在波卡上安全扩展的能力。 开始在Moonb…

MT6785|MTK6785安卓核心板功能规格介绍_Helio G95核心板

MT6785安卓核心板是一款功能强大的工业级4G智能模块&#xff0c;它采用了Android 9.0操作系统。该核心板内置了蓝牙、FM、WLAN和GPS模块&#xff0c;具有高度集成的基带平台&#xff0c;结合了调制解调器和应用处理子系统&#xff0c;以支持LTE/LTE-A和C2K智能终端应用。 MTK67…

2023年12月GESP Python三、四级编程题真题解析

三、2023年12月GESP Python三级编程题 【三级编程题1】 【试题名称】&#xff1a;小猫分鱼 【问题描述】 海滩上有一堆鱼&#xff0c;N只小猫来分。第一只小猫把这堆鱼平均分为N份&#xff0c;多了i<N条鱼&#xff0c;这只小猫把多的i条鱼扔入海中&#xff0c;拿走了一份…

【小沐学Unity3d】3ds Max 减面工具:Simplyon(Unity3d,Python)

文章目录 1、简介2、下载安装2.1 安装Simlygon插件2.2 安装USD插件 3、使用测试4、Python测试结语 1、简介 Simplygon 带有一个 Unity 插件&#xff0c;它公开了优化功能&#xff0c;例如缩减、聚合、重新划分网格、冒名顶替者&#xff08;SingleView、BillboardCloud / Veget…

Module build failed: TypeError: this.getOptions is not a function

在使用webpack打包出现以上错误时&#xff0c;可能是你安装的css-loader和style-loader的版本过高。 我用的webpack版本是3.6.0 因此需要降低一下版本 在你编辑器终端输入以下命令&#xff1a; npm install css-loader3.6.0 npm install --save-dev style-loader1.00 然后接下…

hyper-v ubuntu2204指定静态ip地址

虚拟机静态IP设置 虚拟机每次重新启动&#xff0c;都会动态分配IP&#xff0c;这导致我们无法使用一个固定的ip连接到虚拟机内部。解决该问题的最直接有效的办法就是给虚拟机绑定2张网卡&#xff0c;一张用于连接外网、一张用于连接内网。 init 0 关机&#xff0c;也可以从管…