JQuery绑定JSON数据至表格插件

 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 = eval(datas);        //格式化JSON

 

        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, data) {

 

            var row = $(thisTable).find(" tr:eq(1)").clone();

 

            for (var c = 0; c < len_col; c++) {

 

                var key = column_ids[c];

                var value = data[column_ids[c]];

 

                $(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>