工作中遇到的问题(第五弹))

记5.25好工作中遇到的问题

今天主要是前端相关，用springboot里面的thymeleaf以及bootstrap遇到的一些问题

如何在表格中显示checkbox

• 问题：从bootStrap上弄下来的组件不显示checkbox，导致无法选取某一行

• 解决方法：
  在列名处加上了一列：

   <th>
       <input id="selall" type="checkbox" onclick="checkOrCancelAll();">
   </th>  
   相当于占了一列的位置  

  在遍历数据的地方加上：

   <td>
       <input type="checkbox" th:value="${task.id}" name="allTask" >
   </td>  
   这样就可以显示出checkbox那一列了  

  checkbox的全选以及全部取消

• 问题：checkbox显示出来了，但是彼此之间没有联系，比如，在点击列名的checkbox时，应该所有的checkbox都被选中，再点，全部取消

• 解决方法： 添加了一个function，思路是先判断点列名的checkbox时，是true还是false，如果是true，全选，如果是false，全部取消，代码如下:

  function checkOrCancelAll() {

   var selall = document.getElementById("selall");
   //2.获取选中状态
   var checkedSelall = selall.checked;
   //console.log(checkedSelall)
   //3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
   var allCheck = document.getElementsByName("allTask");
   //4.循环遍历取出每一个复选框中的元素
   if (checkedSelall) {
       list=[];
       //全选
       for (var i = 0; i < allCheck.length; i++) {
           //设置复选框的选中状态
           allCheck[i].click();
           //console.log(list);
           allCheck[i].checked = true;
       }
       //mySpan.innerHTML="取消全选";
   } else {
       //取消全选
       for (var i = 0; i < allCheck.length; i++) {
           allCheck[i].checked = false;
           list=[];
           //console.log(list);
       }
   }

  }

  点击普通的checkbox时，获取相应的id

• 问题： 我们选中checkbox，是为了方法服务，我们需要把选中行的数据的id放到集合里，传到后端进行操作，一开始，并不能直接得到id

• 解决方法： 我们创建一个全局的list集合，之后通过thymeleaf中的方法(name=”allTask” th:onclick=”‘javascript:checkOrCancelOne(‘+${task.id}+’);’”)，拿到每一个对应的id，然后把他们传到全局变量的集合中，这样，就完成了对id的集中
  代码如下：

function checkOrCancelOne(id) {
    //第一次进来，id一定是不存在的，就push进去，第二次一定是取消操作，
    //这个时候调用list的splice方法，将对应的id删除
    var num = list.indexOf(id);
    if(num > -1){
        console.log(num);
        list.splice(num,1);
    }else{
        list.push(id);
    }
    console.log(list);
}