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