多级指标打分表单自动创建JavaScript代码解析

来源：互联网发布：是知也的知的拼音编辑：程序博客网时间：2024/05/20 14:16

　　为了解释按多级指标自动创建打分表的设计，以及相关指标考核打分业务，写了Demo代码供开发人员参考，主要涉及到Table动态操作技术及算法实践。

1. HTML DOM Table 对象操作

1.1. 插入一行

　　使用HTML DOM insertRow() 方法，insertRow(index) 方法用于在表格中的指定位置插入一个新行。

　　若 index 等于表中的行数，则新行将被附加到表的末尾。

1.2. 插入单元格

　　使用HTML DOM insertCell() 方法，insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的<td> 元素。
　　
　　如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

这里写图片描述

　　如上表所示，如果存在合并单元格，插入单元格位置计算将是个难点，本例中行合并，insertCell(index)中 index 在合并单元格后首行顺延1，…；而换到合并单元格范围内的下一行后，index从0开始计数。

1.3. 设置HTML DOM TableCell 对象

　　本例用到的TableCell 对象属性：
　　rowSpan，设置或返回单元格可横跨的行数。
　　innerHTML，可设置或返回单元格的开始标签和结束标签之间的 HTML。

1.4. 先插入行，再插入单元格

　　使用脚本动态创建Table过程如下（按本例解析）：
　　
　　（1）基于当前已经在HTML中写好的Table

<table id="myTable" border="1"></table>

　　（2）以此Table为根，逐行插入“所有”需要的行数

　　所有，是指按行合并单元格，一次性的插入rowspan行数。

  for (var j=0;j<rowspan;j++){    //rownum是当前行数，'myTable'是已经在HTML中写好的table    var tmpRow=document.getElementById('myTable').insertRow(rownum);    //为行定义ID    tmpRow.id = "rowid" + rownum;    rownum =  rownum + 1;  }

　　（3）按行插入单元格，并初始化

  tmpcell_1 = document.getElementById("rowid" + rownum).insertCell(1);  tmpcell_2 = document.getElementById("rowid" + rownum).insertCell(2);  //通过innerHTML初始化输入框，用于输入分数  tmpcell_2.innerHTML="<input name=\"grate\" type=\"text\" id=\"grate\" maxlength=\"3\" rule=\"" + rule_obj + "\">";

2. 打分数据规则验证

2.1. 排序后比较数据首位

　　使用sort() 方法用于对数组的元素进行排序。
　　
　　数值排序必须使用一个排序函数[1]，如下代码所示（本文DEMO代码略去）。
　　

<script type="text/javascript">function sortNumber(a,b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"document.write(arr + "<br />")document.write(arr.sort(sortNumber))</script>

2.2. 分组排序

　　分组规则设置在input自定义属性上，本文定义属性为rule。

    grateObject = document.getElementsByName("grate");    len = grateObject.length;    rule[0] = grateObject[0].getAttribute("rule");

3. Demo 代码

　　演示效果如下图所示，先点击按钮“测试多级指标展现”，展现指标考核表，填上打分（例如都打5分），再点击按钮“测试读取打分数据及打分规则验证”，提示两次“数值相同”。

这里写图片描述

<!DOCTYPE html><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><head><script>//显示所有回写数据function showAllElem(){    var ret_json = "";  //定义返回JSON数据字符串    ret_json ="{\"names\":\"党风廉政建设责任制民主测评票（班子）\",\"rvsn_number\":\"DFLZJS\",\"tableid\":\"DFLZJS_BZCP\",\"level\":\"2\",\"firstitems\":[";    ret_json = ret_json + "{\"classa\":\"加强作风建设的情况\",\"rowspana\":\"3\",\"seconditems\":[";    ret_json = ret_json + "{\"content\":\"落实中央“八项规定”，杜绝奢侈浪费、公车私用、公款消费的情况情况\",\"orderby\":\"1\",\"datastyle\":\"0\",\"checked\":\"rule1\"},";    ret_json = ret_json + "{\"content\":\"关心员工利益，密切联系群众的情况\",\"orderby\":\"2\",\"datastyle\":\"0\",\"checked\":\"rule1\"},";    ret_json = ret_json + "{\"content\":\"班子团结、相互协作的情况\",\"orderby\":\"3\",\"datastyle\":\"0\",\"checked\":\"rule1\"}";    ret_json = ret_json + "]},";    ret_json = ret_json + "{\"classa\":\"廉洁自律的情况\",\"rowspana\":\"4\",\"seconditems\":[";    ret_json = ret_json + "{\"content\":\"遵守国有企业领导人员廉洁自律若干规定的情况\",\"orderby\":\"1\",\"datastyle\":\"0\",\"checked\":\"rule2\"},";    ret_json = ret_json + "{\"content\":\"执行廉洁自律，不利用职务便利收受现金、有价证券和支付凭证的情况\",\"orderby\":\"2\",\"datastyle\":\"0\",\"checked\":\"rule2\"},";    ret_json = ret_json + "{\"content\":\"执行廉洁自律，不利用职务便利为本人及配偶、子女及其他特定关系人谋取利益的情况\",\"orderby\":\"3\",\"datastyle\":\"0\",\"checked\":\"rule2\"},";    ret_json = ret_json + "{\"content\":\"遵守国家法律法规的情况\",\"orderby\":\"4\",\"datastyle\":\"0\",\"checked\":\"rule2\"}";    ret_json = ret_json + "]}";    ret_json = ret_json + "]}";    //将 JavaScript 对象表示法 (JSON) 字符串转换为对象。    var json_obj = JSON.parse(ret_json);    var strtmp = new String("");    var itemsobject = json_obj.firstitems;    var classalength = itemsobject.length;    var rownum =  0;    for(var i=0;i<classalength;i++){        var tmp_obj = itemsobject[i].classa;        var rowspan = itemsobject[i].rowspana;        for (var j=0;j<rowspan;j++){            var tmpRow=document.getElementById('myTable').insertRow(rownum);            tmpRow.id = "rowid" + rownum;            rownum =  rownum + 1;        }        //插入首个单元格       //alert("rownum:"+rownum+",rowspan:" + rowspan);        var rownumfirst =  rownum - parseInt(rowspan);        var tmprow = document.getElementById("rowid" + rownumfirst).insertCell(0);        tmprow.innerHTML=tmp_obj;        tmprow.rowSpan = rowspan;        var row_data = itemsobject[i].seconditems;        insertRowData(row_data,rownumfirst) ;    }}//取指标行内容数据function insertRowData(json_data,n){    var contentrow = json_data.length    for(var i=0;i<contentrow;i++){        var tmp_obj = json_data[i].content;        var rule_obj = json_data[i].checked;        var rownum = parseInt(n) + i;        var tmpcell_1,tmpcell_2 ;        if (i==0){            tmpcell_1 = document.getElementById("rowid" + rownum).insertCell(1);            tmpcell_2 = document.getElementById("rowid" + rownum).insertCell(2);        }else{            tmpcell_1 = document.getElementById("rowid" + rownum).insertCell(0);            tmpcell_2 = document.getElementById("rowid" + rownum).insertCell(1);        }        tmpcell_1.innerHTML=tmp_obj;        tmpcell_2.innerHTML="<input name=\"grate\" type=\"text\" id=\"grate\" maxlength=\"3\" rule=\"" + rule_obj + "\">";    }}function getAllElem(){    var grateObject = new Array();     var len = 0 ;    var grate = new Array();    var rule = new Array();    var j=0 ,k=0;    grate[0] = new Array();    grateObject = document.getElementsByName("grate");    len = grateObject.length;    rule[0] = grateObject[0].getAttribute("rule");    for (var i=0;i<len;i++){        if (rule[j] == grateObject[i].getAttribute("rule")){            grate[j][k] = grateObject[i].value;            k = k + 1;                  }        else{            //开始新一行数组计数            j = j + 1;            k = 0;            grate[j] = new Array();            rule[j] = grateObject[i].getAttribute("rule");            grate[j][k] = grateObject[i].value;            k = k + 1;        }    }    //对数组排序，然后取头尾比较    len = rule.length;    for (var i=0;i<len;i++){        var tmp_grate = grate[i].sort();        var tmp_len = tmp_grate.length ;        if (tmp_grate[0]==tmp_grate[tmp_len-1]){            alert(rule[i] + ":数值相同");        }    }}</script></head><body><h1>多级指标展现及打分测试 JavaScript</h1><div id="tdl"><div><p id="demo" >这是表单数据解析示例.</p><div> <button id="test" type="button" onclick="showAllElem()">测试多级指标展现</button> <button id="test1" type="button" onclick="getAllElem()">测试读取打分数据及打分规则验证</button><br><br></div> <table id="myTable" border="1"></table></body></html>

参考：

1.《JavaScript sort() 方法》 W3School
2. 《可配置多级指标投票打分应用设计（1）》肖永威 2016.4
3.《使用JavaScript实现动态创建含合并单元格（行）的表单》肖永威 2016.4
4.《可配置多级指标投票打分应用设计（3）》肖永威 2016.5

0 0