你的位置:首页 > Java教程

[Java教程][table


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

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

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

 

html代码调用如下:

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