原创：GridView组件（二）：设计思路

GridView组件（二）：设计思路

上期回顾：http://www.cnblogs.com/beiou/p/4113327.html

1、页面结构：

gridview表格本生是可以只用一个table来渲染的。

但是为了结构清晰，便于维护，同时需实现table自行滚动且横向滚动colHead，分为四块：

（1）colHead列头Panel

（2）table数据Panel

（3）page分页Panel

（4）Drag拖拽线Panel覆盖在colHeadPanel与tablePanel之上。

2、对象设计

统一入口GridView：

每次初始化时就会创建所有Panel，并且根据配置初始化GridControl定义的对象

  1 GridView.prototype = {
  2         init: function () {
  3             this.target.html("");
  4         },initialize: function () {
  5             this.setOptions();
  6             this.bindEvent();
  7         },setOptions: function () {
  8             $.extend(this,{
  9                 _colHeadPanel:$("<div class=\"grid_colHead\"></div>"),
 10                 _dragPanel:$("<div class=\"grid_drag\"></div>"),
 11                 _tablePanel:$("<div class=\"grid_table\"></div>"),
 12                 _otherPanel:$("<div class=\"grid_other\"></div>"),
 13                 _pagePanel:$("<div class=\"grid_page\"></div>"),
 14                 _sortName:null,
 15                 _sortOrder:null,
 16                 colHead:null,
 17                 drag:null,
 18                 table:null,
 19                 page:null
 20             });
 21             if(this.opts.width == null){
 22                 this.target.css("width",this.target.parent().width());
 23                 GridTargetList.push(this.target);
 24             }
 25             this.target.addClass("gridview").append(this._colHeadPanel).append(this._dragPanel)
 26                 .append(this._tablePanel).append(this._otherPanel);
 27             this.formatTempalteModule();
 28             this.formatColModule();
 29             this.colHead = new GridControl.ColHeadControl({
 30                 panel:this._colHeadPanel,
 31                 colHead:this.opts.colHead,
 32                 colModule:this.opts.colModule,
 33                 templateWidth:this.templateWidth,
 34                 isTemplate:this.isTemplate,
 35                 isCheckBox:this.opts.isCheckBox,
 36                 isSort:this.opts.isSort,
 37                 isNumber:this.opts.isNumber,
 38                 isLeftTemplate:this.opts.isLeftTemplate,
 39                 otherColNumber:this.otherColNumber
 40             });
 41             if(this.opts.isDrag){
 42                 this.drag = new GridControl.DragControl({
 43                     panel:this._dragPanel,
 44                     colModule:this.opts.colModule,
 45                     height:this.opts.height + this._colHeadPanel.height(),
 46                     templateWidth:this.templateWidth,
 47                     isTemplate:this.isTemplate,
 48                     isCheckBox:this.opts.isCheckBox,
 49                     isNumber:this.opts.isNumber,
 50                     isLeftTemplate:this.opts.isLeftTemplate,
 51                     otherColNumber:this.otherColNumber
 52                 });
 53             }
 54             this.table = new GridControl.TableControl({
 55                 panel:this._tablePanel,
 56                 colModule:this.opts.colModule,
 57                 rowAddModule:this.opts.rowAddModule,
 58                 data:this.opts.datasource,
 59                 height:this.opts.height,
 60                 templateModule:this.opts.templateModule,
 61                 templateWidth:this.templateWidth,
 62                 isTemplate:this.isTemplate,
 63                 isCheckBox:this.opts.isCheckBox,
 64                 isNumber:this.opts.isNumber,
 65                 isLeftTemplate:this.opts.isLeftTemplate,
 66                 otherColNumber:this.otherColNumber,
 67                 onDetail:this.opts.onDetail,
 68                 onDoubleClick:this.opts.onDoubleClick,
 69                 onClick:this.opts.onClick,
 70                 onCheck:this.opts.onCheck
 71             });
 72             if(this.opts.pageModule){
 73                 if(this.opts.pageModule.panel != null && this.opts.pageModule.panel.length > 0){
 74                     this.opts.pageModule.panel.append(this._pagePanel);
 75                 }else{
 76                     if(this.opts.pageModule.isTop){
 77                         this._pagePanel.insertBefore(this._colHeadPanel);
 78                     }else{
 79                         this.target.append(this._pagePanel);
 80                     }
 81                 }
 82                 this.page = this._pagePanel.GridPage({
 83                     total: this.opts.pageModule.total,
 84                     index: this.opts.pageModule.index,
 85                     pageNum: this.opts.pageModule.pageNum,
 86                     pageRate: this.opts.pageModule.pageRate,
 87                     onChange:this.opts.pageModule.onChange,
 88                     onSetNum:this.opts.pageModule.onSetNum,
 89                     type:this.opts.pageModule.type
 90                 });
 91             }
 92             this.other = new GridControl.OhterControl({
 93                 panel:this._otherPanel,
 94                 isTemplate:this.isTemplate,
 95                 isCheckBox:this.opts.isCheckBox,
 96                 isNumber:this.opts.isNumber,
 97                 templateWidth:this.templateWidth,
 98                 colModule:this.opts.colModule,
 99                 otherColNumber:this.otherColNumber
100             })
101             this.setWidth();
102         }
103 };

时间原因先更新到这里，未完待续…