简单的表格json控件

简单的表格json控件

由于最近做的项目一直有表格的形式展示数据，所以想写个简单的关于表格方面的控件出来，想用JSON数据直接渲染出来，因为开发给到我们前端的字段可能会叫不同的名字，所以我们前端渲染页面时候不应该依赖以字段的key值来渲染，也就是说不管开发返回的key键，我这个控件都能满足支持它。所以今天就写了个简单的控件出来，JS代码就100行左右的代码。至于网上很多表格控件支持分页，排序，全选(多选，单选)功能等，而我这个控件只支持渲染表格的控件，且把他们表格渲染数据分离出来，且做只做一件事情，就是渲染JSON数据到表格里面来，如果想支持分页的效果可以看我这篇文章 JS分页请点击！一样的 只是在表格底部多加个分页而已！如果想支持全选效果，请看我这篇文章 全选请点击我！

如果想对表格排序，请看我这篇文章 表格排序请点击我！

下面不多说，请先看JSfiddle效果，效果如下：

JSfiddle请点击我！

当然控件里面也支持渲染单选框或者复选框，只是可以配置参数isRadio为true或者isCheck(复选框)为true即可，如果不需要单选框或者复选框的话，他们都为false，默认情况下都为false。

HTML代码如下：

<table cellspacing = "0" cellpadding = "0">
    <thead>
        <tr>
            <!--<th width="5%">选择</th> -->
            <th width="20%">表格控件1</th>
            <th width="10%">表格控件2</th>
            <th width="20%">表格控件3</th>
            <th width="20%">表格控件4</th>
            <th width="15%">表格控件5</th>
            <th width="15%">表格控件6</th>
        </tr>
    </thead>
    <tbody id="j-tbody"></tbody>
</table>

CSS代码如下：

<style>
    table {
        width:100%;
        border:1px solid #ccc;
        border-right:none;
        border-bottom:none;
    }
    table thead th {
        font-size:14px;
        color: #333;
        font-weight:normal;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
    }
    table td{
        font-size:12px;
        color: #333;
        font-weight:normal;
        border-right:1px solid #ccc;
        border-bottom:1px solid #ccc;
        text-align:center;
    }
  </style>

JS代码如下：

/**
 * 简单的表格json数据展示
 * @time 2014-4-23
 * var data = [
        {"parentId":9944267,"categoryName":"创建交易","categoryId":9944343},
        {"parentId":9944267,"categoryName":"支付","categoryId":9944344},
        {"parentId":9944267,"categoryName":"退款","categoryId":9944344},
        {"parentId":9944267,"categoryName":"退款","categoryId":9944344},
        {"parentId":9944267,"categoryName":"退款","categoryId":9944344},
        {"parentId":9944267,"categoryName":"退款","categoryId":9944344}];
 */

 function TableData(options) {

    this.config = {
        container     :  '#j-tbody',         // 默认tbody容器
        JSONData      :  '',                 // json数据
        isRadio       :  false,               // 是否单选
        isCheck       : false,                 // 是否多选
        callback      : null
    };

    this.cache = {

    };

    this.init(options);
 }

 TableData.prototype = {

    constructor: TableData,

    init: function(options) {
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config;

        // 渲染表格数据
        self._renderHTML();
    },
    /*
     * 渲染tbody里面的数据
     * @method _renderHTML
     * @private
     */
    _renderHTML: function() {
        var self = this,
            _config = self.config;

        // 先清空
        $(_config.container).html('');
        for(var i = 0; i < _config.JSONData.length; i++) {
            var tr = document.createElement("tr"),
                arrs = self._returnArrs(_config.JSONData[i]);
            for(var j = 0; j < arrs.length; j++) {
                var td = document.createElement('td');
                $(td).html(arrs[j]);
                tr.appendChild(td);
            }
            if(_config.isRadio) {
                var radio = $('<td><input type="radio" class=""/></td>');
                $(tr).prepend(radio);
            }
            if(_config.isCheck) {
                var radio = $('<td><input type="checkbox" class=""/></td>');
                $(tr).prepend(radio);
            }
            $(_config.container)[0].appendChild(tr);
        }

        // 一次性插入数据

        _config.callback && $.isFunction(_config.callback) && _config.callback();
    },
    /*
     * 返回数组
     * @private _returnArrs
     * @return {arrs} 返回数组
     */
    _returnArrs: function(obj){
        var arrs = [];
        for(var k in obj) {
            if(obj.hasOwnProperty(k)) {
                arrs.push(obj[k]);
            }
        }
        return arrs;
    }
 };

JS初始化方式如下：

// 初始化数据
 $(function(){
    var data = [
        {"parentId":9944267,"categoryName":"创建交易","categoryId":"9944343","XX":"111","YY":"XXX","ZZ":'aa1'},
        {"parentId":9944268,"categoryName":"支付","categoryId":"9944343","XX":"111","YY":"XXX","ZZ":'aa2'},
        {"parentId":9944269,"categoryName":"退款","categoryId":"9944343","XX":"111","YY":"XXX","ZZ":'aa3'},
        {"parentId":9944270,"categoryName":"退款","categoryId":"9944343","XX":"111","YY":"XXX","ZZ":'aa4'},
        {"parentId":9944271,"categoryName":"退款","categoryId":"9944343","XX":"111","YY":"XXX","ZZ":'aa5'},
        {"parentId":9944272,"categoryName":"退款","categoryId":"9944343","XX":"111","YY":"XXX","ZZ":'aa6'}];
    new TableData({
        JSONData : data
    });
});

DEMO下载