在开发中常常会使用到多级列表。为了不再重复写构建列表的代码,可以规定列表的数据格式,并将列表封装成一个可重用的模块,因为递归解析列表数据源,所以支持任意多级,代码在最后给出链接。
效果(可拖动列表头部标题,拉伸列表):
要使用这个模块,传入的数据要遵守以下格式
var node0 = {
"nodeLevels": 0,
"type": 0,
"isChecked": false,
"nodeData": {"text": "广东省", "headImgUrl": null}
"sonNodes": [{
"nodeLevels": 1,
"type": 0,
"sonNodes": []
};
其中的 sonNodes一定要赋值为数组,数组里面可放置子节点,然后,节点放入数组内,作为参数,实例化一个列表,如下
<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 是列表的数据源
//第三个参数,是点击列表后的回调,返回末节点的nodeData的数据和选中或未选中状态
var treeView = TreeView.initWithFrame('mBody', dataSource, function (text) {
console.log(text);
});
});