日期:2014-05-16  浏览次数:20719 次

自己写的基于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> &nbsp;<span class="backPaging">上一页</span> &nbsp;<span class="nextPaging">下一页</span> &nbsp;<span class="lastPaging">末页</span>&nbsp;共<span class="totalRow">0</span>条记录&nbsp;当前第&nbsp;<input value="1" style="width:20px" class="goto" />页/共<span class="totalPage">0</span>页 &nbsp;';
				g.append('<table class="tableView tpaging" border="0" cellspacing="0" cellpadding="0"><tr><td id="pagingTD"></td></tr></table>');
				$('#pagingTD').html(pagingStr);
				//+ '&nbsp;设置每页显示条数&nbsp;<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>&nbsp;');
			}
		}
		
		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;">&nbsp;</td>';
				});
				$('table.tbody t