Сделать конкретную колонку редактируемой на основе изменения переключателя в Datatables

Question

Я использую данные datatables. Требование состоит в том, чтобы сделать определенные столбцы данных доступными для редактирования после того, как пользователь проверит/нажмет на соответствующие переключатели. Например, если пользователь нажимает на DEA, соответствующий DEA coulmn в обеих таблицах должен быть доступен для редактирования и так далее, как показано на скриншоте. Измененные данные также должны быть сохранены в БД.

стороне клиента код:

var $bTable = $('#tblBadFormat').dataTable({ 
       "sDom": "<'row'<'col-sm-12'<'pull-right'f><'pull-left'l>r<'clearfix'>>>t<'row'<'col-sm-12'<'pull-left'i><'pull-right'p><'clearfix'>>>", 
       "bFilter": false, 
       "bInfo": false, 
       "bLengthChange": false, 
       "sPaginationType": "full_numbers", 
       "bServerSide": true, 
       "bProcessing": true, 
       "iDisplayLength": 10, 
       "sAjaxSource": '@Url.Action("GetBadFormatData")', 
       "aoColumns": [ 
        { "sName": "ID", "bVisible": false, "bSortable": false }, 
        { "sName": "DEA", "bSortable": false }, 
        { "sName": "Product", "bSortable": false }, 
        { "sName": "NDC", "bSortable": false }, 
        { "sName": "Sales", "bSortable": false }, 
        { "sName": "Fees", "bSortable": false }, 
        { "sName": "Quantity", "bSortable": false }, 
        { "sName": "Contract", "bSortable": false }, 
        { "sName": "Fee", "bSortable": false }, 
        { "sName": "HIN", "bSortable": false }, 
        { "sName": "CustomerName", "bSortable": false }, 
        { "sName": "CustomerAddress", "bSortable": false }, 
        { "sName": "City", "bSortable": false }, 
        { "sName": "State", "bSortable": false } 
       ], 

       "fnPreDrawCallback": function() { 
        centerThis('Processing'); 
        $("#Processing").css("display", "block"); 
       }, 

       "fnDrawCallback": function (oSettings) { 
        if (oSettings._iDisplayLength < oSettings.fnRecordsDisplay()) { 
         $('.dataTables_paginate').css("display", "block"); 
        } 
        else { 
         $('.dataTables_paginate').css("display", "none"); 
        } 
        $('#tblBadFormat tbody tr td').each(function() { 
         this.setAttribute('title', "Click to see contracts."); 
        }); 
       }, 
       "fnInitComplete": function() { 
        this.fnAdjustColumnSizing(); 
        centerThis('Processing'); 
        $("#Processing").css("display", "none"); 
       } 
      }); 

      var $nTable = $('#tblNotInBad').dataTable({ 
       "sDom": "<'row'<'col-sm-12'<'pull-right'f><'pull-left'l>r<'clearfix'>>>t<'row'<'col-sm-12'<'pull-left'i><'pull-right'p><'clearfix'>>>", 
       "bFilter": false, 
       "bInfo": false, 
       "bLengthChange": false, 
       "sPaginationType": "full_numbers", 
       "bServerSide": true, 
       "bProcessing": true, 
       "iDisplayLength": 10, 
       "sAjaxSource": '@Url.Action("GetNotInBadFormatData")', 
       "aoColumns": [ 
        { "sName": "ID", "bVisible": false, "bSortable": false, "sWidth": "2%" }, 
        { "sName": "DEA", "bSortable": false, "sWidth": "2%" }, 
        { "sName": "Product", "bSortable": false }, 
        { "sName": "NDC", "bSortable": false }, 
        { "sName": "Sales", "bSortable": false }, 
        { "sName": "Fees", "bSortable": false }, 
        { "sName": "Quantity", "bSortable": false }, 
        { "sName": "Contract", "bSortable": false }, 
        { "sName": "Fee", "bSortable": false }, 
        { "sName": "HIN", "bSortable": false }, 
        { "sName": "CustomerName", "bSortable": false }, 
        { "sName": "CustomerAddress", "bSortable": false }, 
        { "sName": "City", "bSortable": false }, 
        { "sName": "State", "bSortable": false } 
       ], 

       "fnPreDrawCallback": function() { 
        centerThis('Processing'); 
        $("#Processing").css("display", "block"); 
       }, 

       "fnDrawCallback": function (nSettings) { 
        if (nSettings._iDisplayLength < nSettings.fnRecordsDisplay()) { 
         $('.dataTables_paginate').css("display", "block"); 
        } 
        else { 
         $('.dataTables_paginate').css("display", "none"); 
        } 
        $('#tblNotInBad tbody tr td').each(function() { 
         this.setAttribute('title', "Click to see contracts."); 
        }); 
       }, 
       "fnInitComplete": function() { 
        this.fnAdjustColumnSizing(); 
        centerThis('Processing'); 
        $("#Processing").css("display", "none"); 
       } 
      }); 

HTML код:

<div class="content-box-content"> 
    <table style="width:100%;font-size:10px;"> 
     <tr> 
      <td > 
       <label> 
        <input type="checkbox" id="skip" value="Skip Check" />Skip Check 
       </label> 
      </td> 
      <td > 
       <label> 
        Check: 
       </label> 
      </td> 
      <td style="text-align:center;"> 
       <label> 
        <input type="radio" name="filter" value="DEA" id="rdb1" />DEA 
       </label> 
      </td> 

      <td > 
       <label> 
        <input type="radio" name="filter" value="HIN" id="rdb2" />HIN 
       </label> 
      </td> 
      <td > 
       <label> 
        <input type="radio" name="filter" value="NDC" id="rdb3" />NDC 
       </label> 
      </td> 
      <td > 
       <label> 
        <input type="radio" name="filter" value="Contract" id="rdb4" />Contract 
       </label> 
      </td> 
      <td > 
       <label> 
        <input type="radio" name="filter" value="Payment" id="rdb5" />Payment 
       </label> 
      </td> 
     </tr> 
    </table> 
</div> 
<div> 
    <label style="font-size:12px;">Bad Format:</label> 
    <table id="tblBadFormat" class="table table-bordered table-hover table-striped table-condensed" style="width:100%;"> 
     <thead> 
      <tr> 
       <th style="font-size:11px;">Id</th> 
       <th style="font-size:11px;">DEA</th> 
       <th style="font-size:11px;">Product Name/Description</th> 
       <th style="font-size:11px;">NDC</th> 
       <th style="font-size:11px;">Sales $</th> 
       <th style="font-size:11px;">Fees $</th> 
       <th style="font-size:11px;">Qty/Units</th> 
       <th style="font-size:11px;">Contract #(ID)</th> 
       <th style="font-size:11px;">Fee %</th> 
       <th style="font-size:11px;">HIN</th> 
       <th style="font-size:11px;">Customer Name</th> 
       <th style="font-size:11px;">Customer Address</th> 
       <th style="font-size:11px;">City</th> 
       <th style="font-size:11px;">State</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 
<div> 
    <label style="font-size:12px;">Not in GPO:</label> 
    <table id="tblNotInBad" class="table table-bordered table-hover table-striped table-condensed" style="width:100%;"> 
     <thead> 
      <tr> 
       <th style="font-size:11px;">Id</th> 
       <th style="font-size:11px;">DEA</th> 
       <th style="font-size:11px;">Product Name/Description</th> 
       <th style="font-size:11px;">NDC</th> 
       <th style="font-size:11px;">Sales $</th> 
       <th style="font-size:11px;">Fees $</th> 
       <th style="font-size:11px;">Qty/Units</th> 
       <th style="font-size:11px;">Contract #(ID)</th> 
       <th style="font-size:11px;">Fee %</th> 
       <th style="font-size:11px;">HIN</th> 
       <th style="font-size:11px;">Customer Name</th> 
       <th style="font-size:11px;">Customer Address</th> 
       <th style="font-size:11px;">City</th> 
       <th style="font-size:11px;">State</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
</div> 

Json Ответ на 1-й таблице:

{"sEcho":"1","iTotalRecords":4,"iTotalDisplayRecords":4,"aaData":[["1","22EF581100","Shampoo","0090456890","9.80","4.50","5","2000018590-01","13.33","","JOHNSON","Boston","Houston","Texas"],["2","22EF581100","Toothpaste","0090456890","5.50","3.50","5","2000018590-01","15.66","","Merk","Dallas","Los Angeles","California"],["3","22EF581100","Hair Gel","0090456890","5.66","2.50","5","2000018590-01","14.67","","Sun","Dallas","San Antonio","Texas"],["4","22EF581100","Hair Cream","0090456890","3.33","3.89","5","2000018590-01","12.56","","JOHNSON","Dallas","Dallas","Texas"]]} 

Json ответ на 2-ой таблице:

{"sEcho":"1","iTotalRecords":4,"iTotalDisplayRecords":4,"aaData":[["5","22EF581100","Body Deodrant","0090456890" 
,"6.50","4.56","3","2000018590-01","11.67","","Olay","San Diego","Lexington","Kentucky"],["6","22EF581100" 
,"FaceWash","0090456890","3.50","7.68","6","2000018590-01","10.90","","Facklay","Washington","Kansas 
City","Missouri"],["7","22EF581100","Facial Cream","0090456890","8.90","8.65","8","2000018590-01","45 
.67","","Neutrogena","Washington","Buckeye","Arizona"],["8","22EF581100","Perfume","0090456890","2.30" 
,"9.78","9","2000018590-01","23.56","","Garnier","Washington","Phoenix","Arizona"]]} 

Прилагается скриншот данных.

Answer 1

Ok, это один уровень настройки, как вы можете сделать редактируемые строки на основе radio button выбран

//Add on change event to radio button and capture its value 
$("input[name=filter]").on('change', function() { 
    $("table tbody tr").each(function() { 
     var val = $(this).find('td input[type="text"]').val(); 
     $(this).find('td input[type="text"]').closest('td').html(val) 
    }); 
    //make any editable rows to non-editable by looping through each of them 
    makeEditable(this.value);//call the function and pass the value of selected radio. 
}) 

//this method assumes that the value of radio button and thead column are same and case sensitive 
function makeEditable(val) { 
    var FTheadIndex = $('#tblBadFormat thead th:contains(' + val + ')').index(); 
    //FTheadIndex will contain the index of column which matches the value of selected radio from first table 
    var STheadIndex = $("#tblNotInBad thead th:contains(" + val + ")").index(); 
    //STheadIndex will contain the index of column which matches the value of selected radio from second table 

    //loop through each row from first table and find the column index equivalent to Selected column 
    $.each($('#tblBadFormat tbody tr'), function() { 
     var td = $(this).find('td:eq(' + FTheadIndex + ')'); 
     td.html('<input type="text" value="' + td.text() + '"/>') 
     //replace its html with input text and set its value to present value for that row 
    }) 
    //same as above for 2nd table.   
    $.each($('#tblNotInBad tbody tr'), function() { 
     var td = $(this).find('td:eq(' + STheadIndex + ')'); 
     td.html('<input type="text" value="' + td.text() + '"/>') 
    }) 
} 

Here is the DEMO

Теперь, чтобы сохранить это в базе данных, вы» прежде чем принимать решение о том, какое событие вы хотите сохранить до DB. На фокусе от textbox или по нажатию любой кнопки. Если вы сообщите мне, я могу вам предложить.