评分表动态表格组件

Seasons123 commented 6 years ago

一. 表格左侧内容动态生成通过后台动态的配置，然后动态的生成前台的html table。一级二级指标和三级等指标内容发生变化时，已三级指标为例，也就是动态的添加一级，二级，三级指标时，如何实现一级二级的合并效果。借鉴excel模板转换html，但是转换都是固定的内容，也就是模板固定了，动态填充数据是不可能的，要填充也是单元格填充，不能内容完全动态。基于这个需求，也不是完全的动态，手动的指定第一行标题列、手动的指定一共有几级指标。原理：将每一列及其对应的合并行数读出来，然后，除了最后两列，每两列一判断：如果第一次处理，就添加td 且rowspan。对于最后两列，它们没有合并行，直接添加。

否则，就只添加第三列的td。 1.html

<div class="mainContainer">
    <table>
        <thead>
        <tr><td>一级指标</td><td>分值</td><td>二级指标</td><td>分值</td>
            <td>三级指标</td><td>分值</td></tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>
 </div>

js

$.ajax({
url: "./data/indicators.json",//json文件位置
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function(data) {//请求成功完成后要执行的方法 
 var t1='',t2='',t3='',t4='';
 $.each(data,function(i,item){
    var html = '<tr>';
    if(t1=='' || t1!=item.t1.t){ //指标一：名字与分值
      html += '<td rowspan="'+item.t1.rows+'">'+item.t1.t+'</td>';
      t1 = item.t1.t;
      html += '<td rowspan="'+item.t2.rows+'">'+item.t2.t+'</td>';
     }
   if(t3=='' || t3!=item.t3.t){ //指标二：名字与分值
       html += '<td rowspan="'+item.t3.rows+'">'+item.t3.t+'</td>';
       t3 = item.t3.t;
       html += '<td rowspan="'+item.t4.rows+'">'+item.t4.t+'</td>';
    }
     html += '<td>'+item.t5.t+'</td>';//末级指标名字与分值
     html += '<td>'+item.t6.t+'</td>';
    html +='</tr>';
     $('#tb').append(html);
});               
}
});

json indicators.txt 其中一行的json数据格式如下。t1/t2/t3/t4/t5/t6代表的是一行中的每一列，如下t1表示某行第一列这个单元格的json数据对象。


{
"t1":{"t":"01项目决策","rows":5},
"t2":{"t":"20","rows":5},
"t3":{"t":"0101项目目标","rows":1},
"t4":{"t":"4","rows":1},
"t5":{"t":"010101目标内容","rows":1},
"t6":{"t":"4","rows":1}
}

4. css

.mainContainer{ margin: 5px 10px; position: relative; height: 500px; } table{ width:100%; height:100%; } table td{
text-align:center; border:solid 1px; }



5. 展示效果
![image](https://user-images.githubusercontent.com/19281922/44503218-c2b2ca80-a6c7-11e8-8cd7-7001b71824a9.png)

Seasons123 commented 6 years ago

二. 改进：表格左侧内容不确定一共有几级指标

根据json数据获取到表格左侧内容区一共有多少列：第一个json对象的长度，即为列的个数。
```
    var tdNum = 0;
     for(var i in data[0]){
        //console.log(i);    i即属性名字
         tdNum++;
     }
    // console.log(tdNum );
```
【注】json对象没有length属性。采用如上方法拿到json对象的长度：遍历对象即可获取属性名，顺带计数。
批量定义生成变量名，并为该变量赋值如下面的例子，批量的声明了变量 t1、t2、t3、t4，并分别为它们赋值为1、2、3、4
```
    for(var i=1; i <= 4 ; i++) {
        create_variable(i);  //闭包
     }
     function create_variable(num){
    var name = "t"+num; //生成函数名
     window[name] = num;
 }
    //console.log(t4);
```
详细了解可以看这篇博文 js中定义用字符串拼接起来的变量名的变量
对于函数外的变量可以用 window[变量] 的方式获取例如：
```
var num1 = 111;
var num2 = 222;
```

var vname = "num"; var vindex = 2;

alert(window[vname + vindex]);

输出 222

因为js全局变量是绑定在window对象上的
我想知道对于函数内的局部变量能否通过代入变量的方式动态获取

4. [js 获取json对象的Key、value](https://www.cnblogs.com/guozhe/p/6061125.html)
我的代码应用：

for(var j=1; j <= (tdNum - 2); j ++ ){ //动态生成除最后两行的所有行 if(j % 2 ){ //为奇数 var indicatorKey = "t" + j; var scoreKey = "t" + ( j + 1); var indicatorValue ,scoreValue; //遍历Json串获取其属性。item代表一行。 for(var m in item){ if(m == indicatorKey){ indicatorValue=item[m]; //获取对应列的指标对象，该对象包含：指标名称t、合并行数rows } } for(var n in item){ if(n == scoreKey){ scoreValue=item[n]; //获取对应列的分值对象，该对象包含：分值t、合并行数rows } } //一次渲染两列：某级指标列，及其对应的分值列 if(window[indicatorKey] =='' || window[indicatorKey] !=indicatorValue.t){ html += ''+indicatorValue.t+''; window[indicatorKey] = indicatorValue.t; html += ''+scoreValue.t+''; } } }

Seasons123 commented 6 years ago

二. 改进【附：完整代码】 html.txt css.txt indicatorsTest2.txt js.txt

效果展示：

Seasons123 commented 6 years ago

以上只涉及行的合并。

Seasons123 / blog-FE

评分表动态表格组件 #89

alert(window[vname + vindex]);