GroupGrid未定稿

GroupGrid初稿

?

之前做了好几个关于报表的项目，里面很多地方用到了二维grid，闲来无事就自己写了一个半通用的分组

?

对于附件的表格，我的思路是查询出相应的数据，然后在前台完成行列转换，因为之前有一次在DB端做过行列转换，但是情况并不会简单，反而在一些特殊需求处理起来更加麻烦，画出一个类似坐标轴的东西，然后根据x、y去定位，填充数据，思路很简单，代码也很简单，不过写的时候还是学到一些东西，比如js的对象化和封装。

?

部分核心源码

注释和变量名我应该写的还算规范吧，没什么难度

?

GroupGrid.prototype.draw = function() {if (!this.data) {this.data = Action.getObjByUrl(url);}jQuery('.groupGrid').remove();document.getElementById(this.loc).innerHTML = '<table border="1px" cellspacing="0px" cellpadding="1px">'+ this.buildHead() + this.buildBody() + '</table>';this.fillData();};GroupGrid.prototype.buildHead = function() {var colData = this.data[this.colName];var col = [];col[0] = '<tr id=' + x[i] + '>' + rowData[i]+ '</td>' + td.join('') + '</tr>';}return row.join('');};GroupGrid.prototype.fillData = function() {var rows = this.data.rows;for ( var i = 0; i < rows.length; i++) {var id = rows[i].cell[this.x] + '_' + rows[i].cell[this.y];document.getElementById(id).innerHTML = rows[i].cell[this.dataName];}};

?

?

?

?

GroupGrid.prototype.setColOnClick = function(func) {jQuery('.groupGrid_col').each(function() {var e = {value : this.innerHTML};this.innerHTML = '<a href=#>' + this.innerHTML + '</a>';this.onclick = function() {func(e);};});};GroupGrid.prototype.setRowOnClick = function(func) {jQuery('.groupGrid_row').each(function() {var e = {row : this.id,value : this.innerHTML};this.innerHTML = '<a href=#>' + this.innerHTML + '</a>';this.onclick = function() {func(e);};});};GroupGrid.prototype.setDataOnClick = function(func) {jQuery('.groupGrid_data').each(function() {var id = this.id.split('_');var html = this.innerHTML;var rowName = jQuery(this).parent().children()[0];var obj = {row : id[0],col : id[1],value : html,rowName : jQuery(this).parent().children()[0].innerHTML};if (html != '-') {this.innerHTML = '<a href=#>' + html + '</a>';this.onclick = function() {func(obj);};}});};

?

?