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 };
时间原因先更新到这里，未完待续…