日期:2014-05-16 浏览次数:20719 次
/** * 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 t