由於公司架構較舊,使用的jdk版本為1.4,頁面上也沒有el表達式。
Html
<ul class="easyui-tree" id="data"></ul>
jq
$(function(){ $('#data').tree({ url:'<%=context%>/test.do?action=toTree', lines:true, //顯示樹線 dnd:true, //可拖動 animate:true, //展開效果 onClick:function(node){ }, onBeforeDrop:function(target,source){
// 這個方法的效果是拖動 a 節點 到 b節點 (釋放時) 觸發。但是api解釋為 : 在拖動一個節點之前觸發。 var targetNode = $(this).tree('getNode',target); if(confirm("確認把 : "+source.text+" 更新到 : "+targetNode.text+" 節點下?")) return true; return false; }, onDrop:function(target,source,operate){
// 這個方法的效果是 拖動后觸發向后台更新 被拖動節點更新到目標節點下。 var targetNode = $(this).tree('getNode',target); $.post('<%=context%>/tests.do?action=dndupdate',{source:source.id,target:targetNode.id},function(result){ if(result==1){ // 成功后 onDrop 方法會自動打開目標節點 }else{ alert("更新失敗,請重新嘗試!"); $('#data').tree('reload');
//即使失敗了,但是被拖動節點照樣會追加到目標節點下。但是只是dom里,所以要刷新樹保持實時數據。 } }); } }); });
不知是否我理解錯了這個方法還是翻譯不准確
我的理解是 被拖動節點 拖動時立即觸發,我是這樣理解的。但是實際效果是拖動后釋放到目標節點后觸發。
tree需要的數據格式
后台組裝數據
public String getTreeView(String treeId) throws DefaultException { try { List tree = dao.getTreeNode(treeId);
// dao 判斷 StringUtils.isNotBlank(treeId)?treeId:0 JSONArray toTree = new JSONArray();
// 使用的是 struts1 + hibernate3 沒有spring 也不允許加入其它jar包。。。 if (tree.size()>0) { for (int i = 0; i < tree.size(); i++) { ContractCagetoryVO rootVo = (ContractCagetoryVO)tree.get(i); JSONObject topNode = new JSONObject(); topNode.put("id", rootVo.getFid()); topNode.put("attributes", rootVo.getFisWrite()); // 自定義屬性 topNode.put("text",rootVo.getFname()); topNode.put("state", "open"); //初始化時需要展示子節點 List nodes = dao.getTreeNode(rootVo.getFid()); if (nodes.size()>0) { List tempList = new ArrayList(); Iterator ti = nodes.iterator(); while(ti.hasNext()){ JSONObject childerNode = new JSONObject(); ContractCagetoryVO nodeVo = (ContractCagetoryVO) ti.next(); childerNode.put("id", nodeVo.getFid()); childerNode.put("attributes", nodeVo.getFisWrite()); // 自定義屬性 childerNode.put("text",nodeVo.getFname()); childerNode.put("state", "closed"); tempList.add(childerNode); } topNode.put("children",tempList); } toTree.put(topNode); } } return toTree.toString(); } catch (Exception e) { throw new DefaultException(e); } }
tree是點一下 就會發送請求 url + 當前節點 id 。
效果