我的zTree实践

来源：互联网发布：淘宝刷qq钻是真的吗编辑：程序博客网时间：2024/05/21 09:42
我的权限管理jsp。异步请求权限数据，按照官方API组建ztree所需要的数据格式。
<%@ page contentType="text/html;charset=UTF-8" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><c:set var="ctx" value="${pageContext.request.contextPath}"/><link rel="stylesheet" href="${ctx}/static/ztree/css/metroStyle/metroStyle.css" type="text/css"><script type="text/javascript" src="${ctx}/static/ztree/js/jquery.ztree.core-3.5.js"></script><script type="text/javascript" src="${ctx}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script><script type="text/javascript" src="${ctx}/static/ztree/js/jquery.ztree.exedit-3.5.js"></script><div id="pad-wrapper" >  <div class="row">       <div class="col-sm-12" style='height:50px;'>                </div>      <div id='success_message' class="col-sm-12">      <c:if test="${not empty message}"><div class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>  </c:if>  </div>   <div id='show_message' class="col-sm-12" style="display:none;"><div id="message" class="alert alert-warning"><button data-dismiss="alert" class="close">×</button><span id='span_message'></span></div>  </div>        <div class="col-sm-6">         <a id="add_node_btn" class="btn btn-default btn-sm" href="#" role="button">   <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新建  </a>          <a id="del_node_btn" class="btn btn-default btn-sm" href="#" role="button">   <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> 删除  </a>          <a id="modify_node_btn" class="btn btn-default btn-sm" href="#" role="button">   <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改  </a>         <ul id="treeDemo" class="ztree" ></ul>      </div>      <div class="col-sm-6">             <ul class="submenu unstyled" style="display:none">                          <div class="row form-wrapper"><form id="inputForm" action="${ctx}/pms/mergePms" method="post" class="form-horizontal">    <input type="hidden" id='pid' name="pid" />    <input type="hidden" id='actionTyle' name="actionTyle" /><fieldset>                        <legend><small id='legend_title'></small></legend><div class="form-group"><label for="pmsName" class="col-sm-2 control-label">权限名称:</label><div class="col-sm-6"><input type="text" id="pmsName" name="pmsName"  maxlength="50" class="form-control required"/></div></div><div class="form-group"><label for="accessUri" class="col-sm-2 control-label">访问路径:</label><div class="col-sm-6"><input type="text" value='#' id="accessUri" name="accessUri"  maxlength="60" class="form-control"/></div></div><div class="form-group">    <div class="col-sm-offset-2 col-sm-6">      <button type="submit" class="btn btn-primary">提交</button>      <button type="reset" class="btn btn-default">重置</button>    </div></div></fieldset></form>   </div>             </ul>      </div>  </div></div><script>$(document).ready(function() {$.fn.zTree.init($("#treeDemo"), setting);//为inputForm注册validate函数    $("#inputForm").validate({});    setTimeout(hideMsg,5000);        function hideMsg(){    $('#success_message').hide('slow');    }});//******* 删除 ======$('#del_node_btn').on('click',function(e){var treeObj=$.fn.zTree.getZTreeObj("treeDemo");    nodes=treeObj.getCheckedNodes(true);    ids="";    pids="";    names="";    for(var i=0;i<nodes.length;i++){    if(!nodes[i].isParent){       ids+=nodes[i].id + ",";       names = names + "\n【" + nodes[i].name + "】";    }else{    if(nodes[i].id != '0'){    pids+=nodes[i].id + ",";    }    }    }    ids = ids.substr(0,ids.length-1);    pids = pids.substr(0,pids.length-1);    if(ids != ''){    if(confirm("确定要删除如下权限吗？"+names)){    // ajax 删除    deletePms(ids,pids);    }    hideMessage();    }else{    showMessage('请选择要删除的权限');    }});// 向服务器请求删除权限function deletePms(ids,pids){$.ajax({        type: "POST",        url: "${ctx }/pms/deletePms",        data: {ids:ids,pids:pids},        dataType: "text",        success: function(data,textStatus){        //window.location.href='${ctx }/pms';        $.fn.zTree.init($("#treeDemo"), setting);        },        error : function() {                alert("操作异常！");            }     });}// ******* 添加 ======$('#add_node_btn').on('click',function(e){addClick();});function addClick(){var treeObj=$.fn.zTree.getZTreeObj("treeDemo");    nodes=treeObj.getSelectedNodes(true);    if(nodes.length == 0){    showMessage('请选择父权限');    return;    }$(".submenu").slideDown('fast');if(nodes[0].id == '0'){    $('#legend_title').text('在根节点添加权限');    }else{    $('#legend_title').text('添加：在【'+nodes[0].name+'】权限下面添加子权限');    }$('#pid').val(nodes[0].id);$('#accessUri').val('#');$('#pmsName').val('');$('#actionTyle').val('add');hideMessage();}// ******* 修改 ======$('#modify_node_btn').on('click',function(e){modifyClick();});function modifyClick(){var treeObj=$.fn.zTree.getZTreeObj("treeDemo");    nodes=treeObj.getSelectedNodes(true);    if(nodes.length == 0){    showMessage('请选择要修改的权限!');    return;    }if(nodes[0].id == '0'){showMessage('此节点不能修改');$(".submenu").slideUp('fast');return ;    }else{    $('#legend_title').text('修改：【'+nodes[0].name+'】权限');    }$('#pid').val(nodes[0].id);$('#actionTyle').val('update');$('#accessUri').val(nodes[0].accessUri);$('#pmsName').val(nodes[0].name);$(".submenu").slideDown('fast');hideMessage();}function showMessage(msg){$('#span_message').text(msg);$('#show_message').show();}function hideMessage(){$('#show_message').hide();}function onClick(e,treeId,treeNode){    var actionTyle = $('#actionTyle').val();       if(actionTyle == 'update'){   modifyClick();   }   if(actionTyle == 'add'){   addClick();   }}var setting = {        view: {            selectedMulti: false        },        check: {            enable: true        },        data: {            simpleData: {                enable: true,                idKey: "id",    pIdKey: "pId",    rootPId: ''            }        },        edit: {            enable: false        },        async: {enable: true,url:"${ctx}/pms/getPmsForTree",autoParam:["id", "pId", "name"],otherParam:{"xxx":"aaa"}},        callback:{            onClick:onClick        }};</script>
0 0