原创：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.otherColNumber100             })101             this.setWidth();102         }103 };

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