[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: [] }
};
}());
