利用Easy UI生成非同步樹以及動態新增標籤頁
生成非同步樹
1.生成一個空樹,一般放在使用easyui佈局的west模組中
<ul id="menuTree" class="easyui-tree">
2.從伺服器獲取節點資訊,後端返回的json資料需包含以下屬性:pid(父節點id)、id、text、state、url。注意!!!:千萬不要在url後面加再加請求字串id=node.id,easy ui本身會自動以表單的形式新增一個id(id是節點的屬性值node.id)請求引數。如果加了請求字串如下形式,後臺接收id的請求引數值會出現 id值,id值 這種情況。
下面的寫法是正確的:
$('#kunlunMenuTree').tree('options').url = "${ctp}/menu/menuInfo?id="+node.id;
下面的寫法是正確的:
$('#menuTree').tree({
url: '${ctp}/menu/menuInfo', //向後臺傳送id,獲取根節點
lines:true,
//節點點開前觸發
onBeforeExpand:function(node){
$('#menuTree').tree('options').url = "${ctp}/menu/menuInfo?pid="+node.pid+"&flag="+node.flag;
},
//返回過濾過的資料進行展示,這裡返回的資料作為點開節點的子節點
loadFilter: function(data){
if (data.msg){
return data.msg;
} else {
return data;
}
},
onClick: function(node){
//如果節點有url屬性,則開啟一個標籤頁
if(node.url!=null){
addTab(node.text, node.url,node.id);
}
}
});
3.節點類的設計,可按自己需求去設計,這裡貼上我自己的(有點亂)
/**
* 封裝選單當前節點的相關資訊
*
* @author kun-24-1
*
*/
public class KunMenuNode {
// 當前節點的父節點id
private Integer pid;
// 當前節點的id
private Integer id;
// 節點顯示的名字
private String text;
// 節點的狀態 open或者closed
private String state;
// 節點的url
private String url;
// 標誌
private int flag;
// 圖示
private String iconCls;
public KunMenuNode() {
super();
}
public KunMenuNode(Integer pid, Integer id, String text, String state, String url, int flag, String iconCls) {
super();
this.pid = pid;
this.id = id;
this.text = text;
this.state = state;
this.url = url;
this.iconCls = iconCls;
this.flag = flag;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}
}
4.Controller返回的是父節點資料,或者是根據父節點查出來的子節點的資料,放到List中,轉換為json資料返回給客戶端即可
動態新增標籤頁tabs
1. 建立一個放置標籤頁的div標籤,一般放在Easy ui佈局的center區域
<div id="mainTabs" class="easyui-tabs" data-options="fit:true"></div>
2. 建立動態新增tab的函式function addTab(title, url,id) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="${ctp}/menu/' + url + '?id='+id+'" style="width:100%;height:100%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title,
content: content,
closable: true,
});
}
}
3. 在需要新增標籤頁的地方呼叫此函式即可,比如上述新增樹選單項被點選的時候,會根據當前節點是否有url屬性來動態新增一個標籤頁
相關文章
- jq動態生成的元素(標籤)新增點選事件事件
- jQuery基礎學習(3)(獲取標籤屬性,動態新增標籤)jQuery
- jsp 介面標籤頁 新增圖示JS
- 頁面動態加入<script>標籤並執行程式碼行程
- JSP頁面動態生成表格併為表格新增事件JS事件
- JavaScript 動態建立style標籤JavaScript
- 為ElementUI的標籤頁新增生命週期UI
- easy ui datagrid 資料分頁UI
- 跨標籤頁通訊以及實戰排坑
- Flutter 熱更新及動態UI生成FlutterUI
- Asp.net實現靜態頁-新增新聞生成靜態頁ASP.NET
- JS新增標籤效果JS
- 利用shell指令碼生成動態sql指令碼SQL
- 自動為新文章新增標籤WordPress外掛(可控制標籤數量)
- Android 動態代理以及利用動態代理實現 ServiceHookAndroidHook
- 利用Django徒手寫個靜態頁面生成工具Django
- 動態menu導航條以及treeview樹View
- HTML5 新增標籤HTML
- HTML表單標籤詳解:如何用HTML標籤打造互動網頁?HTML網頁
- HTML簡介,結構,標籤以及標籤語義HTML
- SAP WebClient UI頁面標籤的決定邏輯介紹WebclientUI
- 陪玩遊戲系統釋出動態,是怎麼新增話題標籤的遊戲
- Flutter從入門到奔潰(五):擼一些UI互動以及動態頁面FlutterUI
- 用jQuery-Easy-UI編寫註冊頁面jQueryUI
- 使用Easy UI進行頁面的簡單佈局UI
- js生成動態樹狀結構及排序JS排序
- H5新增標籤元素H5
- ASP.NET動態生成html頁面ASP.NETHTML
- JSP自定義標籤之三:為標籤新增屬性JS
- 利用JQuery的load函式動態載入頁面 以及jQuery動態載入頁面和請求所返回的資料jQuery函式
- SVG 在 image 標籤中的動態修改技巧SVG
- MyBatis標籤實現的動態SQL語句MyBatisSQL
- FastHook——巧妙利用動態代理實現非侵入式AOPASTHook
- 為 UIAutomation 新增自動化測試標籤的探索UI
- js給html標籤新增屬性JSHTML
- 利用標籤完善你的網站網站
- input標籤單行文字域type="text"的可以新增屬性以及其描述
- 使用.Net Core RT 生成標準動態庫