1、左側tree頁面代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../../../common/taglib/taglib.jsp"%>
<script src="${baseURL }/dwz/js/nav-zzgl-ajax.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
ul.rightTools {
float: right;
display: block;
}
ul.rightTools li {
float: left;
display: block;
margin-left: 5px
}
/*.accordionContens>ul{padding: 0px 15px;}
.accordionContens>ul li{position: relative;line-height: 30px;}
.accordionContens>ul a{height: 20px;line-height:20px;display: block;margin-left: 5px;}*/
/*全局註釋，此處提出tree圖標*/
.tree div div {
background-position: 0 -100px;
background: url(././dwz/themes/default/images/tree/tree.png) no-repeat;
}
</style>
<div class="pageContent" style="padding: 5px">
<div class="tabs">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li>
<a href="javascript:;">
<span>院系部門管理</span>
</a>
</li>
</ul>
</div>
</div>
<div class="tabsContent">
<div>
<div class="panelBar" style="border:0px;">
<a href="javascript:orgOnscrea();" id="updateOrg" class="btn btn-lg btn-primary fa fa-refresh edit" style="padding:2px 10px;;margin: -5px 15px 10px 0;" title="刷新">刷新</a>
</div>
<div class="accordionContens" layoutH="78" id="treecontent">
<ul id="tree" class="tree expand"></ul>
</div>
</div>
</div>
<div class="tabsFooter">
<div class="tabsFooterContent"></div>
</div>
</div>
</div>
<script type="text/javascript">
/*遞歸獲取list數組,根據pid獲取該樹的所有父級ul的id*/
var listData = [];
function getList(data,id){
var flag=false;
var pid='';
for(var item in data){
if(data[item].idStr==id){
flag=true;
pid=data[item].pidStr;
listData.push(data[item].idStr)
}
}
if(flag){
getList(data,pid);
}
}
$(function(){
var data = ${treeDatajson};
var dataLen = data.length;
data[dataLen] = {id:1,idStr:'1',treeName:"院系部門管理",pid:0,pidStr:'0',pidStr:"0"};
console.log('帶總標題的樹');
console.log(data);
//根據菜單主鍵id獲取下級菜單
//id：菜單主鍵id
//arry：菜單數組信息
function GetParentArry(id, arry) {
var newArry = new Array();
// console.log(arry);
for (var i in arry) {
if (arry[i].pidStr == id)
newArry.push(arry[i]);
}
return newArry;
}
//菜單列表html
var menus = '';
var flag = 0;
//根據菜單主鍵id生成菜單列表html
//id：菜單主鍵id
//arry：菜單數組信息
function GetData(id, arry) {
var childArry = GetParentArry(id, arry);
if (childArry.length > 0) {
if(flag==0){
menus += '<ul id="tree" class="tree expand">';
flag=1;
}else{
menus += '<ul id="ul'+id+'">';
}
for (var i in childArry) {
menus += '<li id="'+childArry[i].pidStr+'"><a href="#" tname="'+childArry[i].idStr+'" tvalue="'+childArry[i].treeName+'" onclick="clickId(\''+childArry[i].idStr+'\')">' + childArry[i].treeName + '</a>';
GetData(childArry[i].idStr, arry);
menus += '</li>';
}
menus += '</ul>';
}
}
GetData("0",data);
$("#treecontent").html(menus);
/*打開指定分支*/
var id = $("#pid").val();
// alert('打開頁面時'+id);
if(id!=''){
getList(data,id);
}
// console.log(listData);
if($.fn.jTree) $("ul.tree").jTree(listData);//初始化
});
</script>
2、組件dwz.tree.js修改如下
/**
* @author Roger Wu
* @version 1.0
* added extend property oncheck
*/
(function($){
$.extend($.fn, {
jTree:function(options) {
var op = $.extend({checkFn:null, selected:"selected", exp:"expandable", coll:"collapsable", firstExp:"first_expandable", firstColl:"first_collapsable", lastExp:"last_expandable", lastColl:"last_collapsable", folderExp:"folder_expandable", folderColl:"folder_collapsable", endExp:"end_expandable", endColl:"end_collapsable",file:"file",ck:"checked", unck:"unchecked"}, options);
return this.each(function(){
var $this = $(this);
var cnum = $this.children().length;
$(">li", $this).each(function(){
var $li = $(this);
var first = $li.prev()[0]?false:true;
var last = $li.next()[0]?false:true;
$li.genTree({
icon:$this.hasClass("treeFolder"),
ckbox:$this.hasClass("treeCheck"),
options: op,
level: 0,
exp:(cnum>1?(first?op.firstExp:(last?op.lastExp:op.exp)):op.endExp),
coll:(cnum>1?(first?op.firstColl:(last?op.lastColl:op.coll)):op.endColl),
showSub:(!$this.hasClass("collapse") && ($this.hasClass("expand") || (cnum>1?(first?true:false):true))),
isLast:(cnum>1?(last?true:false):true),
collapse:$this.hasClass("collapse"),
expand:$this.hasClass("expand")
});
});
setTimeout(function(){
if($this.hasClass("treeCheck")){
var checkFn = eval($this.attr("oncheck"));
if(checkFn && $.isFunction(checkFn)) {
$("div.ckbox", $this).each(function(){
var ckbox = $(this);
ckbox.click(function(){
var checked = $(ckbox).hasClass("checked");
var items = [];
if(checked){
var tnode = $(ckbox).parent().parent();
var boxes = $("input", tnode);
if(boxes.size() > 1) {
$(boxes).each(function(){
items[items.length] = {name:$(this).attr("name"), value:$(this).val(), text:$(this).attr("text")};
});
} else {
items = {name:boxes.attr("name"), value:boxes.val(), text:boxes.attr("text")};
}
}
checkFn({checked:checked, items:items});
});
});
}
}
$("a", $this).click(function(event){
$("div." + op.selected, $this).removeClass(op.selected);
var parent = $(this).parent().addClass(op.selected);
var $li = $(this).parents("li:first"), sTarget = $li.attr("target");
if (sTarget) {
if ($("#"+sTarget, $this).size() == 0) {
$this.prepend('<input id="'+sTarget+'" type="hidden" />');
}
$("#"+sTarget, $this).val($li.attr("rel"));
}
$(".ckbox",parent).trigger("click");
event.stopPropagation();
$(document).trigger("click");
if (!$(this).attr("target")) return false;
});
},1);
});
},
subTree:function(op, level) {
// console.log(op);
// console.log(level);
/*增加判斷,當expand爲true時,只顯示一級部門 yps2018-10-15*/
if(op.expand){
return this.each(function(){
$(">li", this).each(function(){
var $this = $(this);
var htmlcode = $(this).context.innerHTML;
var pos1 = htmlcode.indexOf('<ul id="');
var pos2 = htmlcode.indexOf('"><li');
var id = htmlcode.substring(pos1+10,pos2);
var flag = false;
for(var item in op.options){
if(op.options[item] == id){
flag=true;
}
}
if(flag){
var isLast = ($this.next()[0]?false:true);
$this.genTree({
icon:op.icon,
ckbox:op.ckbox,
exp:isLast?op.options.lastExp:op.options.exp,
coll:isLast?op.options.lastColl:op.options.coll,
options:op.options,
level:level,
space:isLast?null:op.space,
showSub:true,
// showSub:flag,
isLast:isLast
});
}else{
var isLast = ($this.next()[0]?false:true);
$this.genTree({
icon:op.icon,
ckbox:op.ckbox,
exp:isLast?op.options.lastExp:op.options.exp,
coll:isLast?op.options.lastColl:op.options.coll,
options:op.options,
level:level,
space:isLast?null:op.space,
showSub:false,
// showSub:flag,
isLast:isLast
});
}
});
});
}else{
return this.each(function(){
$(">li", this).each(function(){
var $this = $(this);
var htmlcode = $(this).context.innerHTML;
var pos1 = htmlcode.indexOf('<ul id="');
var pos2 = htmlcode.indexOf('"><li');
var id = htmlcode.substring(pos1+10,pos2);
var flag = false;
for(var item in op.options){
if(op.options[item] == id){
flag=true;
}
}
if(flag){
var isLast = ($this.next()[0]?false:true);
$this.genTree({
icon:op.icon,
ckbox:op.ckbox,
exp:isLast?op.options.lastExp:op.options.exp,
coll:isLast?op.options.lastColl:op.options.coll,
options:op.options,
level:level,
space:isLast?null:op.space,
// showSub:op.showSub,
showSub:true,
isLast:isLast
});
}else{
var isLast = ($this.next()[0]?false:true);
$this.genTree({
icon:op.icon,
ckbox:op.ckbox,
exp:isLast?op.options.lastExp:op.options.exp,
coll:isLast?op.options.lastColl:op.options.coll,
options:op.options,
level:level,
space:isLast?null:op.space,
// showSub:op.showSub,
showSub:false,
isLast:isLast
});
}
});
});
}
},
genTree:function(options) {
var op = $.extend({icon:options.icon,ckbox:options.ckbox,exp:"", coll:"", showSub:false, level:0, options:null, isLast:false}, options);
return this.each(function(){
var node = $(this);
var tree = $(">ul", node);
var parent = node.parent().prev();
var checked = 'unchecked';
if(op.ckbox) {
if($(">.checked",parent).size() > 0) checked = 'checked';
}
if (tree.size()>0) {
node.children(":first").wrap("<div></div>");
$(">div", node).prepend("<div class='" + (op.showSub ? op.coll : op.exp) + "'></div>"+(op.ckbox ?"<div class='ckbox " + checked + "'></div>":"")+(op.icon?"<div class='"+ (op.showSub ? op.options.folderColl : op.options.folderExp) +"'></div>":""));
op.showSub ? tree.show() : tree.hide();
$(">div>div:first,>div>a", node).click(function(){
var $fnode = $(">li:first",tree);
if($fnode.children(":first").isTag('a')) tree.subTree(op, op.level + 1);
var $this = $(this);
var isA = $this.isTag('a');
var $this = isA?$(">div>div", node).eq(op.level):$this;
if (!isA || tree.is(":hidden")) {
$this.toggleClass(op.exp).toggleClass(op.coll);
if (op.icon) {
$(">div>div:last", node).toggleClass(op.options.folderExp).toggleClass(op.options.folderColl);
}
}
(tree.is(":hidden"))?tree.slideDown("fast"):(isA?"":tree.slideUp("fast"));
return false;
});
addSpace(op.level, node);
if(op.showSub) tree.subTree(op, op.level + 1);
} else {
node.children().wrap("<div></div>");
/*父級初次未打開前選中,打開後,子元素被選中，現在修改爲固定的unchecked yps 2018-10-10*/
// $(">div", node).prepend("<div class='node'></div>"+(op.ckbox?"<div class='ckbox "+checked+"'></div>":"")+(op.icon?"<div class='file'></div>":""));
$(">div", node).prepend("<div class='node'></div>"+(op.ckbox?"<div class='ckbox unchecked'></div>":"")+(op.icon?"<div class='file'></div>":""));
addSpace(op.level, node);
if(op.isLast)$(node).addClass("last");
}
if (op.ckbox) node._check(op);
$(">div",node).mouseover(function(){
$(this).addClass("hover");
}).mouseout(function(){
$(this).removeClass("hover");
});
if(/msie/.test(navigator.userAgent.toLowerCase()))
$(">div",node).click(function(){
$("a", this).trigger("click");
return false;
});
});
function addSpace(level,node) {
if (level > 0) {
var parent = node.parent().parent();
var space = !parent.next()[0]?"indent":"line";
var plist = "<div class='" + space + "'></div>";
if (level > 1) {
var next = $(">div>div", parent).filter(":first");
var prev = "";
while(level > 1){
prev = prev + "<div class='" + next.attr("class") + "'></div>";
next = next.next();
level--;
}
plist = prev + plist;
}
$(">div", node).prepend(plist);
}
}
},
/*渲染複選框*/
_check:function(op) {
var node = $(this);
var ckbox = $(">div>.ckbox", node);
var $input = node.find("a");
var tname = $input.attr("tname"), tvalue = $input.attr("tvalue");
var attrs = "text='"+$input.text()+"' ";
if (tname) attrs += "name='"+tname+"' ";
if (tvalue) attrs += "value='"+tvalue+"' ";
ckbox.append("<input type='checkbox' style='display:none;' " + attrs + "/>").click(function(){
var cked = ckbox.hasClass("checked");
var aClass = cked?"unchecked":"checked";
var rClass = cked?"checked":"unchecked";
ckbox.removeClass(rClass).removeClass(!cked?"indeterminate":"").addClass(aClass);
$("input", ckbox).attr("checked", !cked);
$(">ul", node).find("li").each(function(){
var box = $("div.ckbox", this);
// 找到父節點的子元素,選中/取消選中
// box.removeClass(rClass).removeClass(!cked?"indeterminate":"").addClass(aClass)
// .find("input").attr("checked", !cked);
});
$(node)._checkParent();
return false;
});
var cAttr = $input.attr("checked") || false;
if (cAttr) {
ckbox.find("input").attr("checked", true);
ckbox.removeClass("unchecked").addClass("checked");
$(node)._checkParent();
}
},
/*全選/取消全選/選子項*/
_checkParent:function(){
if($(this).parent().hasClass("tree")) return;
var parent = $(this).parent().parent();
var stree = $(">ul", parent);
var ckbox = stree.find(">li>a").size()+stree.find("div.ckbox").size();
var ckboxed = stree.find("div.checked").size();
var aClass = (ckboxed==ckbox?"checked":(ckboxed!=0?"indeterminate":"unchecked"));
var rClass = (ckboxed==ckbox?"indeterminate":(ckboxed!=0?"checked":"indeterminate"));
// 全選子節點,父節點也選中
// $(">div>.ckbox", parent).removeClass("unchecked").removeClass("checked").removeClass(rClass).addClass(aClass);
// var $checkbox = $(":checkbox", parent);
// if (aClass == "checked") $checkbox.attr("checked","checked");
// else if (aClass == "unchecked") $checkbox.removeAttr("checked");
parent._checkParent();
}
});
})(jQuery);
3、引用tree左側樹的完整頁面，觸發邏輯事件，遞歸處理數據
數據格式是：
[
{id:1,treeName:'一級',pid:0},
{id:2,treeName:'二級',pid:1},
{id:3,treeName:'三級',pid:2},
{id:1,treeName:'一級',pid:0}
]
/*遞歸獲取list數組,根據pid獲取該樹的所有父級ul的id*/
/*加載樹需要的代碼塊---開始*/
var listData = [];
function getList(data,id){
var flag=false;
var pid='';
for(var item in data){
if(data[item].idStr==id){
flag=true;
pid=data[item].pidStr;
listData.push(data[item].idStr)
}
}
if(flag){
getList(data,pid);
}
}
/*加載樹需要的代碼塊---結束*/
$(function() {
/*加載樹需要的代碼塊---開始*/
var treed = ${treeDatajson};
var id = '${pid}';
if(id!=''){
getList(treed,id);
}
if($.fn.jTree) $("ul.tree").jTree(listData);
/*加載樹需要的代碼塊---結束*/
var deptid = '${deptId}';
if("" != deptid) {
$("." + deptid).addClass("idstrClass")
}
});
/*單擊選中該部門,刷新當前頁面*/
function clickId(pid) {
$("#pid").prop("value", pid);
$("input[name='treeName']").val("");
$("#deptPagerForm").submit();
}