簡單的表格json控制元件

龍恩0707發表於2014-04-23
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下載

相關文章