zTree(一)

来源：互联网发布：杭州高中编程培训机构编辑：程序博客网时间：2024/05/16 17:04

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="com.capinfo.system.entity.Resources"%>

<html>

   <head>
       <title>新增权限</title>
       <script type="text/javascript">
       var zTreeNodes = [ {
           "id" : "-1",
           "pId" : "0",
           "name" : "资源根节点",
           isParent : true
       } ];//数据
       var setting = {
           async : {//异步加载设置
               enable : true,
               url : "../system/createTree.action?ht=" + Math.random(),//异步加载url
               autoParam : [ "id" ]
           },
           expandSpeed : "slow",
           data : {
               simpleData : {
                   enable : true,
                   idKey : "id",
                   pIdkey : "pId",
                   rootPid : "1"
               }
           },
           callback : {

               onClick : onClick
           }

       };
       function onClick(e, treeId, treeNode) {
           var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
                   .getSelectedNodes(), v = "", ids = "";
           nodes.sort(function compare(a, b) {
               return a.id - b.id;
           });
           for ( var i = 0, l = nodes.length; i < l; i++) {
               v += nodes[i].name + ",";
               ids += nodes[i].id + ",";
           }
           if (v.length > 0)
               v = v.substring(0, v.length - 1);
           if (ids.length > 0)
               ids = ids.substring(0, ids.length - 1);
           var cityObj = $("#parentId");
           var cityObjn = $("#resourcesname");
           cityObj.attr("value", ids);
           cityObjn.attr("value", v);
       }
       $(document).ready(function() {
           zTree1 = $.fn.zTree.init($("#treeDemo"), setting, zTreeNodes);
       });
       function showMenu() {
           var cityObj = $("#resourcesname");
           var cityOffset = $("#resourcesname").offset();
           $("#menuContent").css({
               left : cityOffset.left + "px",
               top : cityOffset.top + cityObj.outerHeight() + "px"
           }).slideDown("fast");

           $("body").bind("mousedown", onBodyDown);
       }
       function onBodyDown(event) {
           if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(
                   event.target).parents("#menuContent").length > 0)) {
               hideMenu();
           }
       }
       function hideMenu() {
           $("#menuContent").fadeOut("fast");
           $("body").unbind("mousedown", onBodyDown);
       }
           function add_resource(){
               if(Validator.Validate(document.forms[0])){
                   capSubmit("createResource.action");
               }
           }
           function edit_resource(){
               if(Validator.Validate(document.forms[0])){
                   capSubmit("editResource.action");
               }
           }
           function return_list(id){
               capHref("roleList.action");
           }
       </script>
   </head>
   <body style="text-align: center; ">
   <%
   Resources rc = new Resources();
   rc = (Resources) request.getAttribute("resource");
   String parentId = "";
   String resourcesname = "";
   if (rc != null) {
       parentId = rc.getId();
       resourcesname = rc.getResourcesName();
   }
   %>
   <s:form>
       <s:hidden name="resource.id" id="resourceId"></s:hidden>
       <table width="60%" class="list">
           <tr>
               <td class="list_title">新增资源</td>
           </tr>
             <tr>
                <td align="right">
                   <table class="query_tb" width="100%" border="0" cellpadding="0" cellspacing="0">
                       <tr>
                             <th width="50%">资源名称</th>
                             <td width="50%"><s:textfield id="name" name="resource.resourcesName" dataType="Limit" min="1" max="50" msg="资源名称不能为空,且不能超过50个字"/></td>
                         </tr>
                         <tr>
                             <th width="50%">资源路径</th>
                              <td><s:textfield id="url" name="resource.resourcesUrl" dataType="Limit" min="1" max="100" msg="资源地址不能为空,且不能超过50个字"/></td>
                         </tr>
                          <tr>
                             <th>排序</th>
                              <td><s:textfield id="sortNo" name="resource.sortNo" dataType="Number" msg="请填写数字类型的顺序号"/></td>
                         </tr>

                         <tr>
                             <th>上级资源</th>
                             <td width="25%"><input type="text" name="resourcesname"
                               id="resourcesname" size="20" readonly="readonly"
                               value="<%=resourcesname%>" /> <a onclick="showMenu()">选择</a>
                               <div id="menuContent" class="menuContent"
                                   style="display: none; position: absolute; background: #CCCCCC">
                                   <ul id="treeDemo" class="ztree"
                                       style="margin-top: 0; width: 130px;"></ul>
                               </div> <input type="hidden" name="resource.parentId" id="parentId"
                               value="<%=parentId%>" />
                           </td>
                            <%--   <td>
                              <s:select list="resourceList" listKey="id" listValue="resourcesName" headerKey="-1" headerValue="根节点" name="resource.parentId"/>
                              </td> --%>
                         </tr>
                         <tr align="center">
                            <td colspan="2">
                            <s:if test="null != resource.id && '' != resource.id">
                                <input type="button" class="ListButton2" value="编辑" onclick="javascript:edit_resource();" />
                            </s:if>
                            <s:else>
                                <input type="button" class="ListButton2" value="新增" onclick="javascript:add_resource();" />
                            </s:else>
                                    
                                 <input type="button" class="ListButton2" value="返回" onclick="javascript:return_list();" />
                            </td>
                         </tr>
                     </table>
                  </td>
               </tr>
       </table>
   </s:form>
   </body>
</html>

0 0