1. 程式人生 > >datatable外掛新增checkbox,並獲取選中行的json格式的資訊

datatable外掛新增checkbox,並獲取選中行的json格式的資訊

在datatable的columns中新增選擇框

    //title中也新增選擇框,用於全選

       {

                 'title':' <input type="checkbox" class="checkall"/>',

                 "sClass": "text-center",
                 "data": function(item){ return  item;},
                 "render": function (data) {
                     return '<input type="checkbox"  class="checkchild"  value="' + data.almTaskId + '" />';
                 },
                 "bSortable": false,  //是否可以排序
                 'width': '5%'

            },

     //給全選checkbox新增全選事件

        $(".checkall").click(function () { 

           //獲取checkall的選中狀態,是true 或者false

          var check = $(this).prop("checked");

          //將選中狀態賦值給其他的checkbox

           $(".checkchild").prop("checked", check);
      });

獲取值:

    //下一步按鈕
    $("#nextbtn").click(function(){
  /* $(".checkchild:checked").each(function()
     {   
        alert($(this).val())
     }
     );*/
  /* var sumAll = 0;
        var trList = document.getElementById("tblResults").getElementsByTagName("tr");
        alert(trList.length);
        for (var i = 0; i < trList.length; i++) {
          console.log(trList[i]);
           if (trList[i].firstElementChild.firstElementChild.checked) {    
                var qty = trList[i].firstElementChild.nextElementSibling.innerHTML.trim();
                sumAll= sumAll + parseInt(qty);
              }            
        }
        console.log(sumAll);
        */
  /* var tbl = $("#tblResults").dataTable();
        var trList = tbl.fnGetNodes();
        var tabledata="["
for(i=0;i<trList.length;i++){
   var trObj = trList[i];    
   if(trObj.firstElementChild.firstElementChild.checked){
       console.log(trObj.getElementsByTagName("td"));
       //var tdlength= trObj.getElementsByTagName("td").length;
       var elementdata="{"
                elementdata +='"almTaskId":"'+trObj.getElementsByTagName("td")[1].innerHTML+'",';
                elementdata +='"jiraEpicId":"'+trObj.getElementsByTagName("td")[2].innerHTML+'",';
                elementdata +='"jiraStoryId":"'+trObj.getElementsByTagName("td")[3].innerHTML+'",';
                elementdata +='"reporter":"'+trObj.getElementsByTagName("td")[4].innerHTML+'",';
                elementdata +='"assignPerson":"'+trObj.getElementsByTagName("td")[5].innerHTML+'",';
                elementdata +='"applyPD":"'+trObj.getElementsByTagName("td")[6].innerHTML+'",';
                elementdata +='"taskTitle":"'+trObj.getElementsByTagName("td")[7].innerHTML+'"';
                elementdata+="}";
                console.log(elementdata);
   }
   tabledata+=elementdata;
}
  tabledata+="]";
  
       console.log(tabledata);*/
      
      
       var tbl = $("#tblResults").dataTable();
       var trList = tbl.fnGetNodes();
       var jsonstr="[]";  
       var jsonarray = eval('('+jsonstr+')');  
       for(i=0;i<trList.length;i++){
   var trObj = trList[i];      
   if(trObj.firstElementChild.firstElementChild.checked){
              var aData = tbl.fnGetData(trObj);//得到這一行的json資料  
              jsonarray.push(aData);
            } 
       }
      /* if(jsonarray.slice()==0){
        alert("請至少選擇一條jira記錄!");
        return;
       }*/
       
       console.log(JSON.stringify(jsonarray));
    });