为采用Bootstrap框架的后台管理系统制作一张点位排期的表格，基于jQuery封装了一个名为Calendar的插件，总共有3次大的迭代，代码从最初的200多行飙升至1000多行，包括一些工具函数，例如日期格式化、字符串模板、类型判断等。在封装插件前，先用CSS和HTML编写了静态的排期表，在此基础上通过JavaScript改成了动态渲染。
一、点位排期
刚开始接到的需求比较简单，如下图所示。
最上面的是日期过滤，可选择上一日或下一日。每页表格显示一个月的数据。第一行是日（天数），红底表示休息天。第一列是版位名称，点击版位名称可显示浮层，包含一张说明图。在单元格中可填入文字、图标或链接，其中白底是可点击的空闲排期，点击后显示一个勾，再点击就会取消；灰底是预排期，蓝底是下单排期，两者都不可点击。
1）服务器数据
服务器返回的数据是前后端协商后的结构，字段比较多，包含多个数组，例如当月天数、休息天列表、已选中列表、版位信息等，具体如下所示，其中class属性是样式编号，原先是数字，在迭代的过程中改成了数组。
<?php $json = [ 'code'=>200, 'msg'=>'操作成功', 'data'=>[ 'prev'=>'2016-09', //上一日 'next'=>'2016-11', //下一日 //当月天数 'month'=>[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31], 'holiday'=>[1,2,8,9,15,16,22,23,29,30], //休息天列表 'check' => [ //已选中列表 '2016-09'=>[ //以日期为key 1 => [1,2,3,4,5,6], //以版位ID为key，天数列表为value 2 => [1,2,5,8] ], '2016-11'=>[ 1 => [3,4,5,6], 2 => [5,8] ] ], 'list' =>[ [ 'label'=>[ //版位信息 'key'=>1, //ID 'img'=>'image/demo.png', //可弹出的说明图 'name'=>'首页文字链接' //版位名称 ], 'check'=>[ [ 'day'=>1, //天数 'class'=>[4], //空闲排期 已选中 带跳转 'url'=>'http://www.pwstrick.com', 'price'=>100 //价格 ], [ 'day'=>2, 'class'=>[4], //空闲排期 已选中 'price'=>100 ], [ 'logo'=>'image/logo.gif', 'day'=>3, 'class'=>[5], //空闲排期 已选中 带跳转和图标 'url'=>'http://www.pwstrick.com', 'price'=>100 ], [ 'logo'=>'image/logo.gif', 'day'=>4, 'class'=>[3], //空闲排期 'price'=>100 ], [ 'day'=>5, 'class'=>[2], //预排期 'price'=>100 ], [ 'day'=>6, 'class'=>[1], //下单排期 'price'=>100 ], .... ] ] ] ] ]; echo json_encode($json);
在插件中，定义了样式表字典，其含义与服务器返回的class属性一样，如下所列。
this.enums = { //样式表字典 1: "primary", //蓝色 完成状态 2: "info", //灰色 审核状态 3: "calendar-check", //白色 可打勾 4: "checked", //已打勾 5: "info-blue" //跳转 };
2）排期渲染
在初始化Calendar插件时，既可以传递自定义的参数，也可以传递“data-”为前缀的自定义属性，例如异步请求地址data-ajax、当前日期data-cur、控制单元格能否点击的data-disabled等属性。下面是Calendar插件的HTML结构和模板，以及带额外参数的初始化代码。
<script id="template" type="x-tmpl-mustache"> {{#data}} <thead> <tr> <th></th> {{#month}} <th>{{.}}</th> {{/month}} </tr> </thead> <tbody> {{#list}} <tr> <td data-key="{{label.key}}" data-img="{{&label.img}}">{{label.name}}</td> {{#check}} <td data-day="{{day}}" class="{{class_name}}" data-remark="{{&remark_name}}" data-dialog="{{dialog}}" data-id="{{id}}" data-width="{{width}}" data-height="{{height}}" data-price="{{price}}"> {{&img_str}} </td> {{/check}} </tr> {{/list}} </tbody> {{/data}} </script> <div id="calendar1" class="calendar-continer" data-loading="img/ajax-loader.gif" data-ajax="ajax/calendar.php" data-cur="2016-10"> <div class="calendar-header"> <div class="calendar-date"> <i class="glyphicon glyphicon-chevron-left" data-date="2016-09"></i> <span name="cur-date">2016-10</span> <i class="glyphicon glyphicon-chevron-right" data-date="2016-11"></i> </div> </div> <div class="calendar-content"> <table class="table table-bordered"></table> </div> </div> <script> var calendar1 = new Calendar('calendar1', { param: { //额外参数 用于ajax请求 begin: '2017-01-01', end: '2017-11-01' } }); </script>
Calendar插件包含一个空的table元素，通过mustcache.js模板渲染。在refresh()方法中完成了渲染逻辑，并且将选中的单元格信息缓存到本地。
当单元格包含备注信息时，会配合tooltip插件，添加提示的效果，如下图所示。
3）缓存数据
缓存的数据会在initChecked()方法中初始化，其JSON结构如下所示，对选中和未选中的单元格做单独记录。
{ "2016-10": { //日期（年月） "1": { //版位ID checked: [ //选中列表 day表示年月日中的日，即天数 { day: 1, class: [4, 3], url: "http://www.pwstrick.com", css: 4 }, { day: 2, class: [4, 3], css: 4 } ], unchecked: [3] //移除列表 } } };
每次点击与取消都会触发缓存的修改，在私有的_set()方法中处理缓存数据。
4）优化
在使用一段时间后，运营觉得第一列和第一行如果固定住，对他们的工作能更加的友好，于是就加了这个特效，具体细节可参考之前的《表格花式效果》一文。
二、版位互斥
当一个版位和其它多个版位发生互斥时，如果这个版位是预留或下单状态，那么其它版位就无法点击，反之亦然。在服务器返回的数据中新增exclusions属性，如下所示。
<?php $json = [ 'code'=>200, 'msg'=>'操作成功', 'data'=>[ 'exclusions'=>[ 5 => [3,4] //版位ID ] ] ];
为了将插件修改最小化，互斥的逻辑封装到一个checkExclusions()函数中，需要判断的位置就调用该函数。
三、排期类型
原先只有一个点位排期，后面新增了带购买、带点击数和素材三种排期。一开始没有想到会有多种排期类型，这次迭代修改很多，几乎增加了一倍的代码，并且服务器返回的数据结构也做了调整。
1）初始化
在插件内部抽象出了_initWithType()方法，专门用于初始化不同类型的排期表，在初始化时还得传入排期类型，不传就渲染为普通的点位排期。
Calendar.prototype._initWithType = function(opts) { opts = opts || {}; var _this = this; switch (opts.type) { case 'buy': this.checked = [4, 6]; //选中的样式 this.enums = { //样式表字典 1: 'primary', 2: 'info', 3: 'calendar-check', //可打勾 4: 'buy', //购买 已打勾 5: 'info-blue', 6: 'send' //配送 }; this._get = function() { var type = _this.type; //排期类型 var data = {}; data[type] = {}; for(var key in _this.cache) { for(var key2 in _this.cache[key]) { data[type][key2] = data[type][key2] || []; //每一行的key $.each(_this.cache[key][key2]['checked'], function(key3, value) { //传对象到服务器 日期和样式 data[type][key2].push({date:key+'-'+value.day, css:value.css}); }); } } return data; }; cellDbClick(_this); break; default: this.checked = 4; //选中的样式 this.enums = { //样式表字典 1: "primary", //蓝色 完成状态 2: "info", //灰色 审核状态 3: "calendar-check", //白色 可打勾 4: "checked", //已打勾 5: "info-blue" //跳转 }; this._get = function() { var type = _this.type; //排期类型 var data = {}; data[type] = {}; for (var key in _this.cache) { //遍历日期，例如2016-10、2016-09 for (var key2 in _this.cache[key]) { //先取第一列的版位ID data[type][key2] = data[type][key2] || []; //将表格类型下的版位ID初始化为数组 $.each(_this.cache[key][key2]["checked"], function(key3, value) { //提取每月打勾的日期 data[type][key2].push(key + "-" + value.day); //只传日期 }); } } return data; }; cellClick(_this); break; } };
不同的排期表，其样式表字典也是不同的。this._get()是内部用于获取缓存数据的方法，由于每种类型回传给服务器的数据格式不同，因此需要单独处理，但名称可以统一，便于调用。cellDbClick()和cellClick()都是用于绑定单元格点击事件的方法，只是两者内部的处理逻辑不同。
2）带点击数的排期表
此类排期表需要与artDialog弹框插件配合使用，因为在点击单元格时需要出现两张表单，下图是其中的一张。
初始化弹框和表单提交的逻辑都封装在showDialog()方法中。后期还优化了日期选择，为了方便，没有使用日历插件，而是结合弹框和选择框，做了个简易的日期选择，如下图所示。
当只有一种排期表时，复杂度并不高，而当有多种排期表时，许多逻辑就要调整，要么新增，要么适配，并且服务器也要跟着做相应的修改。
由于数据嵌套了多层，因此在遍历数据转换格式时会比较麻烦。当整合缓存和服务器数据中的单元格样式时，以缓存中的为准，例如缓存中未选中，而服务器是选中，那么忽略服务器中的状态。
posted on
