根据数据表中的单选按钮更改可以编辑特定列
问题描述：
我正在使用数据表。要求是当用户选中/点击相应的单选按钮时，使某些数据表的列可编辑。例如：如果用户点击了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为第一表响应：
{"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响应：
{"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"]]}
附加的是数据表的截图。
答
好吧，这是你如何可以使基于该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或点击任何按钮。如果你让我知道我可以相应地给你建议。
+0
@ Guruprasad饶：感谢它的工作！ :) –
+0
任何时候..快乐编码.. :)请记下我在代码注释中提到的限制.. –
+0
好吧，会这样做..谢谢！ –
请理解这是不是准备好粘贴代码网站。你有什么尝试？你需要先显示你的努力。 – niksofteng
对于不粘贴代码，我表示歉意。我编辑了我的帖子。 –
不要紧，你可以发布'json'响应从服务器或呈现'html'也可以。当你添加评论，如果你想通知用户以'@'和用户名开头，就像我的情况@GuruprasadRao以通知我..其他方面，我们wouldnt知道您的评论或更新.. –