jquery.tableData.js源码如下:
/*
* Name:tableData
* Author: decel
* CreateDate: 2013-06-10
* ModifyDate:2013-06-11
* Desc: 绑定JSON数据至目标table,
* Example:
1.使用默认参数
$('#tableId').tableData(datas);
1.不使用默认参数
var opts = { delete_callback: deleteItem };
$('#tableId').tableData(datas,opts);
*/
(function($) {
$.fn.tableData = function(datas, opts) {
opts = jQuery.extend({
key_name: "ID", //行数据唯一标识属性名
detail_visible: true, //“查阅” 按钮是否可见
detail_id: "detail", //“查阅” 按钮是否可见
detail_text: "查阅", //“查阅” 按钮文本
detail_href: "edit.aspx", //详细页面地址
delete_visible: true, //“删除”按钮是否可见
delete_id: "delete", //“删除”按钮ID
delete_text: "删除", //“删除”按钮文本
delete_callback: function() { return false; }, //删除 调用事件
row_even: "even", //奇数行样式
row_odd: "odd", //偶数行样式
row_hover: "hover" //活动行样式
}, opts || {});
datas = ev
var thisTable = $(this);
var row = $(thisTable).find(" tr:eq(1)").clone();
var len_col = $(row).find("td").length;
var tempIds = "";
for (var c = 0; c < len_col; c++) {
var id = $(row).find("td:eq(" + c + ")").attr("ID");
if (id != "" && id != undefined) {
tempIds += id + "|";
}
}
var column_ids = tempIds.split("|");
len_col = column_ids.length - 1;
$(thisTable).find(" tr:eq(1)").css("display", "none");
$(thisTable).find(" tr[name=ready]").remove(); //移除现有数据行
$.each(datas, function(i, da
var row = $(thisTable).find(" tr:eq(1)").clone();
for (var c = 0; c < len_col; c++) {
var key = column_ids[c];
var value = da
$(row).find("#" + key).text(value);
if (opts.detail_visible == true && key == opts.key_name) { //显示查阅按钮属性
var href = opts.detail_href + "?id=" + value;
$(row).find("#" + opts.detail_id).attr("href", href).html(opts.detail_text);
}
if (opts.delete_visible == true && key == opts.key_name) { //设置删除按钮属性及事件
$(row).find("#" + opts.delete_id).attr("id", value).html(opts.delete_text).bind("click", function() {
opts.delete_callback($(this).attr("id"));
});
}
}
row.attr("name", "ready");
$(thisTable).append(row); //追加新数据行
})
$(thisTable).find(" tr[name=ready]").show(); //显示新增的行
$(thisTable).find("tr:even").addClass(opts.row_even); //设置样式
$(thisTable).find("tr:odd").addClass(opts.row_odd);
$(thisTable).find("tr").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
}
})(jQuery);
页面表格格式示例:
<table id="tb" style="line-height: 30px; margin: 0px auto;" class="i_kucun_list"
border="0" cellspacing="0" cellpadding="0" width="780">
<tbody>
<tr>
<th style="display: none;">
</th>
<th>
用户名
</th>
<th>
邮箱
</th>
<th>
注册日期
</th>
<th>
登录次数
</th>
<th>
最后登录
</th>
<th>
操作
</th>
<th>
选择
</th>
</tr>
<tr style="display: none;"> //根据此行(第二行)格式及单元格ID,加载对应的JSON数据
<td id="ID" style="display: none;">
</td>
<td id="UserName">
</td>
<td id="Email">
</td>
<td id="TimeCreated">
</td>
<td id="LoginTimes">
</td>
<td id="TimeLastLogin">
</td>
<td>
<a href="#" id="detail" style="color: green;">查阅</a> |
<a href="#" id="delete" style="color: green;">删除</a>
</td>
<td>
<input type="radio" name="radio" />
</td>
</tr>
</tbody>
</table>