GroupGrid未定稿 _Web前端

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 class="sw-formbox2-title"><td>' + this.gridName + '</td>';
	for ( var i = 0; i < colData.length; i++) {
		col[i + 1] = '<td class="groupGrid_col">' + colData[i] + '</td>';
	}
	return col.join('') + '</tr>';
};

GroupGrid.prototype.buildBody = function() {
	var rowData = this.data[this.rowName];
	var colData = this.data[this.colName];
	var x = this.data[this.id_x];
	var y = this.data[this.id_y];
	var row = [];
	for ( var i = 0; i < rowData.length; i++) {
		var td = [];
		for ( var j = 0; j < colData.length; j++) {
			td[j] = '<td id=' + x[i] + '_' + y[j]
					+ ' class="groupGrid_data">-</td>';
		}
		row[i] = '<tr><td class="groupGrid_row" 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);
			};
		}
	});
};

1 楼 love_ai87 2011-04-14

嗯，大家看看多提意见哈，我也写js没多久