Выберите все флажки, не работающие внутри веб-сетки Jquery и ASP.net MVC - PullRequest
Новая
       41

Выберите все флажки, не работающие внутри веб-сетки Jquery и ASP.net MVC

0 голосов
/ 27 сентября 2018

Мне нужно установить все флажки в моей таблице, а также мне нужно выбрать каждую строку отдельно.Чтобы добиться этого, я использовал этот пост .

Это код Jquery 

@section Scripts{
    <script>
        $(document).ready(function () {

            // 1st replace first column header text with checkbox

            $("#checkableGrid th").each(function () {               
                if ($.trim($(this).text().toString().toLowerCase()) === "{checkall}") {
                    $(this).text('');
                    $("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
                    $(this).append("<span>Select All</span>");
                }
            });

            //2nd click event for header checkbox for select /deselect all
            $("#cbSelectAll").live("click", function () {
                var ischecked = this.checked;
                $('#checkableGrid').find("input:checkbox").each(function () {
                    this.checked = ischecked;
                });
            });


            //3rd click event for checkbox of each row
            $("input[name='ids']").click(function () {
                var totalRows = $("#checkableGrid td :checkbox").length;
                var checked = $("#checkableGrid td :checkbox:checked").length;

                if (checked == totalRows) {
                    $("#checkableGrid").find("input:checkbox").each(function () {
                        this.checked = true;
                    });
                }
                else {
                    $("#cbSelectAll").removeAttr("checked");
                }
            });

        });
    </script>
}

И я называю это так: 

<div>
    @grid.GetHtml(
    tableStyle: "gridtable",
    htmlAttributes: new { id = "checkableGrid" },
    columns: grid.Columns
        (
    //Here I am going to add checkbox column
            grid.Column(
                format: @<text> <input type="checkbox" value="@item.CustomerID" name="ids" /> </text>,
                header: "{checkall}"
            ),
            grid.Column("CustomerID", "Customer ID"),
            grid.Column("CustomerName", "Customer Name"),
            grid.Column("Address", "Address"),
            grid.Column("City", "City"),
            grid.Column("PostalCode", "Postal Code")
        )
    )
</div>

Каждыйстроку можно выбрать отдельно, но я не могу выбрать все строки одновременно.Флажок Select All не отображается, вместо этого он отображается как {checkall}

enter image description here

Пожалуйста, кто-нибудь, помогите мне решить эту проблему.Спасибо.

1 Ответ

0 голосов
/ 27 сентября 2018

Используйте change событие вместо click и напишите следующее: 

//2nd click event for header checkbox for select /deselect all

$(document).on('change', '#cbSelectAll', function () {
  if ($(this).prop('checked')) {
    $('#checkableGrid').find("input:checkbox").prop('checked', true);
  } else {
     $('#checkableGrid').find("input:checkbox").prop('checked', false);
  }
});
...