自己写的基于JQuery的支持ajax动态表格控件

/**
 * tabel插件
 * @author LeonYin
 * @version 0.1
*/
(function($) {
	$.fn.zytable = function(op) {

		if (!op.col) return;
		op = $.extend({
			dataType: 'json',
			needPaging: false,
			params: {},
			url : '',
			height: '80%',
			//默认编辑工具为INPUT
			rowCls: function(d) {return "";},
			//数据源,url参数为空时其作用
			dataSouce: [],
			perPageRow: 10
		}, op);

		var datas = op.dataSouce, result, paging;
		paging = new Object();
		paging.curPage = 1;
		paging.perPageRow = op.perPageRow;
		paging.needPaging = op.needPaging;

		var g = $(this);

		show();
		load();

		function show() {
			g.append('<table class="tableView thead" border="0" cellspacing="0" cellpadding="0"><thead></thead></table>');
			$('table.thead thead').append('<tr></tr>');
			$.each(op.col, function(i, n) {
				if (n) $('table.thead thead tr').append('<th style="width:'+n.width+'">'+n.text+'</th>');
			});

			g.append('<div style="height:' + op.height + ';background-color:#f4fafe;overflow-y:auto;overflow-x:hidden;widht:100%;" id="zytable_body_div"><table class="tableView tbody" border="0" cellspacing="0" cellpadding="0"><tbody></tbody></table></div>');

			//是否需要分页
			if (op.needPaging) {
				var pagingStr = '<span class="firstPaging">首页</span>  <span class="backPaging">上一页</span>  <span class="nextPaging">下一页</span>  <span class="lastPaging">末页</span> 共<span class="totalRow">0</span>条记录 当前第 <input value="1" style="width:20px" class="goto" />页/共<span class="totalPage">0</span>页  ';
				g.append('<table class="tableView tpaging" border="0" cellspacing="0" cellpadding="0"><tr><td id="pagingTD"></td></tr></table>');
				$('#pagingTD').html(pagingStr);
				//+ ' 设置每页显示条数 <select size="1" id="selectPerPageRow"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option></select> ');
			}
		}

		function initDatas() {
			$('table.tbody tbody').empty();
			$.each(datas, function(i, d) {
				var id = (d.id && d.id != "") ? d.id : i;
				$('table.tbody tbody').append('<tr id="' + id + '" class="' + op.rowCls(d) + '"></tr>');
				$.each(op.col, function(j, n) {
					n = $.extend({editor: 'input'}, n);
					if (n.handle) {
						$('#' + id).append('<td style="width:'+n.width+';">' + n.handle(d, n) + '</td>');
					} else if ((typeof(n.editable) == "function" && n.editable(d) == true) || (typeof(n.editable) == "boolean" && n.editable == true)) {
						if (n.editor == 'input') {
							$('#' + id).append('<td style="width:'+n.width+';'+ (n.style? n.style : '') +'"><input name="'+n.dataIndex+'" style="width:95%;" value="'+d[n.dataIndex]+'" /></td>');
							$('input[name="'+n.dataIndex+'"]', $('#' + id)).bind('change', function() {d[n.dataIndex] = this.value;});
						} else if (n.editor == 'textarea') {
							$('#' + id).append('<td style="width:'+n.width+';'+ (n.style? n.style : '') +'"><textarea name="'+n.dataIndex+'" style="width:95%;" rows="3">'+d[n.dataIndex]+'</textarea></td>');
							$('textarea[name="'+n.dataIndex+'"]', $('#' + id)).bind('change', function() {d[n.dataIndex] = this.value;});
						}
					} else {
						$('#' + id).append('<td style="width:'+n.width+';'+ (n.style? n.style : '') +'">' + d[n.dataIndex] + '</td>');
					}
				});
			});

			for (var i = 0; i < paging.perPageRow - datas.length; i++) {
				var tdStr = "";
				$.each(op.col, function(j, n) {
					tdStr +='<td style="width:'+n.width+';border:0 none;"> </td>';
				});
				$('table.tbody tbody').append('<tr>'+tdStr+'</tr>');
			}

			//复选框事件绑定
			$('.datacheckbox').bind('click', function() {
				if (this.id == 'datacheckall') { //全选
					if (this.checked) {
						$('.datacheckbox').attr('checked', true);
						$('.datacheckbox:disabled').attr('checked', false);
					} else {
						$('.datacheckbox').attr('checked', false);
					}
				} else { //单独选择
					var all = $('#datacheckall');
					if (!this.checked && all.attr('checked') == "checked") {
						all.attr('checked', false);
					}
				}
			});

			//是否需要分页
			if (op.needPaging) {
				if (paging.curPage == 1) {
					$('span.firstPaging').css({color:'#939393'});$('span.backPaging').css({color:'#939393'});
					$('span.firstPaging').unbind('click');$('span.backPaging').unbind('click');
				} else {
					$('span.firstPaging').css({color:'#000000'});$('span.backPaging').css({color:'#000000'});
					$('span.firstPaging').bind('click', function(){paging.curPage = 1;load();});$('span.backPaging').bind('click', function(){paging.curPage -= 1;load();});
				}

				if (paging.curPage == paging.totalPage) {
					$('span.nextPaging').css({color:'#939393'});$('span.lastPaging').css({color:'#939393'});
					$('span.nextPaging').unbind('click');$('span.lastPaging').unbind('click');
				} else {
					$('span.nextPaging').css({color:'#000000'});$('span.lastPaging').css({color:'#000000'});
					$('span.nextPaging').bind('click', function(){paging.curPage += 1;load();});$('span.lastPaging').bind('click', function(){paging.curPage = paging.totalPage;load();});
				}
				$('span.totalPage').html(paging.totalPage);$('span.totalRow').html(paging.totalRow);$('input.goto').val(paging.curPage);
				$('input.goto').bind('keydown', function(event) {
					if(event.keyCode == 13) {
						var p = parseInt($(this).val());
						if (p != paging.curPage && p <= paging.totalPage) {paging.curPage = p;load();}
					} else if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 46 || event.keyCode == 8) {
						return true;
					}
					return false;
				});

				$('#selectPerPageRow').bind('change', function() {
					var p = parseInt($(this).val());
					paging.perPageRow = p;paging.curPage = 1;load();
				});
			}
		}

		function load(d) {
			if (op.url == '') {
				paging.needPaging = false;
				initDatas();
			} else {
				d = $.extend(op.params, paging, d);
				$.ajax({
					url: op.url,dataType: op.dataType,
					data: d,
					success: function(data) {
						datas = data.rows;paging = data.paging;
						initDatas();
				  	}
				});
			}
		}

		var r = {
			/**
			 * 获取选择行的Id
			 */
			getSelectItems: function() {
				var ids = '';
				var selects = $('input.datacheckbox:checked');
				if (selects.length == 0) {
					alert("请至少选择一个数据！");
					return "";
				}
				$.each($('input.datacheckbox:checked'), function(i, n) {
					if(n.value != "") {
						ids += n.value + ",";
					} else {
						ids += n.parentNode.parentNode.id + ",";
					}
				});
				return ids;
			},
			/**
			 * 重新加载数据
			 */
			reload : function(d) {
				load(d);
			},
			/**
			 * 设置查询参数
			 */
			setParams: function(params) {
				op.params = params;
			}

			/**
			 * 新增数据
			 */
			,addData : function(s) {
				datas.push(s);
				initDatas();
			}

			/**
			 * 移除数据
			 */
			,removeData: function(ids) {
				var tm = new Array();
				var id;
				$.each(datas, function(i, n) {
					id = (n.id && n.id != '') ? n.id : i;
					if (ids.indexOf(id) < 0) {
						tm.push(n);
					}
				});
				datas = tm;
				initDatas();
			}

			/**
			 * 获取数据集合
			 */
			,getDatas: function() {
				return datas;
			}

			/**
			 * 变更大小
			 */
			,resize : function(width, height) {
				if (width && width != "") {
					$('#zytable_body_div').css('width', width);
				}
				if (height && height != "") {
					$('#zytable_body_div').css('height', height);
				}
			}
		}
		return r;
	}

	/**
	 * 列表复选框
	 */
	CheckBoxCol = function(config) {
		config = $.extend({disabled : function(d){return false;}}, config);
		return {
			dataIndex:'id',width: '30px',text: '<input type="checkbox" class="datacheckbox" id="datacheckall" value=""/>',
			handle : function(d){return '<input type="checkbox" class="datacheckbox" value="' + d.id + '" id="datacheck_' + d.id + '" ' + (config.disabled(d) ? 'disabled="disabled"' : '') + ' />';}
		};
	};
})(jQuery);