关于表格模板

于 2017-10-18 09:17:24 发布
阅读量432 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Java开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37691382/article/details/78269174
本文介绍了一种使用JavaScript动态加载表格数据的方法，通过Ajax获取后台数据并填充到HTML表格中，适用于展示不同单位或部门的数据汇总情况。文章展示了如何定义模板字符串来构建表格行，并提供了示例代码说明如何实现数据的加载及填充。

var temp1 = '<tr><td rowspan={rowspan}>{shigdw}</td>\
            <td >{banzn}</td>\
<td class=\'banzh_rl\'>0</td>\
<td class=\'banzh_zl\'>0</td>\
<td class=\'banzh_rklj\'>0</td>\
<td>0</td>\
<td>0</td>\
<td class=\'banzh_fblj\'>0</td>\
<td>0</td>\
<td>0</td>\
</tr>';
var temp2 = '<tr>\
            <td>{banzn}</td>\
<td class=\'banzh_rl\'>0</td>\
<td class=\'banzh_zl\'>0</td>\
<td class=\'banzh_rklj\'>0</td>\
<td>0</td>\
<td>0</td>\
<td class=\'banzh_fblj\'>0</td>\
            <td>0</td>\
<td>0</td>\
</tr>';
var temp3 ='<tr><td>合计</td>\
            <td class=\'banz_rkrlhj\'>0</td>\
            <td class=\'banz_rkzlhj\'>0</td>\
            <td class=\'banz_rkljhj\'>0</td>\
            <td class=\'banz_rksjfslhj\'>0</td>\
            <td class=\'banz_rkljwcdhj\'>0</td>\
            <td class=\'banz_fbljhj\'>0</td>\
            <td class=\'banz_fbsjfslhj\'>0</td>\
            <td class=\'banz_fbljwcdhj\'>0</td>\
            </tr>';


var temp4 = '<tr><td colspan=2>总合计</td>\
             <td class=\'banz_rkrlzhj\'>0</td>\
             <td class=\'banz_rkzlzhj\'>0</td>\
             <td class=\'banz_rkljzhj\'>0</td>\
             <td class=\'banz_rksjfslzhj\'>0</td>\
<td class=\'banz_rkljwcdzhj\'>0</td>\
             <td class=\'banz_fbljzhj\'>0</td>\
<td class=\'banz_fbsjfslzhj\'>0</td>\
             <td class=\'banz_fbljwcdzhj\'>0</td>\
             </tr>';
window.onload = function() {
loadshig(type_name);
}
function loadshig(type_name){
var typename = type_name;
   $.ajax({
        url: basePath + "/R_action/datasumone/shigInfo.action",
data: {'typename':/banz/g,typename},
dataType: "json",
type: "post",
success: function(msg) {
$("#tab_a tr:gt(2)").remove();
for(var i=0;i<msg.length;i++) {
$("#tab_a").append(
temp1.replace(/{rowspan}/g,msg[i].sgjz.length+1)
.replace(/{shigdw}/g,msg[i].f_name)
.replace(/{banzn}/g,msg[i].sgjz[0].f_name)
.replace(/banzh/g,msg[i].sgjz[0].f_name));
/*$('.'+msg[i].sgjz[0].f_name+'_rl').text(msg[i].sgjz[0].rl);
$('.'+msg[i].sgjz[0].f_name+'_zl').text(msg[i].sgjz[0].rl);
$('.'+msg[i].sgjz[0].f_name+'_rklj').text(msg[i].sgjz[0].rl);
$('.'+msg[i].sgjz[0].f_name+'_fblj').text(msg[i].sgjz[0].rl);*/
for(var j=1;j<msg[i].sgjz.length;j++) {
$("#tab_a").append(
temp2.replace(/{banzn}/,msg[i].sgjz[j].f_name)
    .replace(/banzh/g,msg[i].sgjz[j].f_name)
);
}
    $("#tab_a").append(temp3.replace(/banz/g,msg[i].f_id));
}
        $("#tab_a").append(temp4);
         fillingdata(typename);               
}
});
}


function loadjianc(type_name){
   var typename = type_name;
   $.ajax({
        url: basePath + "/R_action/datasumone/jiancInfo.action",
data: {'typename':typename},
dataType: "json",
type: "post",
success: function(msg) {
$("#tab_a tr:gt(2)").remove();
for(var i=0;i<msg.length;i++) {
$("#tab_a").append(
temp1.replace(/{rowspan}/g,msg[i].sgjz.length+1)
.replace(/{shigdw}/g,msg[i].f_name)
.replace(/{banzn}/g,msg[i].sgjz[0].f_name)
.replace(/banzh/g,msg[i].sgjz[0].f_name));
for(var j=1;j<msg[i].sgjz.length;j++) {
$("#tab_a").append(
temp2.replace(/{banzn}/,msg[i].sgjz[j].f_name)
    .replace(/banzh/g,msg[i].sgjz[j].f_name)
);
}
    $("#tab_a").append(temp3.replace(/banz/g,msg[i].f_id));
}
    $("#tab_a").append(temp4);
    fillingdata(typename);
}
});
}


/**
 * 填充数据
 */
function fillingdata(typename){
      $.ajax({
        url: basePath + "/R_action/datasumone/search"+typename+"Data.action",
data: {'typename':typename},
dataType: "json",
type: "post",
success: function(msg) {
var day_total_sum = 0;
var week_total_sum = 0;
var rklj_total_sum = 0;
var fblj_total_sum = 0;
        for(var i=0;i<msg.length;i++){
        var day_sum = 0;
        var week_sum = 0;
        var rklj_sum = 0;
        var fblj_sum = 0;
        for(var j=0;j<msg[i].sgjz.length;j++){
        day_sum+=msg[i].sgjz[j].daycount;
        week_sum+=msg[i].sgjz[j].weekcount;
        rklj_sum+=msg[i].sgjz[j].rklicount;
                    fblj_sum+=msg[i].sgjz[j].fblicount;
        $('.'+msg[i].sgjz[j].bz_name+'_rl').text(msg[i].sgjz[j].daycount);
        $('.'+msg[i].sgjz[j].bz_name+'_zl').text(msg[i].sgjz[j].weekcount);
        $('.'+msg[i].sgjz[j].bz_name+'_rklj').text(msg[i].sgjz[j].rklicount);
        $('.'+msg[i].sgjz[j].bz_name+'_fblj').text(msg[i].sgjz[j].fblicount);
        }
           day_total_sum+=day_sum;
           week_total_sum+=week_sum;
           rklj_total_sum+=rklj_sum;
           fblj_total_sum+=fblj_sum;
           $("."+msg[i].f_id+'_rkrlhj').text(day_sum);
           $("."+msg[i].f_id+'_rkzlhj').text(week_sum);
           $("."+msg[i].f_id+'_rkljhj').text(rklj_sum);
           $("."+msg[i].f_id+'_fbljhj').text(fblj_sum);
        }
        $(".banz_rkrlzhj").text(day_total_sum);
        $(".banz_rkzlzhj").text(week_total_sum);
        $(".banz_rkljzhj").text(rklj_total_sum);
        $(".banz_fbljzhj").text(fblj_total_sum);
}
});
}


function type_click(type_name,data){
    $("#tab_a tr:gt(2)").remove();
$(data).parent().find("li").removeClass("select");
$(data).addClass("select");
$("#type_name").text(data.innerText);
$(".all").remove().empty();
if(type_name=='RT_HKJC'||type_name=='UT_HKJC'){
    loadjianc(type_name);
}else{
        loadshig(type_name);
}

}














下面是个例子：

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../../../R_Javascripts/lib/jquery-1.9.1.min.js"></script>
<script>
var temp1 = '<tr><td rowspan={rowspan}>{shigdw}</td>\
<td>{rl}</td>\
<td>{zl}</td>\
<td>{yl}</td>\
<td>{qb}</td></tr>';
var temp2 = '<tr>\
<td>{rl}</td>\
<td>{zl}</td>\
<td>{yl}</td>\
<td>{qb}</td></tr>';
window.onload = function() {
var data = [
{
name:'s',
sgjz:[
{name:'CQ01',rl:10,zl:50,yl:300,qb:1000},
{name:'CQ02',rl:8,zl:40,yl:300,qb:2000},
{name:'CQ03',rl:5,zl:30,yl:300,qb:3000}
]
},
{
name:'u',
sgjz:[
{name:'DQ01',rl:10,zl:50,yl:300,qb:1000},
{name:'DQ02',rl:8,zl:40,yl:300,qb:2000},
{name:'DQ03',rl:5,zl:30,yl:300,qb:3000}
]
}
];
$("table").empty();
for(var i=0;i<data.length;i++) {
$("table").append(
temp1.replace(/{rowspan}/g,data[i].sgjz.length)
.replace(/{shigdw}/g,data[i].name)
.replace(/{rl}/g,data[i].sgjz[0].rl)
.replace(/{zl}/g,data[i].sgjz[0].zl)
.replace(/{yl}/g,data[i].sgjz[0].yl)
.replace(/{qb}/g,data[i].sgjz[0].qb)
);
for(var j=1;j<data[i].sgjz.length;j++) {
$("table").append(
temp2.replace(/{rl}/g,data[i].sgjz[j].rl)
.replace(/{zl}/g,data[i].sgjz[j].zl)
.replace(/{yl}/g,data[i].sgjz[j].yl)
.replace(/{qb}/g,data[i].sgjz[j].qb)
);
}
}
}
</script>
</head>
<body>
<table  border="1">
<tr>
<td rowspan=3>一</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan=2>二</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值