如何在选择jqgrid的所有复选框时进行ajax调用

Question

我已经成功实现了 jqgrid 功能，我的意图是在选中整个 jqgrid 的所有复选框时进行 ajax 调用。请帮助。我正在附加 jquery 代码。我还附上了视图代码。我作为输出得到的 jqgrid 的屏幕截图也附在上面

$(function () {
    $("#ListGrid").jqGrid({
        url: "/TodoList/GetTodoLists",
        datatype: 'json',
        mtype: 'Get',
        //colNames: ['<input type="checkbox" id="cbox" style="float:left" onchange="toggleCheckbox()"/>', 'FirstName', 'LastName', 'Id', 'Salary', 'Gender'],
        colModel: [

            { key: false, name: 'FirstName', index: 'FirstName', editable: true },
            { key: false, name: 'LastName', index: 'LastName', editable: true },
            { key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
            { key: false, name: 'Salary', index: 'Salary', editable: true },
            { key: false, name: 'Gender', index: 'Gender', editable: true }],        
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        gridview: true,
        caption: 'Todo List',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: true,        
        cellattr: function (rowId, val, rawObject) {
            return " class='cbEmpActive'";
        },
        onSelectRow: function (id, status) {
            var rowData = jQuery(this).getRowData(id);
            FirstName = rowData['FirstName'];
            LastName = rowData['LastName'];
            Salary = rowData['Salary'];
            Gender = rowData['Gender'];
            // Add this    
            alert(FirstName);
            var ch = jQuery(this).find('#' + id + ' input[type=checkbox]').prop('checked');
            if (ch) {
                jQuery(this).find('#' + id + ' input[type=checkbox]').prop('checked', false);
            }
            else {
                jQuery(this).find('#' + id + ' input[type=checkbox]').prop('checked',true);
            }

            // end Add
            rowChecked = 1;
            currentrow = id;
        },
        onSelectAll: function (aSel, selected)
        {
            if (selected)
            {
                $.ajax({
                    url: '/TodoList/Check',
                    type: 'Get',
                    dataType: 'json',
                    //contentType: "application/json; charset=utf-8",

                    success: function (response)
                    {
                        var rows = response.rows;
                        var trHTML = '';
                        alert('hello');
                        $.each(rows, function ()
                        {
                            trHTML += '<tr><td>' + this.FirstName + '</td><td>' + this.LastName + '</td></tr>';
                            alert(trHTML);
                        });
                        $('#records_table').append(trHTML);
                    }
                });

            }


        }

    }).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true },
        {
            // edit options
            zIndex: 100,
            url: '/TodoList/Edit',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {

                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // add options
            zIndex: 100,
            url: "/TodoList/Create",
            closeOnEscape: true,
            closeAfterAdd: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            // delete options
            zIndex: 100,
            url: "/TodoList/Delete",
            closeOnEscape: true,
            closeAfterDelete: true,
            recreateForm: true,
            msg: "Are you sure you want to delete this task?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        });
    $("#btn2").click(function (e) {
        e.preventDefault();
       // $('#ListGrid').trigger('reloadGrid');

    //$("#st1").change(function () {
      //  var value = $(this).val();
        //alert(value);

        if ($('#st1 option:selected').length > 0)
        {
            alert($('#st1 option:selected').text());
            if ($('#st1 option:selected').text() == "This is option2")
            {

                $("#ListGrid").setGridParam({ datatype: 'json', page: 1,url: "/TodoList/GridDataPrices" });
                $("#ListGrid").trigger('reloadGrid');
            }
        }



    //});
    });
    $('#btn3').click(function(e)
    {
        e.preventDefault();
        var url = "/TodoList/NewAction";
        window.location.href = url;

    });
});

查看：-

@{
    ViewBag.Title = "TodoList";
}

<h2>TodoList</h2>
<div>
    <table id="ListGrid">

    </table>
    <div id="pager"></div>
</div>
<br />
<br />
@*<div id="div2"></div>*@
<table id="records_table" border='1'>
    <tr>
        <th>Firstname</th>
        <th>LastName</th>
        @*<th>Salary</th>
        <th>Gender</th>*@
    </tr>
</table>
<input type="button" id="btn2" value="SUBMIT" />
<select id="st1">
  <option value="option1">This is option1</option>
  <option value="option2">This is option2</option>
  <option value="option3">This is option3</option>
  <option value="option4">This is option4</option>
</select>
<input type="button" id="btn3" value="Next Page" />
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/TodoList.js"></script>

Answer 1

可能您只需将data 参数添加到$.ajax 调用？您应该自己决定在服务器端您喜欢哪种数据格式。最简单的就是使用

data: $(this).jqGrid("getGridParam", "selarrrow").join()

获取所有选定行的 id 数组，并将数组转换为以逗号分隔的字符串，以 join 为基础。此外，您应该验证type: 'Get' 是否真的是您需要的，因为可能会出现缓存 HTTP GET 请求的问题。您应该在 HTTP 响应的标头中设置缓存参数，或者您可以使用 POST 而不是 GET。