最近公司專案中要用到樹形元件,開始用的layui,後來發現layui的樹形元件不支援非同步載入,在網上查發現實現起來很複雜。而公司專案中也有ztree的css,js,於是就選擇了ztree。
先來個普通的,總結分4步(引入js,css就不說了)
1,在body裡給個實體
2,配置setting(setting是什麼先不管,反正一定要配)
var setting =,3,準備父節點的資料};
//isparent 為true 代表這個為父節點,可以把這個去掉或者改為false看看效果4,例項化var znodes=[
, ,
];
//在整個頁面執行完後 例項化5,整個**$(function())
6,效果
沒有加是這個效果 這個樣式是ztree給的
加了是這個效果
重點來了 非同步載入 在普通的基礎上加了 2個**函式
1,準備父節點的資料,先要給一級的父節點乙個初始值(這裡就是前面的3 4 步)
$.ajax(,3,相當於ajax的**函式 datafilter: ajaxdatafilterdatatype : "json",
success : function(data)方法
//從這個**得帶伺服器返回的資料
datafilter: ajaxdatafilter
},check:
},//**函式,取選中的值
callback:
};
//ztree非同步載入**函式4,事件**取值 點選事件觸發的函式,不會知道是什麼資料 列印就完事了function ajaxdatafilter(treeid, parentnode, responsedata) }}
//這個return 的資料 就是直接注入到非同步載入時 子節點的資料
return responsedata.data;
};
function ztreeonclick(event, treeid, treenode)5,完整**}
ztree非同步載入
以前一直困惑於樹的動態載入,前幾天用了treeview,但用於非同步載入一直不太好用,弄得心力交瘁。而且treeview的api也沒有。然後今天在csdn上看到有人提到ztree,我就去下了ztree的相關檔案。不過學習也是需要過程,我差不多用了乙個上午才搞定乙個簡單的非同步載入。現在把相關的資訊記...
JS元件系列 zTree樹形元件
ztree 是乙個依靠 jquery 實現的多功能 樹外掛程式 而且擁有較好的瀏覽器相容性,有著豐富的功能以及可以自定義樣式,足以滿足大部分業務的開發 第一步先導入css及js檔案 第二步在html頁面建立ztree div 第三步初始化ztree var setting 字型樣式函式 select...
ztree強行非同步載入2
ztree進行非同步載入就是靠傳入引數的不同來對不同子 父節點進行判斷的,從後台返回不同的json串。進行展示。var ztree fn.ztree.getztreeobj treedemo 取得ztree的物件,就是根節點的物件 nodes ztree.getselectednodes 取得所有的...