php-js实现便捷成绩录入功能

在最近的《微课堂》项目中，有教师录入学生成绩的需求，为了使录入成绩的功能更加便捷，采用了 js，现在就和大家分享一下。

效果

在进行构思编写之前，我们首先要做的就是知道自己想要达成什么效果。先来看一下我们想要的效果吧（由于最后实现了想要的效果，就用成品展示一下）

这是录入成绩界面的控制按钮，点击后进入录入成绩的界面。

这是录入成绩的界面，教师在这里输入平时成绩和期末成绩后，平时成绩、期末成绩、总成绩都会保存到数据表中。

点击方框后，便可以进行编辑，点击方框之外的地方，编辑完成，立刻进行保存，而且立刻计算出总成绩。

考虑到不同的老师会按照不同的权重给平时成绩和考试成绩的分数，所以添加了选择权重的功能，又因为权重的比例一般没有个位数，所以提供给用户选择的功能，而并非输入权重，相比之下，选择更加省时、省心、省力。

实现

一、失去焦点后执行方法和对表单进行编辑

要想实现点击时进行编辑，离开后进行保存的功能，我们需要用到一个方法“onblur()”
下面是它的用法：

onblur 使用方法
一般情况下，表单内容是无法进行编辑的，为了保证整体的美观性和实用性，我们采用对表单进行编辑，而非采用 <input> 输入框，在这我们对其属性进行了编辑，即：“contenteditable=”true””

修改属性后，便可以进行编辑了。

二、执行方法后进行保存

在我的代码中，对平时成绩和考试成绩的保存分别采用了 autoSave()、finalSave()两个方法，当然这两个方法是自己任意命名的。

平时成绩

<td style="color: white"  class="list usual" contenteditable="true" onblur="autoSave(event);" id="{$score-> id}">{$score->usual_score}</td>

考试成绩

<td style="color: white"  class="list exam" contenteditable="true" onblur="finalSave(event);" id="{$score-> id}">{$score->exam_score}</td>

下面来看一下 js 的方法

成绩的保存

  function autoSave(event) {
    const id = event.target.id;
    const usualValue = event.target.textContent;
    $.post("/index/teacher/usualScore?", { id: id, usualvalue: usualValue}, function(result) {totalAchievements(id);
    });
                         }

event

event 接口

id 和 value 都是要传输给后台的参数值，post 指的是用 post 方法进行传值，路径为“/index/teacher/usualScore”，所以我们要在后台构建“usualScore()”这个方法，“？”后面的都是要传输的参数。

我们再来看一下后台的方法

   public function usualScore()
   {$data = Request::instance()->param();
   $id = $data['id'];
   $value = $data['usualvalue'];
   $Score = Score::get($id);
   $Score->usual_score = $value;
   $Score->save();}

$data 接收所有的参数，然后找到 id 所对应的对象，赋值后进行保存。

考试成绩和总成绩的写法与平时成绩的写法相同，在此也就不一一介绍了。

三、权值的选择与计算

<label   class="option" style="color: white"> 请选择平时成绩所占权重 </label>
  <select name="usual" id="usual" lay-search style="height: 4%;"  onchange="reload();">
   <option value="0.3">30%</option>
   <option value="0.1">10%</option>
   <option  value="0.2">20%</option>
   <option value="0.4">40%</option>
   <option  value="0.5">50%</option>

 </select>

“onchange()” 方法指的是一经改变，就执行方法，此处执行的是 ”reload()” 方法。

   function reload()
   {obtainWeight();
     init();}
   

“reload()” 方法又调用 ”obtainWeight()”、”init()” 两个方法。

function obtainWeight(event) {let usual = document.getElementsByClassName('usual');

    let weightNode = document.getElementById("usual");
    let examNode = document.getElementById('exam');
    let index = weightNode.selectedIndex;
    let value = weightNode.options[index].value;
    // 利用 url 跳转将 term 节点的值传到后台
    let url = "/index/teacher/getWeight?usualScore=" + value;


    ajaxGet(url, function(response) {console.log(response);
      clear(examNode);
      createOption(examNode, response);
      totalAchievements();});
    // 调用 creatOption 方法
  }

“document.getElementsByClassName()”是通过 Class 的名字获取节点，“document.getElementsById()”是指通过 id 获取节点，用“value”表示获取到的节点的值，之后定义 url，标明方法和参数，用 ”ajaxGet()” 方法进行跳转传值。

function ajaxGet(url, callback) {
    $.ajax({
      url: url,
      type: "get",
        // 成功后调用 success 后面的语句
        success: function(response) {callback(response);
        },
        // 失败后调用 error 后面的语句
        error: function(xhr) {console.log('server error');
        }
      });

url 指的是用户定义的 url，如果没有参数，只写明路径即可，type 指的是传值的方式，一般有“post”和“get”两种，success()和 error()指的是传回的数据，如果成功，就返回参数，如果未成功，就在控制台上显示“error”中的内容。

 // 获取前台传入的平时成绩的权重值，计算出考试成绩的权重值后返回给前台
    public function getWeight()
    {$usualScore = Request::instance()->param('usualScore');
    $examScore = 100-($usualScore*100).'%';    
    return $examScore;
    }

现在我们再来看一下后台的代码，$usualScore 表示的是平时成绩的权重，计算出考试成绩的权重后返回给前台。

function createOption(node, inners, values) {let examScore = document.createElement('option');
    examScore.name = node;
    examScore.innerHTML = inners;
    node.appendChild(examScore);
  }

在图中我们可以发现，考试成绩所占权重是没有 <option> 的，那么它是怎么得到的 option 呢？

由上面的命名可以知道，我们要用 js 创建一个 <option>，“document.createElement()”，指的是创建节点，后面的内容便是对节点进行赋值，从而生成节点。

  function init() 
  {let usual = document.getElementsByClassName('usual');
    for (var i = 0; i < usual.length; i++)
    {totalAchievements(usual[i].id);


     }
   }

通过 Class 的名字获取节点，然后用 for 循环生成 id，以区分不同的 usualScore 的值，然后调用 ”totalAchievements()” 方法。

 function totalAchievements(id)
 {
    let index;
    let usual = document.getElementsByClassName('usual');
    let exam = document.getElementsByClassName('exam');
    let total = document.getElementsByClassName('total');
    let usualWeight = document.getElementById("usual").value;

    for (var i = 0; i < usual.length; i++) {if (usual[i].id === id) {
        index = i;
        break;
      }
    }
    usualScore = usual[index];
    examScore = exam[index];
    totalScore = total[index];
    if (usualScore && examScore && totalScore) {let response = usualWeight * usualScore.innerText + (1 - usualWeight) * examScore.innerText;
      totalScore.innerText = (Math.round(response*10)/10);
     totalSave(id,  (Math.round(response*10)/10));
    }
  }

获取到节点，然后取各节点的值，之后便是根据各值的含义进行运算，再把值赋予总成绩。

 function clear(node) {node.length = 0;}

定义 ”clear()” 方法，清除上一次的取值，否则会造成数值积累。

总结

以上便是思路以及实现的步骤，在最后要提醒大家，在权值选择改变后，要执行计算另一个权值以及计算总成绩的方法，还有就是在点击“录入”按钮跳转到录入成绩的界面时，要执行计算另一权重的方法，一般情况下，初始权重默认为是 <select> 标签下的第一个 <option>。
这是第一次接触 js，不得不说 js 真的挺神奇的，这次接触的不是很深，相信在日后的接触中，我会好好的掌握它。