微信小程序（三）：选座系统3（主要内容：数组的动态生成）

人生不易且无趣，一起找点乐子吧。欢迎评论，和文章无关的也可以。

 

 

 

前面我们说了列表的渲染，由一个二维数组，怎样去画出座位。还谈了数组的修改，怎样从座位的点击事件，获得对应的位置，也就是数组的下标，去修改相应的值。这次我们来谈谈最后的一块的内容，这应该是这个板块的最后一篇文章了。怎样动态的去生成这个二维数组。

我们知道我们的二维数组是【【】，【】，【】】这种形式的，但是我们通过request API传递的数据，无论是请求的，还是回应的，都是字符类型，即使你传递前不是字符类型，当要进行发送时，他还会自动的给你转成字符类型。

所以这次我们要谈的核心内容，从后台得到一个字符串，我们就假当他是个座位表，比如是这种形式：“张三，李四，王五，no，no，陈六，no......”。有人的位置就是名字，没人的地方就是no来表示空座好了。记不记得，我们从icon上获取的id其实是个一维数组的下标，我们做的处理是得到x，y。这里你得到这个字符串后，直接赋值给个数组，或者说列表。我们就可以直接用那个id来取得这个列表里的名字。这里不需要过多的处理，主要我们来说怎样用这个字符串来生成，我们的color数组。

我的处理方式是从后端不只获得个字符串，还有一些布局信息，比如说几行几列啊，什么的。后台与前端的链接，前面我们也有讲到，服务器与数据库的链接也有说。我这里的是tomcat和mysql，大家用的不同按照自己的方式就可以了。向前台传数据可以直接通过字符串，当然用json更方便也更高大上（但是我嫌麻烦）。我们省去这些内容，他们都因人而异，个人的习惯，使用的工具都会有不同的形式。我们直接从前端拿到这个座位表开始，看看怎样生成color二维数组。当然还有附属品——行和列。

来想一下，我们的这个东西，应该一进入页面就显示出来，也就是说在页面load时就要处理完所有的信息，那我们写个load函数：

load:function(e){
    var that = this;
    wx.request({
      url: ''//你的servlet地址，前面有谈,
      data: {
            //你要传输的数据
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)
      }
    })
  },

我这里列出个框架，大家要根据自己的后台去写，我在这里显示一下我得到的success函数里res.data的内容：

这里是用json传的。我们这里只用到classmode和classseat。行列和座位表姓名信息，敲黑板，注意啊这些都是字符串“ ”。这里的classseat其实是john和47个no组成的字符串，这是数据库的数据。大家在插入的时候，怎么设计就无所谓了，你一定要和行列对应就好了。

接下来我们来处理（我只显示success好了，其他的大家自己去写）：

首先我们先要把classmode和classseat分开成数组，或者列表。也就是要把他们一个个拿出来，整个的字符串我们没办法处理。这里的名字间是用逗号隔开的，那就split（）就好了，我们都把他们split出来，赋值给两个临时列表（后面都统一说成列表吧，可能大家学c，java的时候老师会说数组，但是这里的前端，包括python什么的，都说成列表好了）。

之后的问题其实是个数学问题，我们有了座位信息的列表，循环一遍，如果不是no，我们就往列表里加入一个red，如果是（此位置空座）就加个green。但是这样是一维的，怎样弄成二维的呢。这个时候就用到行列了，我们通过列，就知道这一行应该有多少数据，那我们就把这一行写成一个列表，然后把一个个的 行 列表，添加进color列表里，也就是列表的嵌套。怎样添加呢，这里很简单，列表有个push方法，参数是数据。一个个push进去就好了。来看看代码吧：

success: function (res) {
        console.log(res.data)
        var arr = res.data.classmode.split(' ');
        var array = res.data.classseat.split(',');
        var copy = [];
        var a = []
        for (var i = 0; i < array.length; i++) {
          var k = i%arr[1];
          if (array[i] == 'no') {
            a.push('green');
          } else {
            a.push('red');
          }
          if (k == arr[1] - 1){
            copy.push(a);
            a = []
          }
        }
        console.log(copy)
        that.setData({
          row:arr[0],
          clo:arr[1],
          seat:array,
          color:copy
        });

      }

这里是现将每一个信息处理后push进a列表，当a够一行的长度时就把a   push进copy里，直到全部循环完毕。之后setData，把copy给了color。这个函数我们就算完成了。回到刚开始的那句话，这里页面一加载，我们就要处理这些东西。所以要把这个函数加入到onload里面

onLoad: function (options) {
    this.load();
  },

这样就全部完成了。

我这里是加了样式的，略微好看些。

好吧，这篇文章就结束了。这也应该是模块的最后一篇文章了。我也没什么要写的了。至于选座之后的那些，你在点击事件里修改目前的座位表，然后在把classseat传回去，jdbc再重新更新数据库的数据就好了。不是什么难的内容，前面我也有谈到，而且大家的后端语言也不尽相同，相关的东西去查下就知道了。

希望这篇文章可以帮助你，那就这样说再见啦，拜。

 

 

 

后记：

越看越啰嗦，简单点，说话的方式简单点。

其实就是怎样将一溜字符串，变成二维数组啦。

把数据一个个拿出来，够一行就放数组里，够一行就放进数组里。完了.......

仅此而已，哈哈。（重点看怎么实现的就好了）