MVC+ZTree使用的例子

最新推荐文章于 2021-03-02 12:44:45 发布

sosohotsummer

最新推荐文章于 2021-03-02 12:44:45 发布

阅读量2.2k

点赞数

分类专栏： Ztree

Ztree 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在网页中实现树形结构的弹出窗口，包括ZTree组件的引入、树形弹窗的调用方法及后台接口设计，最后展示了如何通过前端脚本解析JSON数据并呈现树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 导入相关ZTree的相关JS，CSS文件：

2. 调用树形弹出框例子：

[java]view plaincopy 
   
 <tr>  
     <th>组织机构:</th>  
     <td class="pn-fcontent"><input type="text" maxlength="20" class=""  readonly="readonly"  id="orgScope" name="orgScope" required="true"/>   
     <input class="btn" type="button" value="选择" onclick="showPop('addOrgPop');"/> <label>  <font color="red">*</font></label> </td>  
     <th>标签:</th>  
     <td class="pn-fcontent"><input type="text" maxlength="20" class=""  readonly="readonly"  id="appTag" name="appTag" required="true"/>   
     <input class="btn" type="button" value="选择" onclick="showPop('addTagPop');"/> <label>  <font color="red">*</font></label> </td>  
   
 </tr>  

[java]view plaincopy 
   
 var baseUrl = "<@full_path path="/"/>";  
   
 //各种弹出框的JS调用方法  
 function showPop(type,url) {  
     if('addParamsPop' == type) {  
         $.jBox("iframe:<@full_path path="app/addParamsItem"/>", {  
             title: "新增参数",  
             width: 600,  
             height: 300,  
             buttons: { '关闭': true }  
         });  
     } else if('updateParamsPop' == type) {  
         $.jBox("iframe:" + url, {  
             title: "修改参数",  
             width: 600,  
             height: 300,  
             buttons: { '关闭': true }  
         });  
     } else if('addOrgPop' == type) {  
         var url = baseUrl + 'commonorg/getCheckboxTreeOrg?checkedInfo=' + $("#orgScope").val();  
         $.jBox("iframe:" + url, {  
             title: "组织选择",  
             width: 600,  
             height: 300,  
             buttons: { '关闭': true }  
         });  
     } else if('addTagPop' == type) {  
         var url = baseUrl + 'appTag/getCheckboxTreeTag?checkedInfo=' + $("#appTag").val();  
         $.jBox("iframe:" + url, {  
             title: "标签选择",  
             width: 600,  
             height: 300,  
             buttons: { '关闭': true }  
         });  
     } else {  
         //type传递空或者为close表示关闭窗口  
         $.jBox.close(true);  
     }  
 }  

3. 调用commonorg/getCheckboxTreeOrg?checkedInfo= 接口代码例子：

[java]view plaincopy 
   
 package com.ffcs.icity.org.controller;  
   
 import java.util.ArrayList;  
 import java.util.HashMap;  
 import java.util.List;  
 import java.util.Map;  
   
 import javax.servlet.http.HttpServletRequest;  
   
 import net.sf.json.JSONArray;  
   
 import org.apache.commons.lang3.StringUtils;  
 import org.springframework.beans.factory.annotation.Autowired;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.servlet.ModelAndView;  
   
 import com.ffcs.icity.entity.IcityOrg;  
 import com.ffcs.icity.org.controller.vo.OrgReqParamVO;  
 import com.ffcs.icity.org.controller.vo.OrgVO;  
 import com.ffcs.icity.service.IIcityOrgService;  
   
   
   
 /** 
  * 向系统提供公共的相关组织机构操作界面，以及相关通用组织数据获取接口 
  * @author linwei 
  * @createtime 2013-3-20      
  * 
  */  
 @RequestMapping("/commonorg")  
 @Controller  
 public class CommonOrgController {  
   
     @Autowired  
     private IIcityOrgService icityOrgService;  
       
     /** 
      * 该方法通过userId以及token的相关校验，返回过滤后的数据页面至前台 
      *  
      */  
     @RequestMapping("/getCheckboxTreeOrg")  
     public ModelAndView getCheckboxTreeOrg(HttpServletRequest request,OrgReqParamVO orgReqParamVO) {  
           
 //      //暂时不进行权限过滤  
 //      //针对外部传递的用户ID进行权限的过滤操作  
 //      if(StringUtils.isNotEmpty(orgReqParamVO.getUserId())) {  
 //            
 //      }  
                   
         Map<String, Object> params = new HashMap<String, Object>();  
         List<IcityOrg> list = icityOrgService.search(params);  
         List<OrgVO> orgVOList = new ArrayList<OrgVO>();  
         Map checkedMap = this.parseCheckedInfo(orgReqParamVO.getCheckedInfo());  
         OrgVO orgVO = null;  
         for(IcityOrg icityOrg:list){  
             orgVO = new OrgVO();  
             orgVO.setId(String.valueOf(icityOrg.getId()));  
             orgVO.setpId(String.valueOf(icityOrg.getParentId()));  
             orgVO.setName(icityOrg.getName());  
             orgVO.setCode(icityOrg.getCode());  
             //如果长度小于4，说明为全国或者省份，需要自动展示下级节点  
             if(icityOrg.getCode().length() < 2) {  
                 orgVO.setOpen(true);  
             } else {  
                 //表示具体组织节点，无需自动展示下级节点  
                 orgVO.setOpen(true);  
             }  
             //如果外部传递的参数中存在需要打钩的选项  
             if(checkedMap.containsKey(String.valueOf(icityOrg.getId()))) {  
                 orgVO.setChecked(true);  
             } else {  
                 orgVO.setChecked(false);  
             }  
               
             orgVOList.add(orgVO);  
         }  
           
         String json = JSONArray.fromObject(orgVOList).toString();  
         ModelAndView modelAndView=new ModelAndView("/org/common/checkboxTreeOrg");  
         modelAndView.addObject("json", json);  
         return modelAndView;  
     }  
       
       
       
     /** 
      * 该方法通过解析外部传递的已勾选信息的字段，返回对应的MAP数据 
      * @param checkedInfo   (格式为id_code_name;id_code_name) 
      * @return 
      * <pre> 
      *  
      * 
      * </pre> 
      */  
     private Map parseCheckedInfo(String checkedInfo) {  
           
         Map map = new HashMap();  
         if(StringUtils.isNotEmpty(checkedInfo)) {  
             String[] orgArr = checkedInfo.split(";");  
             String[] tempArr = null;  
             for(int i=0;i<orgArr.length;i++) {  
                 tempArr = orgArr[i].split("_");  
                 map.put(tempArr[0], tempArr);  
             }  
         }  
         return map;  
     }  
       
 }  

4. 展示JSON数据的树形结构页面：

[java]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
     <#include "/views/head.html"/>  
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
     <link rel="stylesheet" href="<@full_path path="css/treeAdmRegion.css"/>" type="text/css">  
     <link rel="stylesheet" href="<@full_path path="css/zTreeStyle/zTreeStyle.css"/>" type="text/css">  
     <script type="text/javascript">  
           
         var setting = {  
             check: {  
                       enable: true,                           //设置 zTree 的节点上是否显示 checkbox / radio  
                       chkStyle:"checkbox",                    //勾选框类型(checkbox 或 radio）   
                       chkboxType: { "Y": "ps", "N": "ps" }    //父子级联关系  
                    },  
             data: {  
                 simpleData: {  
                     enable: true                              //true / false 分别表示 使用 / 不使用 简单数据模式  
                 }  
             }  
         };  
           
         //树形结构JSON数据  
         var datas =${json};  
   
         $(document).ready(function(){  
             $.fn.zTree.init($("#ztree"), setting, datas);  
             //获得整个树对象  
             var treeObjs = $.fn.zTree.getZTreeObj("ztree");  
             //获取输入框被勾选(true) 或 未勾选(false)的节点集合。  
             var nodes = treeObjs.getCheckedNodes(true);  
             initParentNodes(nodes,treeObjs);  
               
         });  
           
           
         //初始化树形父节点打勾数据  
         function initParentNodes(nodes,treeObjs) {  
             for(var i=0;i<nodes.length;i++) {  
                 var parentNode = nodes[i].getParentNode();  
                 if(parentNode.checked == true) {  
                       
                 } else {  
                     //如果父节点不为true,则设置成true,同时，继续更新更上一级父节点  
                     parentNode.checked = true;  
                     //更新树形节点属性方法  
                     treeObjs.updateNode(parentNode);  
                     //迭代循环  
                     recursiveNode(parentNode.getParentNode(),treeObjs);               
                 }  
             }             
         }  
           
        //递归相关节点数据     
        function recursiveNode(node,treeObjs) {  
             //alert("code is " + node.code + ",name is " + node.name);  
             if(node != null) {  
                 if(node.checked != true) {  
                     node.checked = true;  
                     treeObjs.updateNode(node);  
                     recursiveNode(node.getParentNode(),treeObjs);  
                 }  
             }  
        }  
           
        //返回值调用方法      
        function returnValue() {  
                   
             var zTree = $.fn.zTree.getZTreeObj("ztree");  
             //获取输入框被勾选(true) 或 未勾选(false)的节点集合。  
             var nodes = zTree.getCheckedNodes(true);  
             var res = "";  
             for (var i = 0; i < nodes.length; i++) {  
                 if(!nodes[i].getCheckStatus().half&&nodes[i].code.length==4)  
                     res +=nodes[i].id+"_"+ nodes[i].code+"_"+nodes[i].name+";";  
       
             }            
             //alert(res);  
             window.parent.getOrgScope(res);  
             window.parent.showPop();  
       }   
            
     </script>  
 </head>  
   
 <body>  
   
 <div>  
     <div>   
         <ul id="ztree" class="ztree"></ul>    
         <ul>                    
                                 
             <input type="button" value="确 定" onclick="returnValue();"></ul>  
     </div>  
       
       
 </div>  
 </body>  
 </html>  