您的位置：首页 > Web前端 > JavaScript

jstree的demo

2016-06-23 18:17 405 查看

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" onclick="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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jstree

相关文章推荐

新的分享

章节导航