我要评论使用效果
文档说明
第一步
从tablefactory获图标form对象。
或者：
第二步
加载参数，传入json对象
表格效果：
json参数明细：
实例：
对应于：
第三步
将table加载到页面中对应id的div中。
如：
根据列数可以动态调整td的宽度
单独放入一个文件，可以直接调用。
源码
//表格工厂
var tablefactory = function(type){
if(this instanceof tablefactory){
return new this[type]();
}else{
return new tablefactory(type); //防止没有写new的情况
}
}
tablefactory.prototype = {
chartform : function(){
var html = ''; //私有属性
this.loadparams = function(opts){
var jsonarr = []; //json数组
var icount = 0;//用于控制行变色
var rowheaderarr = [];//每行第一列格式数组
if(opts.jsonarr){
jsonarr = opts.jsonarr;
}
if(opts.rowheaderarr){
rowheaderarr = opts.rowheaderarr;
}
var colnum = jsonarr.length; //记录总列数
var rownum = rowheaderarr.length - 1;//总行数(除去首行)
html = "<table id='table' style=\"border-collapse:collapse;border-spacing:0;border:1px solid #ccc;font-size:12px;text-align:center;\" >"+
"<tbody><tr> "+
"<td > </td>"; //左上角空的td
//拼写第一行
for(var i = 0;i < colnum;i++){
var c1 = jsonarr[i].c1;
html += '<td style="border:1px solid #ccc;height:14px;background-color:#e2fdfe;font-size:14px;font-weight:bold;padding:3px;" >' + c1 + '</td>';
}
html += '</tr><tr>';
for(var i = 0;i < rownum + 1;i++){
//拼写行头
var colorbox = rowheaderarr[i].split(',')[0];
var heardertext = rowheaderarr[i].split(',')[1];
html += "<td class='colorbox' style='padding:3px;height:14px;border:1px solid #ccc;width:66px;text-align:center;'><div style='border-radius:2px 2px 2px 2px;display:inline-block;width:12px;height:12px;background-color:"+colorbox+";float:left;'></div>"+heardertext+"</td>";
//拼写这一行右边的所有列
for(var j = 0;j < colnum;j++){
//alert(i);
var colvalue = jsonarr[j]['c'+(i+2)];
var tdwidth;
if(colnum <= tablefactory.td_widths.length)
tdwidth = tablefactory.td_widths[colnum-1];
else
tdwidth = tablefactory.td_widths[tablefactory.td_widths.length - 1];
console.info(tdwidth);
if(i%2 == 0){
html += '<td style = "height:14px;border:1px solid #ccc;width:'+ tdwidth +'px;text-align:center;background-color:#e2fdfe;">'+colvalue+'</td>';
}else{
html += '<td style = "height:14px;border:1px solid #ccc;width:'+ tdwidth +'px;text-align:center;background-color:#fff;">'+colvalue+'</td>';
}
}
//换行
html += '</tr><tr>';
}
html += '</tr><tr>';
html += '</tr>';
html += '</tbody></table>';
} ;
this.loaddata = function(houseid,callback){
document.getelementbyid(houseid).innerhtml = html; //展示table
if(callback) callback();
}
}
}
tablefactory.td_widths = [220,190,150,120,90,60,10];
demo：
<script src='common.js'></script>
<div id='tb' class='tb'></div>
<div id='tb1' class='tb'></div>
<div id='tb2' class='tb'></div>
<div id='tb3' class='tb'></div>
<div id='tb4' class='tb'></div>
<style>
.tb {
padding:6px;
}
</style>
<script>
var chartform = tablefactory('chartform');
chartform.loadparams({
jsonarr: [
{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
{c1:'东北',c2:2,c3:6,c4:3,c5:1,c6:6},
{c1:'四川',c2:2,c3:6,c4:3,c5:1,c6:6},
{c1:'重庆',c2:2,c3:6,c4:3,c5:1,c6:6}
],
rowheaderarr: [
'#000ccc,任务总数', //行名称
'#990033,立项阶段',
'#66ff00,检查阶段',
'#663399,审理阶段',
'#33ccff,报告阶段'
]
});
chartform.loaddata('tb');
chartform.loadparams({
jsonarr : [
{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
{c1:'东北',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'四川',c2:2,c3:6,c4:3,c5:1,c6:6},
],
rowheaderarr : [
'#000ccc,任务总数', //行名称
'#990033,立项阶段',
'#66ff00,检查阶段',
'#663399,审理阶段',
'#33ccff,报告阶段'
]
});
chartform.loaddata('tb1');
chartform.loadparams({
jsonarr: [
{c1:'北京',c2:2,c3:3,c4:3,c5:1,c6:6},
{c1:'上海',c2:2,c3:2,c4:3,c5:1,c6:6},
{c1:'河南',c2:2,c3:4,c4:3,c5:1,c6:6},
{c1:'河北',c2:2,c3:6,c4:3,c5:1,c6:6},
{c1:'东北',c2:2,c3:6,c4:3,c5:1,c6:6},
],
rowheaderarr: [
'#000ccc,任务总数', //行名称
'#990033,立项阶段',
'#66ff00,检查阶段',
'#663399,审理阶段',
'#33ccff,报告阶段'
]
});
chartform.loaddata('tb2');
</script>
以上就是java编程自写一款javascript超实用表格插件的详细内容，更多关于java编程javascript表格插件的资料请关注代码网其它相关文章！
发表评论