[table-ext.js]用于ajax请求后绑定返回json对象到table

由于最近换公司了，刚到公司就被分派了一个BI系统，该系统是纯html的，于是本人被迫转前端了。

每次通过API请求之后都要自己手动绑定数据到table，重复造轮子了，于是就试着写了这个js。

来到园子那么久，第一次发表博客，请各位发现问题，请帮忙修改下，然后联系下我，多谢各位园友。

 

html代码调用如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <script src="../js/jquery-2.1.1.js"></script>
    <script src="table-ext.js"></script>
    <script>
        $(function () {
            var data = [{"eat":"不吃","date":"2015-05-30 11:57","visitorCount":500}];
            var option = $.Table.GetOptionParms;
            option.selector = $("#table1");
            option.columnName= ["嘢屎啊你1", "访问日期", "访问人数"];
            option.data = data;
            
            //1.传入一个option对象的调用方式
            $.Table.BindOption2Table(option);
            $.Table.BindOption2Table({ selector: $("#table2"), columnName: ["嘢屎啊你2", "访问日期", "访问人数"], data: data });

            //2.传入多个参数调用的方式
            $.Table.BindParms2Table("#table3", ["嘢屎啊你3", "访问日期", "访问人数"], data);
            //2.1如果不传入表头名称则不会移除thead
            $.Table.BindParms2Table("#table4", [], data);
        })
    </script>
</head>
<body>
    <table class="table table-bordered table-condensed table-striped table-hover" id="table1">
        <thead>
        </thead>
    </table>

    <table class="table table-bordered table-condensed table-striped table-hover" id="table2">
        <thead>
        </thead>
    </table>

    <table class="table table-bordered table-condensed table-striped table-hover" id="table3">
        <thead>
        </thead>
    </table>

    <table class="table table-bordered table-condensed table-striped table-hover" id="table4">
        <thead>
            <tr><th>嘢屎啊你4</th><th>访问日期</th><th>访问人数</th></tr>
        </thead>
    </table>
</body>
</html>

使用时，请先引用JQuery.

table-ext.js的代码为：

/// <reference path="c:\users\administrator\documents\visual studio 2013\Projects\JavaScript插件\Js_Table\js/jquery-2.1.1.js" />
/*
* author: LiWen
* date: 2015/05/30
*/
jQuery.Table = (function () {
    var Private = {};
    //选择器
    Private.selector = $;
    //列参数名称
    Private.columnName = [];
    //JSON数据
    Private.data = [];
    var CreateTh2Table = function () {
        if (Private.columnName.length > 0) {
            //如果需要重设表头则把当前table所有thead移除,并重新添加thead
            Private.selector.find("thead").remove();
            Private.selector.append("<thead></thead>");

            var thHtml = "";
            Private.columnName.forEach(function (i) {
                thHtml += ("<th>" + i + "</th>");
            });
            Private.selector.find("thead").append("<tr>" + thHtml + "</tr>");
        }
    };

    var CreateTd2Table = function () {
        //移除tbody,然后重新添加tbody到当前table
        Private.selector.find("tbody").remove();
        Private.selector.append("<tbody></tbody>");
        if (Private.data.length > 0) {
            for (var i = 0; i < Private.data.length; i++) {
                var tdHtml = "";
                $.each(Private.data[i], function (key, value) {
                    tdHtml += ("<td>" + value + "</td>");
                });
                Private.selector.find("tbody").append("<tr>" + tdHtml + "</tr>");
            }
        }
    };

    var TableInit = function () {
        CreateTh2Table();
        CreateTd2Table();
    };

    return {
        BindParms2Table: function (selector, columnName, data) {
            if (!selector) {
                console.log("selector is undefined,seletor is undefined,the seletor is JQuery seletor,$('#id')、$('.class')");
                return;
            }
            if (!columnName) {
                console.log("columnName is undefined,there is thead title,as ['Num','BeginTime','EndTime']");
            }
            if (!data) {
                console.log("data is undefined,there is tbody data,as ['1','2015-04-30','2015-05-30']");
                return;
            }
            Private.selector = $(selector);
            Private.columnName = columnName || [];
            Private.data = data;
            if (selector) TableInit();
        },
        //option format:{ selector: "", columnName: [], data: [] }
        BindOption2Table: function (option) {
            if (!option) {
                console.log("option is undefined,the option format is { selector: '', columnName: [], data: [] }");
                return;
            }
            if (!option.selector) {
                console.log("option.selector is undefined,seletor is undefined,the seletor is JQuery seletor,$('#id')、$('.class')");
                return;
            }
            if (!option.columnName) {
                console.log("option.columnName is undefined,there is thead title,as ['Num','BeginTime','EndTime']");
            }
            if (!option.data) {
                console.log("option.data is undefined,there is tbody data,as ['1','2015-04-30','2015-05-30']");
                return;
            }
            Private.selector = $(option.selector);
            Private.columnName = option.columnName || [];
            Private.data = option.data;
            if (option.selector) TableInit();
        },
        GetOptionParms: { selector: "", columnName: [], data: [] }
    };
}());

　　

posted @ 2015-06-04 15:56  BigBabySword  阅读(698)  评论(0)    收藏  举报