jquery的ztree操作

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@include file="/WEB-INF/views/commons/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择部门</title>
<link rel="stylesheet" href="${UI_FRAME_PATH}/zTree/3.5.17/css/zTreeStyle/zTreeStyle.css">
<link href="${CSS_PATH }/oamgt-style.css" rel="stylesheet" />
</head>
<body>
<table>
<tr>
<td>
<div style='height:300px;210px;border:#C6BEB2 1px solid;margin-top:10px;overflow-y:scroll;'>
<ul id='userTree' class='ztree' style='display: block;'></ul>
</div>
</td>
<td> </td>
<td>
<select style="height:300px;210px;border:#C6BEB2 1px solid;
margin-top:10px;" multiple="multiple" id="selected_users"
ondblclick="removeSelectedVal(this);">
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center" style="padding-top: 10px;">
<input type="button" value="确定" onclick="btnSubmit();"/>
<input type="button" value="关闭" onclick="btnClose();"/>
</td>
</tr>
</table>
</body>
<script type="text/javascript" src="${UI_FRAME_PATH}/zTree/3.5.17/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="${UI_MODULES_PATH }/ldap/layer_comm.js"></script>
<script type="text/javascript">
function btnSubmit() {
var field = document.getElementById("selected_users");
var showStr = "";
var keys = "";
if(field.length != 0) {
for(var i = 0; i < field.options.length ; i++) {
showStr += (i == 0) ? field.options[i].value + "(" + field.options[i].text + ")"
: ";" + field.options[i].value + "(" + field.options[i].text + ")";
keys += (i == 0) ? field.options[i].value : ";" + field.options[i].value;
}
}
$('#show-uids', window.parent.document).val(showStr);
$('#uids', window.parent.document).val(keys);
btnClose();
}

//初始化树
$(document).ready(function(){
initZTree();
});

var initZTree = function() {
var treeObj = ${jsonArray };
var treeNodes = {isParent:true, id:treeObj.rootArray[0].orgCode, name:treeObj.rootArray[0].orgName};
$.fn.zTree.init($("#userTree"), setting, treeNodes);
};

var setting = {
async: {
enable: true,
url: FRAMEWORK_BASE_PATH + "/oamgt/list_oamc_subuser_tree",
autoParam: ["id=orgNo"],
dataType: "text",
type : "get",
dataFilter:function(treeId, parentNode, treeNodes){
var treeUNodes = treeNodes.userArray;
for(var key =0;key<treeUNodes.length;key++){
//*******start*******
treeUNodes[key]["id"]=treeUNodes[key]["userNo"];
treeUNodes[key]["name"]=treeUNodes[key]["userName"];
//*******end*******
}
var treeONodes = treeNodes.subOrgsArray;
for(var key = 0;key<treeONodes.length;key++){
treeONodes[key]["isParent"]=true;
treeONodes[key]["id"]=treeONodes[key]["orgCode"];
treeONodes[key]["name"]=treeONodes[key]["orgName"];
}
treeONodes = JSON.stringify(treeONodes);
treeUNodes = JSON.stringify(treeUNodes);

treeUNodes = treeUNodes.substring(0,treeUNodes.length-1);
treeONodes = treeONodes.substring(treeONodes.indexOf("[")+1);

var treeNodes = "";
if(treeONodes.length==1 || treeUNodes.length==1){
treeNodes = treeUNodes + treeONodes;
}else{
treeNodes = treeUNodes + "," + treeONodes;
}
treeNodes = JSON.parse(treeNodes);
return treeNodes;
},
},
view: {
showLine: true,
dblClickExpand: false,
showIcon: true
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: null,
rootPId: null
}
},
callback: {
onClick:zTreeOnClick
}
};

function zTreeOnClick(event, treeId, treeNode){
var zTree = $.fn.zTree.getZTreeObj(treeId);
var field = document.getElementById("selected_users");
if(!treeNode.isParent){
var single = ${single};
if(single) {
field.options[0] = new Option(treeNode.name, treeNode.id);
} else {
addOption(treeNode.id,treeNode.name,field);
}
} else {
zTree.expandNode(treeNode,"refresh");
}
}
</script>
</html>