jquery easy 1.5 Maven+servlet+jsp+jdbc實現權限管理分配

1.準備工作

       先從官網下載源代碼：點擊打開鏈接，

      下載完成后看如下目錄項：locale myself 和src都是些組件的js，easy ui把這些js都封裝好了，所以我們不需要考慮這些。

    接著我們需要搭建項目環境，我的項目用到了maven，關于maven環境搭建大家可以在網上找點資料看下，在此就不多加贅述了。貼下pom.xml配置具體如圖：

<dependency>            <groupId>javax.servlet</groupId>            <artifactId>servlet-api</artifactId>            <version>2.5</version>            <scope>provided</scope>        </dependency>        <!-- 加入mysql驅動依賴包 -->        <dependency>            <groupId>mysql</groupId>            <artifactId>mysql-connector-java</artifactId>            <version>5.1.27</version>        </dependency>        <dependency>            <groupId>jstl</groupId>            <artifactId>jstl</artifactId>            <version>1.2</version>        </dependency>        <dependency>            <groupId>taglibs</groupId>            <artifactId>standard</artifactId>            <version>1.1.2</version>        </dependency>        <!--引入json包 -->        <dependency>            <groupId>org.apache.commons</groupId>            <artifactId>commons-lang3</artifactId>            <version>3.1</version>        </dependency>        <dependency>            <groupId>commons-beanutils</groupId>            <artifactId>commons-beanutils</artifactId>            <version>1.8.3</version>        </dependency>        <dependency>            <groupId>commons-logging</groupId>            <artifactId>commons-logging</artifactId>            <version>1.1.1</version>        </dependency>        <dependency>            <groupId>commons-collections</groupId>            <artifactId>commons-collections</artifactId>            <version>3.2.1</version>        </dependency>        <dependency>            <groupId>net.sf.ezmorph</groupId>            <artifactId>ezmorph</artifactId>            <version>1.0.6</version>        </dependency>         <dependency>           <groupId>net.sf.json-lib</groupId>                <artifactId>json-lib</artifactId>                 <version>2.4</version>             </dependency>[java] view plain copy print?<build>          <plugins>              <plugin>                  <artifactId>maven-compiler-plugin</artifactId>                  <version>2.3.2</version>                  <configuration>                      <source>1.6</source>                      <target>1.6</target>                  </configuration>              </plugin>              <plugin>                  <artifactId>maven-war-plugin</artifactId>                  <version>2.2</version>                  <configuration>                      <version>3.0</version>                      <failOnMissingWebXml>false</failOnMissingWebXml>                  </configuration>              </plugin>                  <plugin>                    <groupId>org.apache.tomcat.maven</groupId>                  <artifactId>tomcat7-maven-plugin</artifactId>                  <version>2.1</version>                  <configuration>                      <server>tomcat7</server>                      <port>8000</port>                      <url>http://localhost:8000/manager/text</url><!–端口號 –>                      <uriEncoding>UTF-8</uriEncoding>                      <path>/zycweb</path>                      <username>admin</username>                      <passWord>admin</password>                  </configuration>                </plugin>            </plugins>      </build>  
<build>        <plugins>            <plugin>                <artifactId>maven-compiler-plugin</artifactId>                <version>2.3.2</version>                <configuration>                    <source>1.6</source>                    <target>1.6</target>                </configuration>            </plugin>            <plugin>                <artifactId>maven-war-plugin</artifactId>                <version>2.2</version>                <configuration>                    <version>3.0</version>                    <failOnMissingWebXml>false</failOnMissingWebXml>                </configuration>            </plugin>            <plugin>                <groupId>org.apache.tomcat.maven</groupId>                <artifactId>tomcat7-maven-plugin</artifactId>                <version>2.1</version>                <configuration>                    <server>tomcat7</server>                    <port>8000</port>                    <url>http://localhost:8000/manager/text</url><!--端口號 -->                    <uriEncoding>UTF-8</uriEncoding>                    <path>/zycweb</path>                    <username>admin</username>                    <password>admin</password>                </configuration>            </plugin>        </plugins>    </build>一切都準備好后，首先考慮我們 權限管理框架的邏輯，用戶登錄以后先查詢該用戶擁有的角色，再查詢該角色下擁有的菜單模塊。同時管理員可以分配角色擁有哪些模塊，以及所謂的增刪查改。這個是我們考慮需要做的，數據庫采用的是mysql。表結構如下，由于只是簡單的權限控制模塊，沒有考慮增刪查改這些權限控制操作（以后如果有時間再加上吧），如果數據庫只用到了五張表。如圖。
今天有時間，我用erstudio建模工具講表的大致結構規劃出來了，現在大家可以看看表結構。
        2.登錄獲取權限菜單
         用戶名登錄獲取哪些菜單呢？首先獲得用戶角色下擁有的菜單信息。easy ui 返回給客戶端響應的都是json格式數據，所以我們登錄成功進入到主頁面要是json格式，這樣才能給我們想要的結果。那登錄后的界面是啥樣呢？首先從下載好的easyui demo 文件夾里找到layout布局文件夾這個組件中，找到一個demo,你會看到它們是怎么引入js和CSS的。所以嘛，照搬,從full.html引入它的js css
如圖把該引入的css js都引入到本項目中。我是把項目中所有用到的js css都引入到一個公共頁面中了taglib.jsp中。好了應該效果圖也出來了。layout組件分上下左右中五塊區域，首先我們就要考慮west區域，因為這塊區域是樹菜單。這塊剛開始是犯難了，到底是一下子全部加載出來樹呢，還是點擊一下加載出來呢（也就是異步加載，這樣應該很容易理解吧，哈哈），考慮到有的項目可能很多模塊，響應時間不能過長，還是選擇異步加載。異步加載需要考慮先加載一級菜單和二級菜單，然后二級菜單下有沒有三級菜單，需要做個判斷，如果有返回的json格式必須有個狀態state:closed.具體服務器端關鍵代碼如下：（由于剛開始寫沒有用json第三方包都是手寫拼的所以是這樣的）
[java] view plain copy print?<span style=“font-size:12px;”> if (newModelList != null && newModelList.size() > 0) {// 用戶權限是否擁有菜單                          for (int i = 0; i < newModelList.size(); i++) {                              long roleModelId = newModelList.get(i).getModelId();                              for (int j = 0; j < listModelByParentId.size(); j++) {// 查詢菜單是否擁有此角色菜單，作比較                                  TModel tModel = listModelByParentId.get(j);                                  if (tModel.getId() == roleModelId) {                                      List<TModel> listSecond = modelDao.getRoleModelByParentId(tModel.getId());                                      jsonStr.append(”{/”id/”:” + tModel.getId() + “,/”text/”:/”“ + tModel.getName() + “/”,”);                                      if (listSecond != null && listSecond.size() > 0) {                                          jsonStr.append(”/”state/”:/”closed/”“);                                      } else {                                          jsonStr.append(”/”state/”:/”open/”“);                                      }                                        if (tModel.getUrl() != null && !“”.equals(tModel.getUrl())) {                                          jsonStr.append(”,/”url/”:/”“ + tModel.getUrl() + “/”“);                                      } else {                                          // jsonStr.append(“/”url/”:/”servlet/LoginServlet/”“);                                      }                                      jsonStr.append(”},”);                                  }                              }                          }                      }                      if (jsonStr.toString().endsWith(“,”)) {                          String newJson = jsonStr.toString().substring(0, jsonStr.toString().length() - 1);                          jsonStr.replace(0, jsonStr.toString().length(), newJson);                      }                      if (parentId != null && parentId.equals(“0”)) {                          jsonStr.append(”]}]”);                      } else {                          jsonStr.append(”]”);                      }</span>  
<span style="font-size:12px;"> if (newModelList != null && newModelList.size() > 0) {// 用戶權限是否擁有菜單                        for (int i = 0; i < newModelList.size(); i++) {                            long roleModelId = newModelList.get(i).getModelId();                            for (int j = 0; j < listModelByParentId.size(); j++) {// 查詢菜單是否擁有此角色菜單，作比較                                TModel tModel = listModelByParentId.get(j);                                if (tModel.getId() == roleModelId) {                                    List<TModel> listSecond = modelDao.getRoleModelByParentId(tModel.getId());                                    jsonStr.append("{/"id/":" + tModel.getId() + ",/"text/":/"" + tModel.getName() + "/",");                                    if (listSecond != null && listSecond.size() > 0) {                                        jsonStr.append("/"state/":/"closed/"");                                    } else {                                        jsonStr.append("/"state/":/"open/"");                                    }                                    if (tModel.getUrl() != null && !"".equals(tModel.getUrl())) {                                        jsonStr.append(",/"url/":/"" + tModel.getUrl() + "/"");                                    } else {                                        // jsonStr.append("/"url/":/"servlet/LoginServlet/"");                                    }                                    jsonStr.append("},");                                }                            }                        }                    }                    if (jsonStr.toString().endsWith(",")) {                        String newJson = jsonStr.toString().substring(0, jsonStr.toString().length() - 1);                        jsonStr.replace(0, jsonStr.toString().length(), newJson);                    }                    if (parentId != null && parentId.equals("0")) {                        jsonStr.append("]}]");                    } else {                        jsonStr.append("]");                    }</span>整取返回的菜單格式應該如下圖
服務器已經給客戶端發送json格式數據了，那么前端該怎么樣實現異步加載呢？具體代碼如下：
[java] view plain copy print?<span style=“font-size:12px;”>   (</span><span class="string">'#tree'</span><span>).tree({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:<span class="string">'${zyc}/servlet/TreeServlet?parentId=0'</span><span>&nbsp;,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animate:<span class="keyword">true</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;checkbox:<span class="keyword">false</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lines:<span class="keyword">true</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onClick:&nbsp;function(node){&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>(node.url!=</span><span class="string">""</span><span>&nbsp;&amp;&amp;&nbsp;typeof(node.url)!=</span><span class="string">'undefined'</span><span>){&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addtab(node.text,<span class="string">"${zyc}/"</span><span>+node.url);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onBeforeExpand:function(node,param){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span class="string">'#tree'</span><span>).tree(</span><span class="string">'options'</span><span>).url&nbsp;=&nbsp;</span><span class="string">"../servlet/TreeServlet?parentId="</span><span>&nbsp;+&nbsp;node.id;&nbsp;&nbsp;</span><span class="comment">//動態獲取節點&nbsp;&nbsp;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&lt;/span&gt;&nbsp;&nbsp;</span></li></ol><div class="save_code tracking-ad" data-mod="popu_249"><a href="javascr('#tree').tree({                url:'${zyc}/servlet/TreeServlet?parentId=0' ,                animate:true,                checkbox:false,                lines:true,                onClick: function(node){                         if(node.url!="" && typeof(node.url)!='undefined'){                             addtab(node.text,"${zyc}/"+node.url);                            }                   },                onBeforeExpand:function(node,param){                           $('#tree').tree('options').url = "../servlet/TreeServlet?parentId=" + node.id;  //動態獲取節點                   }             });</span>  
<span style="font-size:12px;">   (‘#tree’).tree({              url:’{zyc}/servlet/TreeServlet?parentId=0’ ,              animate:true,              checkbox:false,              lines:true,              onClick: function(node){                       if(node.url!=”” && typeof(node.url)!=’undefined’){                           addtab(node.text,”${zyc}/servlet/TreeServlet?parentId=0’ ,              animate:true,              checkbox:false,              lines:true,              onClick: function(node){                       if(node.url!=”” && typeof(node.url)!=’undefined’){                           addtab(node.text,”${zyc}/”+node.url);                          }                 },              onBeforeExpand:function(node,param){                         $(‘#tree’).tree(‘options’).url = “../servlet/TreeServlet?parentId=” + node.id;  //動態獲取節點                 }           });</span>
沒錯，客戶端就是這樣簡單幾行代碼就實現了異步加載樹，是不是很適合我們這些菜鳥玩玩呢？
此處特別說明（onBeforeExpand函數是關鍵意思是指加載樹展開之前會觸發這個函數再自動追加節點）
3.增刪查改
     增刪查改也就是點擊菜單，獲得相應的鏈接地址，這個我就說明下加載的js tab吧，center區域加上一個初始的tabs頁面如下代碼：
[html] view plain copy print?<div class=“easyui-tabs” id=“tabs” fit=“true” border=“false”>          <div title=“歡迎頁” style=“padding:20px;overflow:hidden;”>               <div style=“margin-top:20px;”>                  <h3></h3>              </div>          </div>      </div>  
 <div class="easyui-tabs" id="tabs" fit="true" border="false">            <div title="歡迎頁" style="padding:20px;overflow:hidden;">                 <div style="margin-top:20px;">                    <h3></h3>                </div>            </div>     </div>樹菜單點擊的時候加載tabs函數如圖
[html] view plain copy print?function addtab(text,url){               if (("#tabs").tabs('exists',&nbsp;text))&nbsp;{&nbsp;&nbsp;&nbsp;//若選項卡已存在，選擇該選項卡&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#tabs").tabs('exists',&nbsp;text))&nbsp;{&nbsp;&nbsp;&nbsp;//若選項卡已存在，選擇該選項卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#tabs").tabs('select',&nbsp;text);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;<span class="attribute">content</span><span>&nbsp;=&nbsp;</span><span class="attribute-value">"&lt;iframe&nbsp;frameborder='0'&nbsp;scrolling='auto'&nbsp;style='width:100%;height:100%'&nbsp;src="</span><span>&nbsp;+&nbsp;url&nbsp;+&nbsp;"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">iframe</span><span class="tag">&gt;</span><span>";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;("#tabs").tabs('add',&nbsp;{&nbsp;&nbsp;&nbsp;//生成新的選項卡，&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title&nbsp;:&nbsp;text,&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;closable&nbsp;:&nbsp;true,&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content&nbsp;:content,&nbsp;&nbsp;&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tools:[{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iconCls:'icon-mini-refresh',&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:function(){&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//window.location.reload("$("#tabs").tabs('add',&nbsp;{&nbsp;&nbsp;&nbsp;//生成新的選項卡，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title&nbsp;:&nbsp;text,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;closable&nbsp;:&nbsp;true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content&nbsp;:content,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tools:[{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iconCls:'icon-mini-refresh',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//window.location.reload("${zyc}/"+url);&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;<span class="attribute">tab</span><span>&nbsp;=&nbsp;('#tabs').tabs('getSelected');&nbsp;//獲得當前tab&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;<span class="attribute">url</span><span>&nbsp;=&nbsp;$('#tabs').tabs('getSelected');&nbsp;//獲得當前tab&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;$(tab.panel('options').content).attr('src');&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(‘#tabs’).tabs(‘update’, {                                         tab : tab,                                         options : {                                         href : url                                         }                                   });                                                                                                     }                          }]                      });                    }           }           
   function addtab(text,url){                 if ($("#tabs").tabs('exists', text)) {   //若選項卡已存在，選擇該選項卡                          $("#tabs").tabs('select', text);                    } else {                          var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src=" + url + "></iframe>";                             $("#tabs").tabs('add', {   //生成新的選項卡，                              title : text,                              closable : true,                              content :content,                              tools:[{                                iconCls:'icon-mini-refresh',                                handler:function(){                                    //window.location.reload("${zyc}/"+url);                                     var tab = $('#tabs').tabs('getSelected'); //獲得當前tab                                     var url = $(tab.panel('options').content).attr('src');                                     $('#tabs').tabs('update', {                                           tab : tab,                                           options : {                                           href : url                                           }                                     });                                 }                            }]                        });                      }             }           增刪查改我就不寫了，網上很多例子的。效果圖如下：
4模塊管理
    模塊管理也就是增刪查改之類的，如圖
      
     樹菜單其實還是west區域的那個連接地址，其實這塊應該是全部的model,但是我圖方便沒改，意義是一樣的。只不過這個樹是全部加載出來的，具體的關鍵代碼如下：
   
[java] view plain copy print?var node = (</span><span class="string">'#tree'</span><span>).tree(</span><span class="string">'getSelected'</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>&nbsp;(node)&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span class="string">'#tree'</span><span>).tree(</span><span class="string">'expandAll'</span><span>,&nbsp;node.target);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span class="keyword">else</span><span>&nbsp;{&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span class="string">'#tree'</span><span>).tree(</span><span class="string">'expandAll'</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li></ol><div class="save_code tracking-ad" data-mod="popu_249"><a href="Javascript:;"><img src="http://s1.VeVb.com/20170308/m0cuyjxd31159.png"></a></div></div><pre name="code" class="java" style="display: none;">	var node =$('#tree').tree('getSelected');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#tree').tree('expandAll',&nbsp;node.target);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#tree').tree('expandAll');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;<img src="http://s1.VeVb.com/20170308/m0cuyjxd31159.png"><pre name="code" class="java" style="display: none;">	var node =$(‘#tree’).tree(‘getSelected’);        if (node) {            (‘#tree’).tree(‘expandAll’, node.target);        } else {$(‘#tree’).tree(‘expandAll’, node.target);        } else {$(‘#tree’).tree(‘expandAll’);        }意思是獲得改樹每個子節點，如果沒展開就展開。修改的comboxtree同理在此就不截圖代碼了
5.角色管理
    角色管理也就分配權限復雜點其它也就是增刪查改。
   
此處用的treeggrid組件,說下邏輯吧json格式具體參照demo里的格式，然后返回到客戶端，屬性分別是id,name（這兩項是不允許修改的是必選項），所以返回的屬性必須有這兩個屬性，其次多加了了ischecked屬性，因為多了一列checkbox。具體代碼我就不copy了（感覺寫了好多就不多寫了！請見諒）
其實感覺里面東西好多，但是無非就是那些用到的組件，只要看看demo，再網上找點資料應該還是能解決掉的。由于本人技術能力有限，就只能寫這樣子了，望大家見解，不喜勿噴！可以互相交流下。謝謝！