`
y806839048
  • 浏览: 1119885 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

ztree

 
阅读更多


=======================================================
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String webPath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort();
String path = request.getContextPath();
webPath += path;
String id = request.getParameter("id");
String isFlag = request.getParameter("isFlag");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>ZTREE DEMO - checkbox</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=webPath%>/resourses/css/demo.css" type="text/css">
<link rel="stylesheet" href="<%=webPath%>/resourses/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=webPath%>/resourses/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=webPath%>/resourses/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=webPath%>/resourses/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>

<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true
},

data: {
key: {
name: "menuName"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: 0

}
}
};

var zNodes =[
{ id:1, parentId:0, menuName:"随意勾选 1", open:false},
{ id:11, parentId:1, menuName:"随意勾选 1-1", open:true},
{ id:111, parentId:11, menuName:"随意勾选 1-1-1"},
{ id:1111, parentId:111, menuName:"随意勾选 1-1-1-1"},
{ id:112, parentId:11, menuName:"随意勾选 1-1-2"},
{ id:12, parentId:1, menuName:"随意勾选 1-2", open:true},
{ id:121, parentId:12, menuName:"随意勾选 1-2-1"},
{ id:122, parentId:12, menuName:"随意勾选 1-2-2"},
{ id:2, parentId:0, menuName:"随意勾选 2", checked:true, open:false},
{ id:21, parentId:2, menuName:"随意勾选 2-1"},
{ id:22, parentId:2, menuName:"随意勾选 2-2", open:true},
{ id:221, parentId:22, menuName:"随意勾选 2-2-1", checked:true},
{ id:222, parentId:22, menuName:"随意勾选 2-2-2"},
{ id:23, parentId:2, menuName:"随意勾选 2-3"}
];

var code;

function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":"ps", "N":"ps"};
zTree.setting.check.chkboxType = type;
//showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
//function showCode(str) {
// if (!code) code = $("#code");
// code.empty();
// code.append("<li>"+str+"</li>");
//}


function  treeSubmit() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var events=[];
$(nodes).each(function(i,val) {
events.push({
id: val.id,
parentId:val.parentId,
menuName:val.menuName
})});
var roleId=$("#roleid").val();

       
        $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/savetree.do?roleId="+roleId,
            data: JSON.stringify(events),
            dataType: "json",
            contentType:"application/json"
           
        });
            window.parent.$.colorbox.close();
        }
        var datamenu;
    function  loaddata() {
    var isFlag="${isFlag}";
    if(isFlag=="no"){
    $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/getAllMenuByIsShow.do",
            dataType: "json",
            success: function (data) {
            datamenu=data;
            $.fn.zTree.init($("#treeDemo"), setting, data);
    setCheck();
    var roleid = $("input[name='roleid']").val();
    loadSelectedData(roleid);
            }
        });
    }else{
        $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/getAllMenuDto.do",
            dataType: "json",
            success: function (data) {
            datamenu=data;
            $.fn.zTree.init($("#treeDemo"), setting, data);
    setCheck();
    var roleid = $("input[name='roleid']").val();
    loadSelectedData(roleid);
            }
        });
    }
        };
       function  loadSelectedData(roleid) {
       //setTimeout(timelater(),5000);
       var zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
        $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/querySelectedListformal.do?roleid="+ roleid,
dataType : "json",
success : function(data) {
var zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
if(zTree_Menu==null){
zTree_Menu=$.fn.zTree.getZTreeObj("treeDemo");
}
var nodes = zTree_Menu.transformToArray(zTree_Menu.getNodes()); 
$(data).each(function(i,val) {

var menuId=val.menuId+"";
if (nodes.length>0) {
for(var i=0;i<nodes.length;i++){
if(menuId==(nodes[i].id+"")){
nodes[i].checked = true;
zTree_Menu.updateNode(nodes[i]);
}
}
}
});
setCheck();

}
});
}
       function timelater() {
alert(111);
}
$(document).ready(function() {
// loadRloeData();
var roleid = $("input[name='roleid']").val();
loaddata();
});
</SCRIPT>
</HEAD>

<BODY>
<div align="center">
<div>

<%--<label>角色：</label>--%>
<%--<select >--%>
<%--<option value="0" selected="selected">===请选择===</option>--%>
<%----%>
<%--</select>--%>
<input type="hidden" name="roleid" id="roleid" value="${id}">
</div>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<br />
<div>
<input type="button" value="提交" onclick="treeSubmit()">

</div>




</div>
</BODY>
</HTML><%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String webPath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort();
String path = request.getContextPath();
webPath += path;
String id = request.getParameter("id");
String isFlag = request.getParameter("isFlag");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>ZTREE DEMO - checkbox</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=webPath%>/resourses/css/demo.css" type="text/css">
<link rel="stylesheet" href="<%=webPath%>/resourses/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=webPath%>/resourses/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=webPath%>/resourses/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=webPath%>/resourses/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>

<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true
},

data: {
key: {
name: "menuName"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: 0

}
}
};

var zNodes =[
{ id:1, parentId:0, menuName:"随意勾选 1", open:false},
{ id:11, parentId:1, menuName:"随意勾选 1-1", open:true},
{ id:111, parentId:11, menuName:"随意勾选 1-1-1"},
{ id:1111, parentId:111, menuName:"随意勾选 1-1-1-1"},
{ id:112, parentId:11, menuName:"随意勾选 1-1-2"},
{ id:12, parentId:1, menuName:"随意勾选 1-2", open:true},
{ id:121, parentId:12, menuName:"随意勾选 1-2-1"},
{ id:122, parentId:12, menuName:"随意勾选 1-2-2"},
{ id:2, parentId:0, menuName:"随意勾选 2", checked:true, open:false},
{ id:21, parentId:2, menuName:"随意勾选 2-1"},
{ id:22, parentId:2, menuName:"随意勾选 2-2", open:true},
{ id:221, parentId:22, menuName:"随意勾选 2-2-1", checked:true},
{ id:222, parentId:22, menuName:"随意勾选 2-2-2"},
{ id:23, parentId:2, menuName:"随意勾选 2-3"}
];

var code;

function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":"ps", "N":"ps"};
zTree.setting.check.chkboxType = type;
//showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
//function showCode(str) {
// if (!code) code = $("#code");
// code.empty();
// code.append("<li>"+str+"</li>");
//}


function  treeSubmit() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var events=[];
$(nodes).each(function(i,val) {
events.push({
id: val.id,
parentId:val.parentId,
menuName:val.menuName
})});
var roleId=$("#roleid").val();

       
        $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/savetree.do?roleId="+roleId,
            data: JSON.stringify(events),
            dataType: "json",
            contentType:"application/json"
           
        });
            window.parent.$.colorbox.close();
        }
        var datamenu;
    function  loaddata() {
    var isFlag="${isFlag}";
    if(isFlag=="no"){
    $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/getAllMenuByIsShow.do",
            dataType: "json",
            success: function (data) {
            datamenu=data;
            $.fn.zTree.init($("#treeDemo"), setting, data);
    setCheck();
    var roleid = $("input[name='roleid']").val();
    loadSelectedData(roleid);
            }
        });
    }else{
        $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/getAllMenuDto.do",
            dataType: "json",
            success: function (data) {
            datamenu=data;
            $.fn.zTree.init($("#treeDemo"), setting, data);
    setCheck();
    var roleid = $("input[name='roleid']").val();
    loadSelectedData(roleid);
            }
        });
    }
        };
       function  loadSelectedData(roleid) {
       //setTimeout(timelater(),5000);
       var zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
        $.ajax({
            type: "post",
            url: "<%=webPath%>/system/acount/querySelectedListformal.do?roleid="+ roleid,
dataType : "json",
success : function(data) {
var zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
if(zTree_Menu==null){
zTree_Menu=$.fn.zTree.getZTreeObj("treeDemo");
}
var nodes = zTree_Menu.transformToArray(zTree_Menu.getNodes()); 
$(data).each(function(i,val) {

var menuId=val.menuId+"";
if (nodes.length>0) {
for(var i=0;i<nodes.length;i++){
if(menuId==(nodes[i].id+"")){
nodes[i].checked = true;
zTree_Menu.updateNode(nodes[i]);
}
}
}
});
setCheck();

}
});
}
       function timelater() {
alert(111);
}
$(document).ready(function() {
// loadRloeData();
var roleid = $("input[name='roleid']").val();
loaddata();
});
</SCRIPT>
</HEAD>

<BODY>
<div align="center">
<div>

<%--<label>角色：</label>--%>
<%--<select >--%>
<%--<option value="0" selected="selected">===请选择===</option>--%>
<%----%>
<%--</select>--%>
<input type="hidden" name="roleid" id="roleid" value="${id}">
</div>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<br />
<div>
<input type="button" value="提交" onclick="treeSubmit()">

</div>




</div>
</BODY>
========================================================
</HTML>
分享到：
| 关于参数传递接受@RequestBody 写的位置不 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ztree官网 ztree官网

    ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...

    zTree帮助文档_ztree_

    **zTree概述** zTree是一款基于JavaScript的树形插件，广泛应用于网页中展示层级结构的数据，例如组织架构、文件目录、菜单系统等。它以其轻量级、高性能、易于扩展的特点深受开发者喜爱。zTree提供了丰富的API接口...

    zTree-zTree_v3-master.zip_ztree_多功能插件

    zTree是一款基于jQuery的开源项目，它以高效、灵活、多能的特点在Web开发领域中广泛应用。"zTree_v3-master.zip"中的"ztree"指的是这个插件的最新版本，即v3版本，而“多功能插件”的标签进一步强调了zTree不仅仅是...

    基于ztree开发的下拉树控件ztree-select

    【基于ztree开发的下拉树控件ztree-select】是一种高效的前端UI组件，它结合了ztree的核心特性和下拉菜单的功能，适用于构建具有层级结构的选中项。ztree是一个广泛使用的JavaScript树形插件，而ztree-select则是其...

    zTree-zTree_v3-各种tree的使用大全(带搜索)

    **zTree_v3详解：全面掌握树形结构的使用** zTree是一款基于JavaScript的开源控件，主要用于构建可交互的树形数据结构。在【zTree-zTree_v3-各种tree的使用大全(带搜索)】这个压缩包中，包含了zTree_v3的完整源码和...

    zTree官方Demo以及api文档

    zTree是一款广泛应用于Web开发中的JavaScript树形插件，它以灵活、易用和功能强大而受到开发者喜爱。本资源包含zTree的官方Demo及API文档，这些资料对于理解和掌握zTree的使用方法至关重要。 首先，我们要理解zTree...

    zTree树的demo和API

    zTree是一款广泛应用于Web开发中的JavaScript插件，主要用于构建可交互的树形结构展示，如组织结构、文件目录等。其强大的功能、易用性和高度的定制性使其在IT行业中备受青睐。本压缩包“zTree_v3”包含了zTree的...

    ztree官网参考文档及demo

    《zTree全方位解析与实战应用》 zTree是一款在Web前端广泛应用的JavaScript树形插件，以其丰富的功能、良好的性能和灵活的定制性受到了开发者的青睐。本文将深入解析zTree的核心概念，介绍其基本使用方法，并通过...

    ztree_bootstrap样式风格

    在IT领域，特别是前端开发中，`ZTree`是一个非常受欢迎的JavaScript树形插件，它主要用于构建可交互的树状结构数据。`ZTree`的功能强大，支持多种操作，如选择、拖拽、编辑等，广泛应用于权限管理、文件目录、组织...

    bootstrap风格ztree适应移动端

    Bootstrap风格的ZTree是将流行的前端框架Bootstrap与ZTree（一个强大的JavaScript树插件）相结合，以实现更适应移动端展示和交互的树形菜单。在移动端应用中，它提供了优化的布局和触摸友好的交互方式，使用户在手机...

    ztree穿梭框.zip

    在IT行业中，zTree是一款非常流行的JavaScript插件，主要用于实现数据的树形展示。它具有丰富的功能、良好的可扩展性和自定义性，被广泛应用于网页的目录结构展示、权限管理等领域。本项目“ztree穿梭框.zip”是将...

    select2ztree.zip

    《基于Select2与jQuery-ZTree实现的树形下拉框详解》 在现代网页开发中，用户界面的设计和交互体验愈发重要。一个优秀的界面能够提升用户的操作效率，增强产品的吸引力。今天，我们将深入探讨如何利用Select2和...

    zTree主题 bootstrapStyle、metroStyle等

    zTree是一款广泛应用于网页端的JavaScript树形菜单插件，它具有丰富的功能和灵活的配置选项，能够轻松创建各种类型的树形结构。在本压缩包中，提供了三种不同的主题风格，分别为bootstrapStyle、zTreeStyle和metro...

    zTree实现多选下拉框

    "zTree实现多选下拉框"这个主题聚焦于如何利用zTree这款JavaScript库来创建一个支持多选功能的下拉框控件。zTree是一款强大的树形插件，广泛应用于网页中展示层次结构数据，如组织结构、文件目录等。本文将详细介绍...

    zTree zTree zTree

    zTree是一款基于jQuery的强大的树形插件，它在网页中广泛用于构建各种类型的树状结构，如文件目录、组织架构、菜单等。zTree以其轻量级、高性能和丰富的功能，深受开发者喜爱。以下是对zTree核心特性和使用方法的...

    zTree树形菜单展开收缩插件

    zTree是一款广泛应用于Web开发中的树形菜单插件，它具有丰富的功能和高度的自定义性，能够帮助开发者轻松创建出交互性强、视觉效果良好的树形结构。在本项目中，"zTree树形菜单展开收缩插件"是其核心应用，主要特性...

    JQuery zTree v3.3

    JQuery zTree是一款基于JavaScript的开源树形插件，它主要应用于网页开发，提供丰富的树状数据展示功能。zTree v3.3是该插件的一个版本，它在前一版本的基础上进行了优化和增强，旨在提供更高效、更稳定的服务。 在...

    实现ztree树形的js和css

    在IT行业中，ZTree是一款非常流行的JavaScript库，用于创建交互式的树形结构，常用于网站导航、文件管理、权限控制等场景。它结合了JavaScript和CSS，提供了丰富的配置选项和功能，如多选、单选、部分选以及全选功能...

    解决ztree添加节点不显示问题

    ### 解决ztree添加节点不显示问题 #### 一、问题背景 在使用zTree库进行前端开发时，可能会遇到一个常见的问题：当尝试通过zTree API动态添加新节点时，新添加的节点无法正常显示在界面上。这个问题在zTree的最新...

    zTreeAPI_v2.5

    ### zTreeAPI_v2.5：深度解析与应用 #### 引言 zTree是一款功能强大的树形数据展示插件，适用于多种Web开发环境。它不仅支持动态加载数据，还提供了丰富的配置项和事件处理机制，使开发者能够灵活地定制树形结构的...

Magicbox
Global site tag (gtag.js) - Google Analytics