自己写的基于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%',//默认编辑工具为INPUTrowCls: 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 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 border="0" cellspacing="0" cellpadding="0"><tbody></tbody></table></div>');//是否需要分页if (op.needPaging) {var pagingStr = '<span style="width:20px" />页/共<span 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 + '" && 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" id="datacheckall" value=""/>',handle : function(d){return '<input type="checkbox" value="' + d.id + '" id="datacheck_' + d.id + '" ' + (config.disabled(d) ? 'disabled="disabled"' : '') + ' />';}};};})(jQuery);