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