zTree的使用，向后台传值和获取值选中

刺骨的言语ヽ痛彻心扉 2022-05-25 08:11 477阅读 0赞

![70][]

首先引入zTree的css和js

html：

js配置：

获取数据：

返回的数据形式：要有自己的id和其父id，名字

![70 1][]

配置ztree

简单示例：

funcSetting= {
        async:{
            enable:true,
            url:"${ctx}/serviceOrder/getServiceUserList",
            otherParam:{//传入查询参数
                //注意，要传入动态变化的参数必须用return的方式
                "regionGroupId":function(){return $("#regionGroupId").val()
                }
            },
        },
        view: {
            dblClickExpand: false,//禁止双击展开
            showLine: true, 
            selectedMulti: false
        },
        data: {
            key:{
                name:"NAME"//显示的名字
            },
            simpleData: {
                enable:true,
                idKey: "ID", //id
                pIdKey: "PID" //父id
            }
        },
        check:{
            enable:true,
            //chkboxType:{ "Y": "ps", "N": "s" }
            chkStyle: "radio", //选择框，可以是check或者radio
            radioType:"all" //all为全部树状中选择，level为自己一个根节点中选择
        },
        callback: {//回调函数
            onClick:function(event, treeId, treeNode){//点击每个节点回调
                
    
            },
            onAsyncSuccess:function(event, treeId, treeNode, msg) {//树结构加载完后回调
                
            }
        }
    };
    funcTreeObj = $.fn.zTree.init($("#funcTree"), funcSetting, null);  //初始化ztree

### 补充： ###

## 0.ztree里面用到的api和配置看这个手册，非常全面 ##

[http://www.treejs.cn/v3/api.php][http_www.treejs.cn_v3_api.php]

1.查询传入参数用 otherParam,并用return返回

2.刷新树结构时：

funcTreeObj.reAsyncChildNodes(null, "refresh");

这种方法可以让ztree重新发送请求并刷新树结构

3.实现单击展开子节点方法（onClick回调方法中实现）

onClick:function(event, treeId, treeNode){
        funcTreeObj.expandNode(treeNode)//单击节点展开其子节点
        if(treeNode.level==1){ //点击子节点后记录其参数值
            $("#userId").val(treeNode.ID)
        }
    },

4. 树加载完展开某节点

onAsyncSuccess:function(event, treeId, treeNode, msg) {
       // funcTreeObj.expandAll(true);//展开所有节点
       //默认打开顶级（第一级）节点
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
    
          var nodes = treeObj.getNodes();
    
             if (nodes.length>0) {
    
              for(var i=0;i<nodes.length;i++){
    
              treeObj.expandNode(nodes[i], true, false, false);//默认展开第一级节点
    
              }
    
          }
    
    }

5.实现只显示有子节点的根节点

onAsyncSuccess:function(event, treeId, treeNode, msg) {
        var nodes = funcTreeObj.getNodes();//默认只能得到根节点
        var ll=nodes.length;
        //因为循环过程会删除节点导致节点数量变化，所以使用双循环方法
        for (var i=0;i<ll;i++)
        {
            //删除选中的节点
            var l=funcTreeObj.getNodes().length;
            for(var j=0;j<l;j++){
                if(!nodes[j].isParent){//判断根节点是否有子节点，有isParent为true，没有子节点为false
                    //console.log(nodes[j])
                    funcTreeObj.removeNode(nodes[j]);//删除子节点
                    break;
                }
            }
        }
    }

6.编辑时根据后台传来的数据使ztree选中

js提交时向后台传选中项的值：

后台java接收：

//保存升级包
        @RequestMapping(value = "/saveLevelPackage", method = RequestMethod.POST, produces = "text/html;charset=utf-8")
        @ResponseBody
        public String saveLevelPackage(@RequestParam HashMap<String, String> param,
                                       @RequestParam(value = "file") MultipartFile[] files,
                                       HttpServletRequest request,
                                       String T_PACKAGE_CODE, HttpServletRequest req) {
            String result;
            String[] TIDs = req.getParameterValues("TID"); //在request中用字符串数据接收
            try{
                if(T_PACKAGE_CODE!=null&&!T_PACKAGE_CODE.equals("")){
                    orderManageService.removeLevelPackageTrain(param);
                    orderManageService.updateLevelPackage(param);
                }else{
                    orderManageService.saveLevelPackage(param);
                }
                if(TIDs!=null){
                    for(int i=0;i<TIDs.length;i++){
                        if(TIDs[i].equals("1")){
                            continue;
                        }
                        param.put("TID",TIDs[i]);
                        orderManageService.addLevelPackageTrain(param);  //循环保存
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            result = "完成";
            return JSON.toJSONString(result);
        }

java取值时：

//获取升级包等级价格
        @RequestMapping(value = "/getTrainList1", method = RequestMethod.POST, produces = "text/html;charset=utf-8")
        @ResponseBody
        public String getTrainList1(@RequestParam HashMap<String, String> param) {
            RetBase ret = new RetBase();
            List<Map<String, String>> list = new ArrayList<>();
            try {
                list = orderManageService.getTrainList1(param);
                Map<String, String> parent = new HashMap<>();
                parent.put("TITLE", "系统产品");  //因为关系中没有父类，手动加一个父类
                parent.put("PID", "0");
                parent.put("TID", "1");
                list.add(parent);
                ret.setSuccess(true);
                ret.setData(list);
            } catch (Exception e) {
                ret.setSuccess(false);
            }
    
    
            return JSON.toJSONString(list);  //直接将结果集用字符串输出
        }

[70]: /images/20220525/11a84b2a2f1c461a8542a48647b54b79.png
[70 1]: /images/20220525/3126e07a64494ff4aac319f4334f8723.png
[http_www.treejs.cn_v3_api.php]: http://www.treejs.cn/v3/api.php