1

インライン編集に関するこのチュートリアルに従っています http://www.datatables.net/blog/Inline_editing。

問題が発生しました。チェックボックスを編集しようとしていますが、そこに到達していません。

テキスト型の入力をチェックボックスに置き換えただけですが、それ以上のものがあると思います。だから私の質問は、どうすればチェックボックスのチェックされた属性を読むことができますか?

これは私のコードです

<script type="text/javascript">

    function restoreRow(oTable, nRow) {
        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);

        for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
            oTable.fnUpdate(aData[i], nRow, i, false);
        }

        oTable.fnDraw();
    }

    function editRow(oTable, nRow) {
        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);
        jqTds[0].innerHTML = '<input type="text" value="' + aData[0] + '">';
        jqTds[1].innerHTML = '<input type="text" value="' + aData[1] + '">';
        jqTds[2].innerHTML = '<input type="checkbox" value="' + aData[2] + '">';
        jqTds[3].innerHTML = '<a class="edit" href="">Save</a>';

    }

    function saveRow(oTable, nRow) {
        var jqInputs = $('input', nRow);
        oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
        oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
        oTable.fnUpdate('<input type="checkbox" checked="' + jqInputs[2].value + '">', nRow, 2, false);
        oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 3, false);
        oTable.fnDraw();
    }

    $(document).ready(function () {
        var oTable = $('#tbl').dataTable();
        var nEditing = null;

        $('#new').click(function (e) {
            e.preventDefault();

            var aiNew = oTable.fnAddData(['', '', '',
            '<a class="edit" href="">Edit</a>', '<a class="delete" href="">Delete</a>']);
            var nRow = oTable.fnGetNodes(aiNew[0]);
            editRow(oTable, nRow);
            nEditing = nRow;
        });

        $('#tbl a.delete').live('click', function (e) {
            e.preventDefault();

            var nRow = $(this).parents('tr')[0];
            oTable.fnDeleteRow(nRow);
        });

        $('#tbl a.edit').live('click', function (e) {
            e.preventDefault();

            /* Get the row as a parent of the link that was clicked on */
            var nRow = $(this).parents('tr')[0];

            if (nEditing !== null && nEditing != nRow) {
                /* Currently editing - but not this row - restore the old before continuing to edit mode */
                restoreRow(oTable, nEditing);
                editRow(oTable, nRow);
                nEditing = nRow;
            }
            else if (nEditing == nRow && this.innerHTML == "Save") {
                /* Editing this row and want to save it */
                saveRow(oTable, nEditing);
                nEditing = null;
            }
            else {
                /* No edit in progress - let's start one */
                editRow(oTable, nRow);
                nEditing = nRow;
            }
        });
    });

そして、これは私のテーブルです

<p>
                    <a id="new" href="">Add new row</a></p>
                <table cellpadding="0" cellspacing="0" border="0" class="tbl" id="tbl">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Description
                            </th>
                            <th>
                                Sample
                            </th>
                            <th>
                            </th>
                            <th>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model != null)
                        {
                            foreach (var item in Model.TestFields)
                            { 
                            <tr>
                                <td>
                                    @Truncate(item.Name, 20)
                                </td>
                                <td>
                                    @Truncate(item.Description, 20)
                                </td>
                                <td>
                                    @Html.CheckBoxFor(i => item.Sample)
                                </td>
                                <td>
                                    <a class="edit" href="">Edit</a>
                                </td>
                                <td>
                                    <a class="delete" href="">Delete</a>
                                </td>
                            </tr>
                            }
                        }
                    </tbody>
                </table>
4

2 に答える 2

0

これにより、選択した多くのチェックボックスの問題が解決するはずです

// #BoxWrapper is supposed to be the div that contains the checkbox this could be replaced            
// by $(document) if you are not using a div as a container. 
$("#BoxWrapper").find('input:checkbox').each(function(){
var checked = $(this).attr('checked');
if(checked){
 //here you do what needs to be done for checked ones
}
});
于 2012-12-03T17:09:14.587 に答える
0

あなたのシンボルがjQueryであると仮定すると、$これを行うことができます：

$('#my_checkbox').is(':checked') // true if my_checkbox is checked, false otherwise.
于 2012-12-03T16:36:46.387 に答える