Question

我在我的应用程序中使用Telerik kendo网格。我试图在网格中实现select-all功能。网格标题中有一个复选框。当我单击标题复选框时，将自动检查行内的复选框，反之亦然。

我的kendo网格代码是：

@(Html.Kendo().Grid<BulkInsertUpdate.Models.Product>()
      .Name("ProductGrid")
      .Columns(col =>
      {
          col.Template(m => { }).ClientTemplate("<input type='checkbox' id='chkSelect_#= ProductID#' userId='#= ProductID#' class='box' />").Width(10)
          //col.Template(@<text></text>).ClientTemplate("<input type='checkbox' id='chkSelect_#= ProductID#' />")
          //col.Template(@<text><input class="box" id="chkSelect" name="chkSelect" type="checkbox" /></text>)
                      .HeaderTemplate("<input type='checkbox' id='checkAll' />").Width(10);
          col.Bound(m => m.ProductID).Hidden(true);
          col.Bound(m => m.ProductName).Width(155).Title("Product Name");
          col.Command(cmd =>
          {
              cmd.Destroy();
          }).Width(20);
      })
      //.ToolBar(toolbar => toolbar.Create())
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          //toolbar.Save();
          //toolbar.Custom().Text("Select All")
          //    .HtmlAttributes(new { onclick = "deleteSelection(event)" });
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(300))
      .Filterable(filterable => filterable
          .Extra(false)
          .Operators(op => op.ForString(str => str.Clear()
              .StartsWith("Starts with")
              .IsEqualTo("Is equal to")
              .IsNotEqualTo("Is not equal to")
              .Contains("Contains")
              ))
      )
      .Resizable(re => re.Columns(false))
      .Reorderable(reo => reo.Columns(false))
      .DataSource(ds => ds.Ajax()
          .Batch(true)
          .Events(events => events.Error("error_handler"))
          .Model(mod =>
          {
              mod.Id(com => com.ProductID);
          })
          .Read(read => read.Action("Product_Read", "Product"))
      //  .Update(update => update.Action("Product_Update", "Product"))
      //.Destroy(destroy => destroy.Action("ComponentType_Delete", "ComponentType"))
      ))

样式表：

<style type="text/css">
    .box {
        background-color: blueviolet;
    }
    </style>

我尝试了两种方法。 1.我的java脚本的第一种方式是：

<script>
$(document).ready(function () {
        $('#checkAll').click(function () {
            if ($(this).attr('checked')) {
                $("#ProductGrid tbody input:checkbox").attr("checked", this.checked);
            } else {
                $("#ProductGrid tbody input:checkbox").removeAttr("checked");
            }
        });
    });
</script>

但是它总是在执行else部分。

我使用.box类的第二种方法，我已经提到过了。

脚本如：

<script>
$(document).ready(function () {
       $("#checkAll").click(function () {
           $(".box").attr("checked", $(this).attr("checked") ? true : false);
        });
    });
</script>

同样的事情也发生在这里。我正在使用Northwind数据库和MVC 5。

感谢接受任何帮助。

由于

帕塔

Answer 1

我们也在自己的应用程序中创建了这个，我们在标题中添加了一个类：$('.calculation-selection-checkbox')

并在此课程上附加了一个Click事件：

 projects.handleCheckBoxHeaderClicked = function (clickEvent) {
    var checkBoxes = $('.calculation-selection-checkbox');
    var element = $(this.children[0]);
    var value = element.html();
    if (value.charCodeAt(0) === 9745) {
        localStorageManager.removeAll();
        checkBoxes.prop('checked', false);
        element.html('&#x2610;');
    } else {
        localStorageManager.addAll();
        checkBoxes.prop('checked', true);
        element.html('&#x2611;');
    }
};

我们将单独的复选框后面的所有隐藏ID加载到localstorage / sessionstorage中，具体取决于应用程序，然后将该列表作为表单数据减去该调用：）

编辑：

这就是我们在Grid中创建checkboxcolumn的方法：

columns.Template(@<text>
<label class="checkbox-radiobutton">

    <input type="checkbox" data-id="@item.CalculationId" name="selectThisProject" 
class="checkbox calculation-selection-checkbox checkbox-radiobutton"><span></span></label>  
</text>).Title("&#x2610;")
.HeaderHtmlAttributes(new { @class = "check-box-header" }).Width("30px");

对于捕获事件，我们这样做：

   projects.initializeCheckBoxes = function () {
        if (projects.allSelected) {
            var isChecked = (projects.allSelected === "true");
            var checkBoxes = $('.calculation-selection-checkbox');
            var i;
            var element = $('.check-box-header')[0];
            checkBoxes.prop('checked', isChecked);
            var checkBox = $('.checkbox');
            for (i = 0; i < checkBox.length; i++) {
                var id = $(checkBox[i]).data('id');
                if (!localStorageManager.exists(id)) {
                    $(checkBox[i]).prop('checked', false);
                } else if (localStorageManager.exists(id)) {
                    $(checkBox[i]).prop('checked', true);
                    $("#EdreamsPanel").removeClass("hidden");
                }

            }
            if (isChecked)
                $(element).html('<span class="k-link">&#x2611;</span>');
        }
    };

用于初始化，这用于捕获headerAttribute单击：

 projects.handleCheckBoxHeaderClicked = function (clickEvent) {
        var checkBoxes = $('.calculation-selection-checkbox');
        var element = $(this.children[0]);
        var value = element.html();
        if (value.charCodeAt(0) === 9745) {
            localStorageManager.removeAll();
            checkBoxes.prop('checked', false);
            element.html('&#x2610;');
        } else {
            localStorageManager.addAll();
            checkBoxes.prop('checked', true);
            element.html('&#x2611;');
        }
    };

希望它有所帮助，如果您需要更多信息，请询问

检查/取消选中Telerik Kendo网格中的功能不起作用

1 个答案: