在開發(fā)中常常會使用到多級列表。為了不再重復(fù)寫構(gòu)建列表的代碼分井,可以規(guī)定列表的數(shù)據(jù)格式车猬,并將列表封裝成一個(gè)可重用的模塊,因?yàn)檫f歸解析列表數(shù)據(jù)源尺锚,所以支持任意多級珠闰,代碼在最后給出鏈接。
效果(可拖動列表頭部標(biāo)題瘫辩,拉伸列表):
任意級列表
要使用這個(gè)模塊伏嗜,傳入的數(shù)據(jù)要遵守以下格式
var node0 = {
"nodeLevels": 0,
"type": 0,
"isChecked": false,
"nodeData": {"text": "廣東省", "headImgUrl": null}
"sonNodes": [{
"nodeLevels": 1,
"type": 0,
"sonNodes": []
};
其中的 sonNodes一定要賦值為數(shù)組,數(shù)組里面可放置子節(jié)點(diǎn),然后伐厌,節(jié)點(diǎn)放入數(shù)組內(nèi)承绸,作為參數(shù),實(shí)例化一個(gè)列表,如下
<script src="jquery-2.1.0.js"></script>
<script src="require.js"></script>
<script src="LZF.TreeView.js"></script>
requirejs.config({
paths: {
"jquery": "jquery-2.1.0",
}
});
require(['TreeView'], function (TreeView) {
var dataSource = [node0];
//'mBody'是treeView的父元素的id,
//dataSource 是列表的數(shù)據(jù)源
//第三個(gè)參數(shù)挣轨,是點(diǎn)擊列表后的回調(diào)军熏,返回末節(jié)點(diǎn)的nodeData的數(shù)據(jù)和選中或未選中狀態(tài)
var treeView = TreeView.initWithFrame('mBody', dataSource, function (text) {
console.log(text);
});
});