cocos2dx 3.x TableView多行多列的使用

前言：当学会使用之后，你会爱上这个控件，无法自拔！
一直使用cc.ScrollView会遇到一个瓶颈，就是数量过多时，滑动肯定会卡。因为它是一开始就创建了所有需要滑动的节点。
而cc.TableView则不一样，它仿造了IOS的UITableView的方式，只创建界面上所看到的TableViewCell，滑动的时候，消失的Cell放入空闲数组，需要显示的Cell就从空闲数组取，直到空闲数组为空才会去创建。
这样极大的节省了内存，但是通过实践才知道，当需要用一个可滑动的多行多列的cc.TableView时，需要做的逻辑是比cc.ScrollView繁琐的，而且你如果没用过的话，就会一连串的掉到坑里面去。
单行单列还不会的同学，可以看一下官方例子，例子路径在引擎下tests\cpp-tests\Classes\ExtensionsTest\TableViewTest，里面有基本的用法。
这里简要介绍一下多行多列的做法，我们先看个图：

由图可知，这里是把一行当做一个TableViewCell，然后用这个TableViewCell去添加四个节点（如果是四列），分别添加到对应的位置。原理很简单，但需要注意的是每个TableViewCell必须有四个节点，如果你的总数不是4的倍数，也就是最后一行需要显示的不是四个，在初始化的时候也需要添加四个节点，因为一旦只添加三个，那么在滑动复用的时候，如果去更新节点数据的话，就会有节点缺失的错误。至于最后一列如果不是四个，那么根据Table的idx对应的只显示总数/4的余数的节点就OK了。
上代码吧：
（我用的是js，引擎是3.11.1版本的）

var TableViewLayer = cc.Layer.extend({    _tableView:null,    ctor: function(){        this._super();        this._init();    },    _init: function(){        this._tableView = new cc.TableView(this,cc.size(960,370));        this._tableView.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);        this._tableView.setDelegate(this);        this._tableView.setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN);        this._tableView.setPosition(0,0);        this.addChild(this._tableView);    },    //cell的touch事件    tableCellTouched:function (table, cell) {                       cc.log("cell touched at index: " + cell.getIdx());    },    //指定每一个Cell的大小，一般来说是统一的    tableCellSizeForIndex:function (table, idx) {        return cc.size(960+5, 153+5);    },    //核心函数，Table滚动的回调    tableCellAtIndex:function (table, idx) {        var strValue = idx.toFixed(0);        var cell = table.dequeueCell();    //从空闲数组中取cell        var label;        if (!cell) {                       //取不到则创建            cell = new CustomTableViewCell(idx);        } else {                           //取到则复用，更新自己所需要更新的UI或数据            label = cell.getChildByTag(123);            label.setString(strValue);            cell.updateData(idx);          //必要：滑动时用来 更新UI显示或是数据        }        return cell;    },    numberOfCellsInTableView:function (table) {        return 10;                        //这里确定TableViewCell的数量    }})

上述代码功能和单行单列的大致一样，重点区别是TableViewCell，其中Pic是自定义类，可以传入相关参数或数据以便于初始化。

var CustomTableViewCell = cc.TableViewCell.extend({    _xGap:12,    _sprList:null,    ctor: function(idx){        this._super();        this._sprList = [];        this._init(idx);    },    draw:function (ctx) {        this._super(ctx);    },    _init: function(idx){        var strValue = idx.toFixed(0);        for(var i = 0; i < 4; i++){            //var sprite = new cc.Sprite(res.NT01_png);            var sprite = new Pic(parseInt(idx * 4) + parseInt(i));            sprite.anchorX = 0;            sprite.anchorY = 0;            sprite.x = sprite.getContentSize().width * i + this._xGap*i;            sprite.y = 0;            this.addChild(sprite);            this._sprList.push(sprite);        }        var label = new cc.LabelTTF(strValue, "Helvetica", 20.0);        label.x = 0;        label.y = 0;        label.anchorX = 0;        label.anchorY = 0;        label.tag = 123;        this.addChild(label);    },    updateData: function(idx){        for(var i in this._sprList){            var spr = this._sprList[i];            var lab = spr.getChildByTag(123);            lab.setString(idx * 4 + parseInt(i));        }    }});