zTree复选框案例

一.配置树参数

//1.获取setting值
function getSetting(){var setting = {view: {dblClickExpand: true,selectedMulti : true,//可以多选showLine: true},check: {  enable: true ,//显示复选框  chkStyle : "checkbox"},data: {key: {title:"t"},simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: null}},callback: {onCheck: onCheck}};return setting;
}

二.初始化树(创建树)

//2.创建树function createTree(treeId,dL,dLSize){//获取树参数默认值var setting=getSetting();var zNodes=new Array();//设置根节点数据zNodes[0]={ id:'##', pId:"-1", name:'物资类别', t:'物资类别',open:true};for(var i=0;i<dLSize;i++){//设置子节点数据zNodes[i+1]={ id:dL[i].classCode, pId:dL[i].parentCode, name:dL[i].className+"("+dL[i].classCode+")",classId:dL[i].classId, t:dL[i].className};}//1)创建zTree树$.fn.zTree.init($(treeId), setting, zNodes);//2)初始化已经被选中的物资类别checkMaterial();}

三.选中一开始被选中的(初始化一开始就选了的内容)

//3.初始化被选中的物资类别function checkMaterial(){var classCodes = $("#classCodes").val();//物资编码var datalist = classCodes.split("，");//将物资编码打散成数组//获取所有树节点var treeObj = $.fn.zTree.getZTreeObj("materialTree");if(datalist!='' &&datalist.length>0){var nodes=treeObj.getNodes();//获取所有子节点for(var i=0;i<datalist.length;i++){//通过id查找节点var node = treeObj.getNodeByParam("classId",datalist[i],null);//选中该节点if(node!=null){//先判断节点是否为空//选中该节点treeObj.checkNode(node,true,true);//获取该节点父节点var parent = node.getParentNode();if(!parent.open){//如果父节点没有展开则展开父节点treeObj.expandNode(parent,true,true);}}}}}

四.树的回调事件(保存选择的复选框内容)

//4.树的点击事件回调函数function onCheck(event, treeId, treeNode){var classCodes = $("#classCodes").val();//物资编码var classNames = $("#classNames").val();//物资名字//alert("onCheck");//获取所有树节点var treeObj = $.fn.zTree.getZTreeObj("materialTree");if(treeNode.checked){//如果是选中节点if(treeNode.isParent){//如果选中的是父节点(有子节点的节点)//获取选中的父节点的所有子节点var childrenNodes = treeNode.children;for (var i = 0; i < childrenNodes.length; i++) {classCodes+="，"+childrenNodes[i].classId;classNames+="，"+childrenNodes[i].name;} }else{//如果是子节点(无子节点的节点)classCodes += "，"+treeNode.classId;classNames += "，"+treeNode.name;}}else{//如果是取消选中if(treeNode.isParent){//如果取消的是父节点(有子节点的节点)//获取消的父节点的所有子节点var childrenNodes = treeNode.children;for (var i = 0; i < childrenNodes.length; i++) {var classCode="，"+childrenNodes[i].classId;var className="，"+childrenNodes[i].name;//删除取消的节点对应的数据classCodes=classCodes.replace(classCode, "");classNames=classNames.replace(className, "");}}else{//如果是子节点(无子节点的节点)classCode = "，"+treeNode.classId;className = "，"+treeNode.name;//删除取消的节点对应的数据classCodes=classCodes.replace(classCode, "");classNames=classNames.replace(className, "");}}//保存选中的值(物资类别编码、物资类别名字)$("#classCodes").val(classCodes);$("#classNames").val(classNames);}

五.保存所选内容

 //5.保存所选物资类别function saveMaterial(inputName){//获取父页要修改input元素var $input=parent.$("input[name="+inputName+"]");//获取选中的物资类别名称var className=$("#classNames").val();var classCode=$("#classCodes").val();//截取掉多余的“，”var classNames=className.substring(1,className.length+1);//截取掉多余的“，”var classCodes=classCode.substring(1,classCode.length+1);//修改所选的物资类别名字$input.val(classNames);//修改所选的物资类别编码$input.attr("classCodes",classCodes);$input.next().val(classCodes);//关闭弹窗parent.layer.closeAll();}

六.关闭弹窗

 //6.关闭弹窗function closeMaterial(){parent.layer.closeAll();}

zTree复选框案例相关推荐

axure实现复选框全选_AxureRP8实战手册-案例73（全选与取消全选效果）
案例73. 全选与取消全选效果案例来源: 百度音乐-音乐盒案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...
layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）
文章目录 layui复选框组件:如何操控隐藏域实现checked状态切换(含代码.案例.截图) 注意: 案例 · 应用场景 · 说明: 案例 · 截图 · 示下主要代码 · 示下: 使用说明: 博主 ...
phpcmsV9 添加内容：如何“增加复选框、下拉菜单”（含案例、截图）- 教程篇
文章目录 phpcmsV9 添加内容:如何"增加多选框.下拉菜单"(含案例.截图)- 教程篇步骤: 效果截图:省略 phpcmsV9 添加内容:如何"增加多选框.下拉菜 ...
jquer案例2：改变元素的样式、复选框、下拉框省份的选择
一.改变元素的样式图表1是这次需要完成的效果,这次的效果是在左边输入数据,右边则显示你输入数据的效果,假如你在左边背景色把它改成绿色,右边正方形的背景颜色也将变成绿色图表 1 先把jquer的插件 ...
ztree autoCheckTrigger=true时子节点复选框选中导致父节点onCheck触发多次问题处理
ztree实现复选框功能,并且子节点选中时,父节点自动选中,子节点取消选中(若所有子节点都没有选中)则父节点也会自动取消选中,check配置如下: check: {enable: true,chk ...
Ztree树的复选框和获取选择的节点实例和代码
0 zTree简介树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree ...
ztree 点击节点操作复选框
var setting = {view: {//dblClickExpand: true,//selectedMulti : true,//可以多选//showLine: true},check: { ...
zTree点击文字勾选复选框
1.问题背景系统利用zTree插件生成下拉复选树,点击文字勾选复选框 2.实现源码 <!DOCTYPE html><html><head> <title&g ...

zTree复选框案例

zTree复选框案例相关推荐

最新文章

热门文章