|
關于ztree中添加復選框的問題，自己研究查資料和api 獲取得到 被選擇的樹節(jié)點的id。
如圖只獲取 公司辦公室和策略組的id
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html>
-
<head>
-
<title>
-
選擇收件人
-
</title>
-
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/demo.css" type="text/css">
-
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
-
<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery-1.7.1.min.js"></script>
-
<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery.ztree.all-3.5.min.js"></script>
-
<SCRIPT type="text/javascript">
-
$(function(){
-
//查詢所有的菜單信息
-
$.ajax({
-
type:'post',
-
url:'getorganization.jsp',
-
success:function(result){
-
-
-
var setting = {
-
data:{
-
simpleData:{
-
enable:true
-
}
-
},
-
check: {
-
enable: true
-
}
-
-
};
-
eval("var ztreenode="+result);
-
$.fn.zTree.init($("#treeDemo"),setting,ztreenode);
-
SelectNode();
-
}
-
});
-
});
-
function SelectNode() {
-
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
-
-
var treenode = treeObj.getNodeByParam("id", <%=code%>, null);
-
treeObj.expandNode(treenode, true, true, true);
-
treeObj.selectNode(treenode);
-
}
-
function fun_getCheckValue(){
-
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
-
-
var nodes=zTree.getChangeCheckedNodes(true);
-
-
var result='';
-
if(nodes.length==0){
-
alert("請選擇部門??！");
-
return false;
-
}
-
for (var i = 0; i < nodes.length; i++) {
-
var halfCheck = nodes[i].getCheckStatus();
-
if (!halfCheck.half){
-
result += nodes[i].id +',';
-
}
-
-
}
-
result=result.substring(0,result.lastIndexOf(","));
-
window.opener.showChiledValue_(result);//傳到父頁面
-
window.close();
-
-
}
-
</SCRIPT>
-
</head>
-
<style type="text/css">
-
-
</style>
-
<body style='background: none repeat scroll 0 0 #ddedf1;'>
-
<div style="float:">
-
<table >
-
<tr><td>
-
<div style="float: left; width: 280px;">
-
<table width="100%" style="padding-left: 10px;">
-
-
<tr>
-
<td align="left" >組織部門：</td>
-
</tr>
-
<tr>
-
<td><div class="zTreeDemoBackground left" style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:250px">
-
-
<div id="treeDemo" class="ztree"></div>
-
-
</div>
-
</td>
-
</tr>
-
</table>
-
-
</div>
-
</div>
-
</td></tr>
-
<tr>
-
<td align="center" ><input type="button"
-
class="btn btn_main" value="確定" onClick="fun_getCheckValue();">
-
-
</td>
-
</tr>
-
</table>
-
</div>
-
-
-
</body>
-
</html>
如果全部獲取的話。并且給節(jié)點綁定click事件的話。代碼如下
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html>
-
<head>
-
<title>
-
選擇收件人
-
</title>
-
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/demo.css" type="text/css">
-
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
-
<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery-1.7.1.min.js"></script>
-
<script charset="utf-8" src="<%=request.getContextPath()%>/js/jquery.ztree.all-3.5.min.js"></script>
-
<SCRIPT type="text/javascript">
-
$(function(){
-
//查詢所有的菜單信息
-
$.ajax({
-
type:'post',
-
url:'getorganization.jsp',
-
success:function(result){
-
-
-
var setting = {
-
data:{
-
simpleData:{
-
enable:true
-
}
-
},
-
check: {
-
enable: true
-
},
-
callback: {
-
onClick: zTreeOnClick
-
}
-
-
};
-
console.info(result);
-
eval("var ztreenode="+result);
-
$.fn.zTree.init($("#treeDemo"),setting,ztreenode);
-
SelectNode();
-
}
-
});
-
});
-
function SelectNode() {
-
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
-
-
var treenode = treeObj.getNodeByParam("id", <%=code%>, null);
-
treeObj.expandNode(treenode, true, true, true);
-
treeObj.selectNode(treenode);
-
}
-
function getAllChildrenNodes(treeNode,result){
-
-
if (treeNode.isParent) {
-
-
var childrenNodes = treeNode.children;
-
-
if (childrenNodes) {
-
-
for (var i = 0; i < childrenNodes.length; i++) {
-
-
result += ','+childrenNodes[i].id ;
-
-
result = getAllChildrenNodes(childrenNodes[i], result);
-
-
}
-
-
}
-
-
}
-
-
return result;
-
-
}
-
function zTreeOnClick(event, treeId, treeNode) {
-
// alert(treeNode.id + ", " + treeNode.name);
-
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
-
var str =treeNode.id;
-
-
str = getAllChildrenNodes(treeNode,str);
-
-
alert(str); //所有葉子節(jié)點ID
-
/* var nodes=zTree.getNodes();
-
var nodes_array = zTree.transformToArray (nodes);
-
alert(nodes_array.length);
-
for(var i=0;i<nodes_array.length;i++){
-
alert(nodes_array[i].name);
-
}
-
*/
-
$.ajax({
-
url:'getYuangong.jsp?deptcode='+treeNode.id+"&mm="+<%=Math.random()%>,
-
success:function(result){
-
$("#employee").html(result);
-
}
-
});
-
};
-
-
$(function(){
-
$.ajax({
-
url:'getUserTongshi.jsp?mm='+<%=Math.random()%>,
-
success:function(result){
-
$("#employee").html(result);
-
}
-
});
-
-
-
});
-
function rightMove(value){
-
if(value!=""){
-
$("#choseemployee").append('<option value="'+value+'">'+$('#employee option:selected').text()+'</option>');
-
$('#employee option:selected').remove();
-
}
-
-
}
-
function leftMove(value){
-
-
if(value!=""){
-
$("#employee").append('<option value="'+value+'">'+$('#choseemployee option:selected').text()+'</option>');
-
$('#choseemployee option:selected').remove();
-
}
-
}
-
-
-
</SCRIPT>
-
</head>
-
<style type="text/css">
-
-
</style>
-
<body style='background: none repeat scroll 0 0 #ddedf1;'>
-
<div style="float:">
-
<table >
-
<tr><td>
-
<div style="float: left; width: 280px;">
-
<table width="100%" style="padding-left: 10px;">
-
-
<tr>
-
<td align="left" >組織部門：</td>
-
</tr>
-
<tr>
-
<td><div class="zTreeDemoBackground left" style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:250px">
-
-
<div id="treeDemo" class="ztree"></div>
-
-
</div>
-
</td>
-
</tr>
-
</table>
-
-
</div>
-
<div style='float:right;width: 250px;'>
-
<table width="100%" >
-
-
<tr>
-
<td align="left">已選收件人：</td>
-
</tr>
-
<tr>
-
<td>
-
<div id="aa"style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:150px">
-
<select ondblclick="leftMove(this.value);" name="choseemployee" id="choseemployee" multiple="multiple"style="width: 240px; height: 150px;">
-
-
</select>
-
</div>
-
</td>
-
</tr>
-
</table>
-
-
</div>
-
<div style='float:right;width: 200px;padding-right: 30px;'>
-
<table width="100%">
-
-
<tr>
-
<td align="left">部門員工：</td>
-
</tr>
-
<tr>
-
<td>
-
<div id="content"style="border-width: 0px 1px 1px; border-style: solid; border-color: rgb(220, 217, 212); border-radius: 0px; padding: 0px; margin-top: 0px; width: 100%;background: none repeat scroll 0 0 #ffffff;overflow: auto;height:150px">
-
<select ondblclick="rightMove(this.value);" name="employee" id="employee" multiple="multiple"style="width: 200px; height: 150px;">
-
-
</select>
-
</div>
-
</td>
-
</tr>
-
</table>
-
-
</div>
-
</td></tr>
-
<tr>
-
<td align="center" ><input type="button"
-
class="btn btn_main" value="確定" onClick="fun_getCheckValue();">
-
-
</td>
-
</tr>
-
</table>
-
</div>
-
<script type="text/javascript">
-
function fun_getCheckValue(){
-
var staffnos=[];
-
var staffnames=[];
-
for(i=0;i<$("#choseemployee option").length;i++){
-
staffnos.push($("#choseemployee option")[i].value);
-
staffnames.push($("#choseemployee option")[i].text);
-
}
-
window.opener.showChiledValue_(staffnos,staffnames);//傳到父頁面
-
window.close();
-
}
-
-
</script>
-
-
</body>
-
</html>
|
