由于最近换公司了，刚到公司就被分派了一个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: [] } };}());
新闻热点
疑难解答
