簡單的表格json控件

時間 2019-11-19

原文原文鏈接

簡單的表格json控件html

因爲最近作的項目一直有表格的形式展現數據，因此想寫個簡單的關於表格方面的控件出來，想用JSON數據直接渲染出來，由於開發給到咱們前端的字段可能會叫不一樣的名字，因此咱們前端渲染頁面時候不該該依賴以字段的key值來渲染，也就是說無論開發返回的key鍵，我這個控件都能知足支持它。因此今天就寫了個簡單的控件出來，JS代碼就100行左右的代碼。至於網上不少表格控件支持分頁，排序，全選(多選，單選)功能等，而我這個控件只支持渲染表格的控件，且把他們表格渲染數據分離出來，且作只作一件事情，就是渲染JSON數據到表格裏面來，若是想支持分頁的效果能夠看我這篇文章 JS分頁請點擊！同樣的只是在表格底部多加個分頁而已！若是想支持全選效果，請看我這篇文章全選請點擊我！前端

若是想對錶格排序，請看我這篇文章表格排序請點擊我！ json

下面很少說，請先看JSfiddle效果，效果以下：數組

JSfiddle請點擊我！app

固然控件裏面也支持渲染單選框或者複選框，只是能夠配置參數isRadio爲true或者isCheck(複選框)爲true便可，若是不須要單選框或者複選框的話，他們都爲false，默認狀況下都爲false。this

HTML代碼以下：spa

<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代碼以下：.net

<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代碼以下：prototype

/**
 * 簡單的表格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初始化方式以下：code

// 初始化數據
 $(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
    });
});