jstree的demo

最新推荐文章于 2022-12-06 12:00:36 发布

雨润泽林

最新推荐文章于 2022-12-06 12:00:36 发布

阅读量1k

点赞数

分类专栏： js 文章标签： jstree

本文链接：https://blog.csdn.net/qq_17555933/article/details/51745782

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、jsp代码

<%@ page language="java" import="com.yiqi.util.PropertiesUtil" import="java.util.*" 
                           import="java.net.InetAddress" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="">
      <script src="<%=request.getContextPath()%>/man/js/ajaxfileupload.js"></script>
    <%@ include file="/WEB-INF/views/treeogrist.jsp"%>
  
</head>
<script>
$(document).ready(function(){ 
	initTreeOrganExe('deptTreeDiv',function(event, data){
		// 点击树事件 
		var departId = data.selected[0].substring(0,1);
		if(departId == 'j'){
			$("#departid").val("");
		}else{
			$("#departid").val(data.selected[0]);
		}
	});
});

</script>
<body>
<input type="hidden" id="departid">
        <div class="page005">
            <div class="row">
                <div class="col-xs-3">
                    <div class="panel">
                        <div class="panel-heading">
                            <h5 class="text-center">组织结构</h5>
                        </div>
                        <div class="panel-body">
                            <div class="tree structure-left structure-dept">
                                <div id="deptTreeDiv" class="demo jstree jstree-2 jstree-default 
                                                  jstree-default-responsive" role="tree"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-9">
                    <div class="panel panel-ui">
                        <div class="panel-body" style="top:71px !important;">
                   <table class="table w-100 table-print-list">
                       <thead>
                       <tr>
                       	<th><input type="checkbox" id="allChecked" name="allChecked" οnclick="SelectAll()"></th>
                           <th>姓名</th>
                           <th>工号</th>
                           <th>产值类型</th>
                           <th>产值事件</th>
                           <th>产值分值</th>
                           <th>经办人</th>
                           <th>审核人</th>
                           <th>产值时间</th>
                           <th>状态</th>
                       </tr>
                       </thead>
                       <tbody  id="body_Target_list">
                       </tbody>
                   </table>
                       <div class="row message-group" style="height: 0%;">
                  </div>
                    <nav class="text-right">
         <ul class="pagination" id="pagination_target">
         </ul>
     </nav>
                   </div>
               </div>
           </div>
          </div>
       </div>
</body>
</html>

2、js

function initTreeOrganExe(treeDiv,onclickTree){
	
	var url = getContextPath()+'/organization/treeOrganExe.html';
 	$.ajax({
 		url:url,
 		type:"POST",
 		dataType:"json",
 		async : false,
 		data:"",
 		cache: false,
 		success:function(data){
 			if(data.error == '0'){
 				 var entitys = data.itemList;
 			   $("#"+treeDiv+"").data('jstree', false).empty().jstree({
 			         "plugins" : [ "wholerow"], 
 			        'core' : {
 			        	"themes" : {  
 			        		 "responsive" : false  
 	  			       } ,
 			            'data' : [
 			                {
 			                    "text" : data.item,
 			                   	"state" : { "opened" : true },
 			                   	"children" :entitys,
 			                     "icon":getContextPath()+"/man/images/tree1.png"
 			                }
 			            ]
 	  			       
 	  			       
 			        }
 			    }).bind("select_node.jstree", function (event, data) {
 			    	onclickTree(event, data);
 			 	
 			});
 			}
 			
 		},
 		error:function (error) {
 			layer.alert('连接异常',{icon:2});
 		}
 	});
	
 }</span>

3、controller

@RequestMapping(value="treeOrganExe")
	public void treeOrganExe(ModelAndView mav,HttpServletRequest request,HttpServletResponse response) {
		log.info("process in treeOrganExe ......");
		ReturnJson json = new ReturnJson();
		EnterpriseInfo enterpriseInfo = this.getEnterprise(request);
		
		List<JsTreeData> treeList =  organizationServiceImpl.
                                   initVacationOrganizationJsTree(request, mav, enterpriseInfo.getEnterpriseid());
		
		json.setItem(enterpriseInfo.getEnterprisename());
		json.setItemList(treeList);
		json.setError(Constants.JSON_SUCCESS);
		ResponseWriteUtils.returnAjax(response, json);
	}

4、service

public List<JsTreeData> initVacationOrganizationJsTree(HttpServletRequest request,ModelAndView mav,String enterpriseId) {
		
		String headIcon2 = request.getContextPath()+"/man/images/tree3.png";
		//部门列表
		List<Organization> organizationList = queryEnityListByEntId(enterpriseId);
		
		List<JsTreeData> treeList1 = new ArrayList<JsTreeData>(); 
		List<JsTreeData> treeList2 = null;
		List<JsTreeData> treeList3 = null;
		List<JsTreeData> treeList4 = null;
		for(Organization item1 : organizationList){
			if("企业负责人".equals(item1.getDepartmentname())||"执行部".equals(item1.getDepartmentname())){
				continue;
			}
			JsTreeData tree1 = new JsTreeData();
			if(item1.getParentdepartmentid().equals("1")){
				tree1.setId(item1.getId());
				tree1.setText(item1.getDepartmentname());
				tree1.setIcon(headIcon2);
				treeList1.add(tree1);
				treeList2 = new ArrayList<JsTreeData>();
				for(Organization item2 : organizationList){
					JsTreeData tree2 = new JsTreeData();
					if(item2.getParentdepartmentid().equals(item1.getId())){
						tree2.setId(item2.getId());
						tree2.setText(item2.getDepartmentname());
						tree2.setIcon(headIcon2);
						treeList2.add(tree2);
						tree1.setState(new JsTreeState(false));
						tree1.setChildren(treeList2);
						treeList3 = new ArrayList<JsTreeData>();
						for(Organization item3 : organizationList){
							JsTreeData tree3 = new JsTreeData();
							if(item3.getParentdepartmentid().equals(item2.getId())){
								tree3.setId(item3.getId());
								tree3.setText(item3.getDepartmentname());
								tree3.setIcon(headIcon2);
								treeList3.add(tree3);
								tree2.setState(new JsTreeState(false));
								tree2.setChildren(treeList3);
								//第三级下面循环第四级
								treeList4 = new ArrayList<JsTreeData>();
								for(Organization item4 : organizationList){
									JsTreeData tree4 = new JsTreeData();
									if(item4.getParentdepartmentid().equals(item3.getId())){
										tree4.setId(item4.getId());
										tree4.setText(item4.getDepartmentname());
										tree4.setIcon(headIcon2);
										treeList4.add(tree4);
										tree3.setState(new JsTreeState(false));
										tree3.setChildren(treeList4);
										
									}
								}
							}
						}
					}
				}
			}
		}
		
		return treeList1;
	}

雨润泽林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jstree的demo

1、jsp代码<%@ page language="java" import="com.yiqi.util.PropertiesUtil" import="java.util.*" import="java.net.InetAddress" contentType="text/html; charset=UTF-8" pageEnco
复制链接

扫一扫