简单的表格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
});
});