extjs4.2 動態載入樹 treePanel
由於專案的需求，需要寫一個動態的樹（treePanel），具體的資料從資料庫中查詢出來，搞了我差不多兩天的時候，都沒有能夠在extjs的前臺正確的顯示出來，網上參考了無數例子，修改了N多遍，都是無法實現。採用了兩種方法，一種就是在前臺獲取資料以後，使用treeNode，鬱悶的是extjs4.0以後就沒有treeNode了，只有Node，然後在使用getNodeById（）的時候一直無法實現，還有一種方法就是在後天拼樹，然後前臺接收顯示，這個方法在網上倒是有很多的例子，但是都無法實現（extjs4.0以後修改了很多的東西啊）。
終於在查看了extjs4.2的原始碼後，發現了有個treegrid.json檔案，開啟一看，果然第二中方法還是返出來的json的格式不符合要求，所以一直無法實現啊。修改了一下，終於完成，現把程式碼貼出來，以供大家參考和自己以後方便再次使用，
後臺拼接樹形返回json的程式碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 |
/**
* Event公開： 返回拼接好的樹形的json
* @return
* @throws IOException
*/
public String releaseSearch() throws IOException {
// 查詢結果
HashMap<String, Object> map = new HashMap<String, Object>();
CategoryDto categoryDto = new CategoryDto();
categoryDto.setFlg(DeleteStatus.NORMAL);
List<CategoryDto> items = categoryService.searchItems(categoryDto); List<Category> li = new ArrayList<Category>();
List<Category> liP = new ArrayList<Category>();
for(int i = 0; i<items.size(); i++){
CategoryDto dto = items.get(i);
Category c = dto.getCategory();
// 所有的Category
li.add(c);
// 根節點的Category
if(c.getCategory()==null||c.getCategory().getId()==null||"".equals(c.getCategory().getId())){
liP.add(c);
}
}
// 拼接json
for(int i = 0; i<liP.size(); i++){
Category c =liP.get(i);
recursionFn(li, c);
}
// 得到json
String str = modifyStr(returnStr.toString());
// 進行轉換
JSONArray jsonObject = JSONArray.fromObject(str);
try{
menuString = jsonObject.toString();
}catch(Exception e){
menuString = "ss";
}
// json 返回值
JsonUtils.write("{\"text\": \".\", \"children\" :"+str+"}");
return Action.SUCCESS;
}
/**
* 迭代出某一個Category下所有的
* @param list
* @param category
*/
public void recursionFn(List<Category> list , Category category){
// 有子專案
if(hasChild(list,category)){
// 拼接： 專案ID
returnStr.append("{\"id\": \"");
returnStr.append(category.getId());
returnStr.append("\" , ");
// 拼接： 專案名
returnStr.append("\"text\": \"Category -- ");
returnStr.append(category.getName());
returnStr.append("\"");
// 拼接： 父節點ID
returnStr.append(",\"parentId\":");
if(category.getCategory()!=null){
returnStr.append("\"");
returnStr.append(category.getCategory().getId());
returnStr.append("\"");
}else{
returnStr.append("\"");
returnStr.append("\"");
}
// 拼接： 城市
returnStr.append(",\"city\":");
returnStr.append("\"");
returnStr.append("常州");
returnStr.append("\"");
// 拼接： 活動時間
returnStr.append(",\"activityTime\":");
returnStr.append("\"");
returnStr.append(StringUtils.join(DateHelper.defaultFormat(category.getBeginDatetime()), " - ", DateHelper.defaultFormat(category.getEndDatetime())));
returnStr.append("\"");
returnStr.append(",\"children\":[");
// 有Event
if(hasEvent(category)){
List<Event> eventList = getEventList(category);
for(int j = 0;j<eventList.size();j++){
// 拼接： eventID
Event e = eventList.get(j);
if(j==0){
returnStr.append("{\"id\": \"");
}else {
returnStr.append(",{\"id\": \"");
}
returnStr.append(e.getId());
returnStr.append("\" , ");
// 拼接：Even名
returnStr.append("\"text\": \"Event -- ");
returnStr.append(e.getName());
returnStr.append("\"");
// 拼接： 父節點ID
returnStr.append(",\"parentId\":");
returnStr.append("\"");
returnStr.append(category.getId());
returnStr.append("\"");
// 拼接： Event城市
returnStr.append(",\"city\":");
returnStr.append("\"");
returnStr.append("常州");
returnStr.append("\"");
// 拼接： Event活動時間
returnStr.append(",\"activityTime\":");
returnStr.append("\"");
returnStr.append(StringUtils.join(DateHelper.defaultFormat(e.getBeginDatetime()), " - ", DateHelper.defaultFormat(e.getEndDatetime())));
returnStr.append("\"");
returnStr.append(",\"leaf\":true},");
}
}
// 得到子專案，進行遞迴
List<Category> childList = getChildList(list,category);
Iterator it = childList.iterator();
while(it.hasNext()){
Category n = (Category)it.next();
recursionFn(list,n);
}
returnStr.append("]},");
} else {
// 沒有子專案
// 拼接： 專案ID
returnStr.append("{\"id\": \"");
returnStr.append(category.getId());
returnStr.append("\" , ");
// 拼接： 專案名
returnStr.append("\"text\": \"Category -- ");
returnStr.append(category.getName());
returnStr.append("\"");
// 拼接： 父節點ID
returnStr.append(",\"parentId\": ");
if(category.getCategory()!=null){
returnStr.append("\"");
returnStr.append(category.getCategory().getId());
returnStr.append("\"");
}else{
returnStr.append("\"");
returnStr.append("\"");
}
// 拼接： 專案城市
returnStr.append(",\"city\":");
returnStr.append("\"");
returnStr.append("常州");
returnStr.append("\"");
// 拼接： 專案 活動時間
returnStr.append(",\"activityTime\":");
returnStr.append("\"");
returnStr.append(StringUtils.join(DateHelper.defaultFormat(category.getBeginDatetime()), " - ", DateHelper.defaultFormat(category.getEndDatetime())));
returnStr.append("\"");
// 有Event
if(hasEvent(category)){
List<Event> eventList = getEventList(category);
returnStr.append(",children:[");
for(int j = 0;j<eventList.size();j++){
// 拼接： EventID
Event e = eventList.get(j);
if(j==0){
returnStr.append("{\"id\": \"");
}else {
returnStr.append(",{\"id\": \"");
}
returnStr.append(e.getId());
returnStr.append("\" , ");
// 拼接： Event名
returnStr.append("\"text\": \"Event -- ");
returnStr.append(e.getName());
returnStr.append("\"");
// 拼接： 父節點ID
returnStr.append(",\"parentId\":");
returnStr.append("\"");
returnStr.append(category.getId());
returnStr.append("\"");
// 拼接： Event城市
returnStr.append(",\"city\":");
returnStr.append("\"");
returnStr.append("常州");
returnStr.append("\"");
// 拼接： Event活動時間
returnStr.append(",\"activityTime\":");
returnStr.append("\"");
returnStr.append(StringUtils.join(DateHelper.defaultFormat(e.getBeginDatetime()), " - ", DateHelper.defaultFormat(e.getEndDatetime())));
returnStr.append("\"");
returnStr.append(",\"leaf\":true},");
}
returnStr.append("]},");
} else {
returnStr.append(",\"leaf\":true},");
}
}
}
/**
* 判斷是否有子節點
* @param list
* @param category
* @return
*/
public boolean hasChild(List<Category> list, Category category){
//判斷是否有子節點
return getChildList(list,category).size()>0?true:false;
}
/**
* 判斷是否有Event
* @param list
* @param category
* @return
*/
public boolean hasEvent(Category category){
//判斷是否有子節點
List<Event > items =getEventList(category);
if(items.size()>0){
return true;
} else {
return false;
}
}
/**
* 修飾一下才能滿足Extjs的Json格式
* @param returnStr
* @return
*/
public String modifyStr(String returnStr){
//修飾一下才能滿足Extjs的Json格式
return ("["+returnStr+"]").replaceAll(",]", "]").replaceAll(",,",",");
}
/**
* 得到子節點列表
* @param list
* @param category
* @return
*/
public List<Category> getChildList(List<Category> list , Category category){
//得到子節點列表
List<Category> li = new ArrayList<Category>();
for(int i=0;i<list.size();i++){
Category n = list.get(i);
if(n.getCategory()!=null){
if(n.getCategory().getId()==category.getId()){
li.add(n);
}
}
}
return li;
}
/**
* 得到Event列表
* @param category
* @return
*/
public List<Event> getEventList(Category category){
//得到子節點列表
List<Event> li = new ArrayList<Event>();
//判斷是否有子節點
EventDto eventDto = new EventDto();
Category cg = new Category();
cg.setId(category.getId());
eventDto.setCategory(cg);
eventDto.setFlg(DeleteStatus.NORMAL);
List<EventDto> items = eventService.searchItems(eventDto);
for(int i =0;i<items.size();i++){
EventDto dto = items.get(i);
Event e = dto.getEvent();
if(e.getReleaseStatus().equals(ReleaseStatus.PUBLIC)){
li.add(e);
}
}
return li;
相關推薦extjs4.2 動態載入樹 treePanel由於專案的需求，需要寫一個動態的樹（treePanel），具體的資料從資料庫中查詢出來，搞了我差不多兩天的時候，都沒有能夠在extjs的前臺正確的顯示出來，網上參考了無數例子，修改了N多遍，都是無法實現。採用了兩種方法，一種就是在前臺獲取資料以後，使用treeNode，鬱悶的是extj extjs4 動態載入樹選單和相應的按鈕是否顯示 ，到對許可權的控制粒度細化到按鈕初步想到對許可權的控制的就是樹選單從資料庫載入，同時也載入相應 增刪改查 按鈕setVisible和setDisabled的true or false值。 我這裡演示用手動設定這些值模擬資料庫查詢到的值。 先說明一下，用setVisible和setDisabled來實現控制 使用zTree.js動態載入樹節點小結樹外掛一般用與多級分類，許可權管理選單，這個Ztree功能還是基本滿足我們的需求 直接上程式碼 @{ ViewBag.Title = "zTree"; } <h2> @ViewBag.Title</h2> <link href="~/zTree_v3 用ExtJS 實現動態載入樹（Load tree）用ExtJS 實現動態載入樹（Load tree） 1、資料庫背景：這裡有一個組織機構表，結構如下： Oracle DDL指令碼： createtable ORGANIZATION( ORGIDNUMBER(10) notnull, PARENTIDNUMBER(1 jquery來製作動態載入樹最近更新的後臺樹節點的載入方式。因為以前用的是jquery-treeview外掛。 但是上網查了下資料，發現用它來實現樹節點的動態載入還是挺麻煩的。於是我自己寫了個動態載入的方式。下面貼程式碼。 css樣式： .treeview li{background: url( extjs4 treegrid動態增加樹節點function appendChild(node, o) { if (o.children != null && o.children.length > 0) { for (var a = 0; a < o.chil extjs4.1 動態載入 checkboxgroup 後checked 為true老是失效的問題+combobo自動選擇特定記錄剛剛遇到這個問題，官方網上也有這個，不過好像沒有解決。 http://www.sencha.com/forum/showthread.php?228669 { xtype: 'checkboxgroup', fieldL Extjs4.2 TreePanel+Asp.net mvc 動態載入節點extjs經常使用的部分有介面、資料模型、資料來源、事件。構建TreePanel需要三個，UI、模型、和資料來源。 在extjs中，為了讓資料來源能夠正確載入資料，我們需要定義以個數據模型。 樹節點的模型定義： Ext.define('TreeData', { e Android中apk動態載入技術研究（2）android插件化及實現name creat package path iss fontsize 調用 dex con 了解了android中類載入的前期知識點後，來看看android中DexClassLoader詳細的實現 詳細載入流程例如以下： 宿主程序會到文件系統比 element ui 全載入樹節點內子項的動態更新為了持之以恆的勳章，不得不在9月的最後幾天，水幾篇原創文章（無奈ing）。本人剛接觸element ui，屬於白痴一個，如果有更好的的方法，歡迎大神留言交流，感激不盡！！！ 其實跟《element ui 懶載入樹節點內子項的動態更新》道理大致是一樣的。 我們得到選中的的節點，或者說是待更 element ui 懶載入樹節點內子項的動態更新為了保持住持之以恆的勳章，不得不在9月的最後幾天內水幾篇原創文章。本人是剛接觸element ui，屬於大白菜一顆，大神有其他方法的話，歡迎評論留言指導。 <el-tree :props="props1" :load="loadNode1" lazy 樹狀下拉combotree的動態載入用的是easyui的combotree外掛 先貼效果 當返回的節點的state為open時說明他是有下級資料的，否則就是節點資料， 每次點選上級的時候，上級節點展開之前，他會根據上級的id取請求他的下級資料，如果有資料，展開後會把資料自動填充為他的下級即children:屬性，依次 ExtJs4 動態載入(Ext.Loader)專案檔案路徑圖 Js程式碼 Ext.Loader.setConfig({ enab BootStrop--ztree外掛和iframe 的連用（點選樹動態載入右邊頁面）先上圖 點選右邊樹後頁面重新整理 我這裡 重新整理之後沒有什麼資料 引入js 和css 樣式 <script type="text/javascript" src="<%=request.getContextPath() Ext4.2.1學習歷程之二：自定義類及類的動態載入原文出處 http://blog.itpub.net/28562677/viewspace-1067421/ -------------------------------------------------------------- 在些extjs類的定義時有必要簡單 ExtJs TreePanel 動態載入<span style="white-space:pre"> </span>今天在做ExtJs 做動態載入的時候，使用刪除第一次可以正確執行，當使用編輯、或新增後，更新的資料一直出不來這是修改之前的程式碼：<pre name="code" cl 使用dtree生成的樹結構，ajax動態載入子節點後，如何繫結右鍵選單續var l_tree = document.getElementById("l_tree_d"); var tree = new dTree("tree");//建立一個物件. tree.add(0,-1,'APISite',"javaScript:getMore java反射學習筆記（2）----java中的靜態載入類和動態載入類首先我們要了解java中的編譯和執行的兩個概念，我們在初學java的時候都學過，我們會先寫一個Test.java檔案，然後javac Test.java，最後在java Test 。這其中的java Extjs4.2 MVC 動態新增刪除元件例子 ：將一個grid新增到一個panel中去 panel Ext.define('MyApp.view.MyPanel', { extend: 'Ext.panel.Panel', alias: 'widget.myPanel',//與 動態載入XAML檔案（2）C#程式碼部分 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Co |