jquery樹形控制元件Ztree 使用
<%@ page contentType="text/html; charset=UTF-8"%>
<%
response.setHeader("Charset","UTF-8'");
String path = request.getContextPath();
String zoneId = request.getParameter("zoneId");
%>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.ztree.all-3.2.min.js"></script>
<link type="text/css" href="css/flick/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
var zoneId = "<%=zoneId%>";
var root = "";//樹根節點id
var checkNodes = "";//預設選中id
var zNodes = "";//頂層預設節點 json
var targetId = "";//父頁面id input的id值
var targetNameId = "";//父頁面名稱input的id值
var arr = new Array();
var setting = {
async: {
enable: true,
//autoParam:["id=nodesId"],
autoParam:["id"],
dataFilter: filter
},
check: {
enable: true,
chkboxType: {"Y":"", "N":""}
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey:"pid"
}
},
callback: {
beforeClick: beforeClick,
onCheck: onCheck,
onAsyncSuccess: onAsyncSuccess
}
};
//強行非同步載入某個父節點下的子節點
function asyncNode(node){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.reAsyncChildNodes(node, "refresh", true);
}
//非同步載入成功回撥函式
function onAsyncSuccess(event, treeId, treeNode, msg) {
if(arr.length>0){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
expand(treeNode);
arr.splice(0,1);
var node = zTree.getNodeByParam("id", arr[0] , null);
if(arr.length>0){
asyncNode(node);
}else{
var checkarr = checkNodes.split(",");
for(var i=0;i<checkarr.length;i++){
var node = zTree.getNodeByParam("id", checkarr[i], null);
if(node!=null){
//選中節點
zTree.checkNode(node, true, false, true);
}
}
}
}
}
//展開節點
function expand(node){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
status = "expand";
zTree.expandNode(node, true, false, false);
}
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
/**/
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v1 = "";
v2 = "";
v3 = "";
v4 = "";
v5 = "";
for (var i=0, l=nodes.length; i<l; i++) {
v1 += nodes[i].id + ",";
v3 += nodes[i].name + ",";
}
if (v1.length > 0 ) v1 = v1.substring(0, v1.length-1);
var cityObj = $("#nodeId");
cityObj.attr("value", v1);
if (v3.length > 0 ) v3 = v3.substring(0, v3.length-1);
var cityObj = $("#nodeName");
cityObj.attr("value", v3);
}
//初始化樹後 若有checknode ajax得到該節點經過的路徑 若路徑最高點 大於 傳入的 根節點 則捨棄
function getNodePath(){
$.ajax({
type: 'POST',
url: '<%=path %>/organTree/getRelatedNodes.action?random='+Math.random(),
data:{
"id":checkNodes
},
dataType:'json',
cache : false,
error:function(){alert('系統連線失敗，請稍後再試！')},
success: function(obj){
var j = 0;
for(var i=0;i<obj.length;i++){
if(obj[i].id>=root*1){
arr[j] = obj[i].id;
j++;
}
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node = zTree.getNodeByParam("id", root , null);
asyncNode(node);
}
});
}
//根據父頁面提供資訊初始化引數
function initParamValue(){
if(zoneId!=null){
var zone = $("#"+zoneId,self.opener.document);
root = $(zone).attr("root");
targetId = $(zone).attr("nodeId");
targetNameId = $(zone).attr("nodeName");
var checkNodesZoneId = $(zone).attr("checkNode");
checkNodes = $("#"+checkNodesZoneId,self.opener.document).val();
}else{
alert("zone null");
return false;
}
}
//自動展開並選中指定節點
function initByZNodes(){
$.fn.zTree.init($("#"+"treeDemo"), setting, zNodes);
if(checkNodes.length>0){
getNodePath();
}
}
//獲得根節點json
function initRootNodes(){
if(zNodes==""){
var url = "<%=path %>/organTree/getNodesInfo.action";
$.getJSON(
url,
{
id:root,
rand:new Date().getTime()
},
function(json){
if(json){
json[0].nocheck=true;
root = json[0].id;
zNodes = json;
initByZNodes();
}
}
);
}else{
//alert(zNodes);
}
}
function intiButton(){
$("#choiceOk").click(function(){
var old_id = $("#"+targetId,window.opener.document).attr("value");
if(old_id!=$("#nodeId").val()){
$("#modify",window.opener.document).val("1");
}
$("#"+targetId,window.opener.document).attr("value",$("#nodeId").val());
$("#"+targetNameId,window.opener.document).attr("value",$("#nodeName").val());
self.close();
return false;
});
$("#choiceCancel").click(function(){
self.close();
return false;
});
}
$(document).ready(function(){
initParamValue();
initRootNodes();
intiButton();
});
</script>
<script>
</script>
</head>
<body>
<div style="width:650px;">
<ul>
<form>
<font style="font-size:12px;">
請選擇:
</font>
<input id="nodeName" type="text" readonly value="" style="width:75%;"/>
<input id="nodeId" type="hidden" readonly value="" style="width:80%;"/>
<input id="choiceOk" type="button" value="確定"/>
<input id="choiceCancel" type="button" value="取消"/>
</form>
</ul>
<ul id="treeDemo" class="ztree" style="border:none;margin-top:0; width:100%; height: 600px;"></ul>
</div>
</body>
</html>