cocos2dx-js 多层级列表(改进)

上一篇文章http://blog.csdn.net/afei198409/article/details/51327163中说到"渲染多级时,子列表数据必须放在sub_items数组中,如 {txt:"item 1",sub_items:[{txt:"sub item 1"},...]}",这就限制了数据的格式,实际上使用时会感觉很不方便,因为每个客户端的数据格式都不一致. 如开发者A是为某一鞋店开发客户端的，它的数据格式可能是这样的: //鞋子列表 [ {id:0,name:"品牌1",shoes:[{id:10001,name:"男装休闲鞋",price:30},{id:10002,name:"女装休闲鞋",...]},{id:1,name:"品牌2",shoes:[{id:20001,name:"男装运动鞋",price:60},{id:20002,name:"女装运动鞋",...... ] 如上所见,shoes实际上就是一个子列表，如果要使用上文的多层级列表则就要重新构造数据，将它变成以下格式： //新的鞋子列表 [ {id:0,sub_items:[{id:10001,sub_items:[{id:20001,...... ] 这的确令人尴尬． 下面主要针对这个问题作改进： var CommonList = cc.Node.extend({ ... sub_items : "sub_items",// 1.添加一个变量,该变量是一个string,用于指向子列表 ... enableSubItem : function(tag,item_field) { // 2.在启用多层级的同时也修改子列表的指向 this.enable_sub_item = tag; if(typeof (item_field) == 'string') { this.sub_items = item_field; } },... // 3.在所有访问子列表数据的地方进行相应的替换,如下:dataSet[i].sub_items替换成dataSet[i][this.sub_items] getItemData : function(dataSet) { if(!dataSet || dataSet.length === 0) { return; } for(var i = 0,len = dataSet.length; i < len; ++i) { this._itemData.push(dataSet[i]); if(this.enable_sub_item && dataSet[i]._itemOpen && dataSet[i][this.sub_items]) { // <--这里 this.getItemData(dataSet[i][this.sub_items]); // <--这里 } } },... resetData : function(dataSet,itemType,itemParent) { if(!dataSet || dataSet.length === 0) { return; } for(var i = 0,len = dataSet.length; i < len; ++i) { dataSet[i]._itemLevel = itemType; //层级(从0开始计算) dataSet[i]._itemOpen = false; //展开标记 dataSet[i]._itemIndex = i; //当前层级下的索引(从0开始计算) dataSet[i]._itemCnt = dataSet.length; //当前层级总计算 dataSet[i]._itemParent = itemParent; //当前层级父节点 if(this.enable_sub_item && dataSet[i][this.sub_items]) { // <--这里 this.resetData(dataSet[i][this.sub_items],itemType + 1,dataSet[i]); // <--这里 } } },... closeItem: function (data) { data._itemOpen = false; if(data[this.sub_items] && 0 < data[this.sub_items].length) { // <--这里 for(var ind = 0; ind < data[this.sub_items].length; ++ind) { // <--这里 this.closeItem(data[this.sub_items][ind]); // <--这里 } } },... tableCellTouched:function (table,cell) { ... if(this.enable_sub_item) { if(data[this.sub_items] && 0 < data[this.sub_items].length) { // <--这里 data._itemOpen = data._itemOpen ? false : true; reload = true; //收缩其所有子项 if(!data._itemOpen) { this.closeItem(data); } }else { data._itemOpen = false; } } ... },... }); 现在我们重新使用CommonList来对鞋店列表进行渲染： var common_list = new CommonList(l_size); common_list.addItemPrefab(res.UIItemPrefab_1,551,60); common_list.addItemPrefab(res.UIItemPrefab_2,63); var list_delegate = {}; list_delegate.setItem = function (node,data) { ... }; list_delegate.onItemClick = function (node,data) { ... }; common_list.setDelegate(list_delegate); var list_dataSet = [ {id:0,...... ]; common_list.enableSubItem(true,"shoes"); //启用多层级并修改子列表数据指向,让它指向shoes common_list.reloadData(list_dataSet); 至此，数据结构限制就解除了. 不知你有没有注意到，上面改进时也另添加了另一项数据改进: resetData : function(dataSet,itemParent) { ... for(var i = 0,len = dataSet.length; i < len; ++i) { ... dataSet[i]._itemParent = itemParent; //当前层级父节点 ... } },_itemParent记录父节点数据.它有何用处呢? 如当点击列表"男装休闲鞋"这一项时,会触发回调: list_delegate.onItemClick = function (node,data) { ... }; 这时这里参数data指向{id:10001,这个时候如果开发者想得到这一子项的父节点数据,如id,name,直接访问data._itemParent即可得到: data._itemParent.id //值为 0 data._itemParent.name //值为 "品牌1"