根据Datatables中的单选按钮更改，使特定列可编辑

时间：2016-05-17 07:06:28

标签： javascript jquery datatables

我正在使用数据表。要求是在用户检查/单击相应的单选按钮后，使某些数据表列可编辑。例如：如果用户点击DEA，两个表中相应的DEA coulmn应该是可编辑的，如屏幕截图所示。编辑后的数据也需要保存在DB中。

客户端代码：

 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"]]}

附件是数据表的屏幕截图。enter image description here

1 个答案:

答案 0 :(得分：1)

好的，这是关于如何根据所选的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或点击任何按钮。如果你让我知道我可以据此建议你。

相关问题
最新问题