Ztree树的复选框和获取选择的节点实例和代码
2017-06-04 07:51
399 查看
关于ztree中添加复选框的问题，自己研究查资料和api 获取得到 被选择的树节点的id。
如图只获取 公司办公室和策略组的id
[html] view
plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/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>
如果全部获取的话。并且给节点绑定click事件的话。代码如下
[html] view
plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/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); //所有叶子节点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>
如图只获取 公司办公室和策略组的id
[html] view
plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/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>
如果全部获取的话。并且给节点绑定click事件的话。代码如下
[html] view
plain copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/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); //所有叶子节点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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ztree树的复选框和获取选择的节点实例和代码
- Ztree树的复选框和获取选择的节点实例和代码
- zTree获取当前节点的下一级子节点数实例
- PHP如何获取表单所有复选框的值？实例代码
- ztree 获取选择的节点
- JS 动态获取节点代码innerHTML分析 [IE,FF]
- 兼容IE,firefox的获取节点的文本值的javascript代码
- jquery的颜色选择插件实例代码
- 获取cpu id的代码实例
- vs2003中如何在treeview里加上复选框，并且完成展开时不提交,改变选择节点时才提交
- Linux下获取进程完整路径（包括进程名）——完整实例代码实现
- JS 动态获取节点代码innerHTML分析 [IE,FF]
- VC实例分析:VC++通过汇编获取代码运行时间
- asp.net 获取图片高度和宽度实例代码
- Microsoft.web.ui treeview 中树型控件的选择，选中节点父子节点同时选中，解决客户端选择以后，在后台代码中无法得到选中节点的值
- Coolite 中前台获取 GridPanel 当前选择行值的代码
- 通过代码获取AM的实例
- 放一段选取treeview控件生成树形菜单复选框所有子节点的js代码
- 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
- asp.net 获取图片高度和宽度实例代码