在网格上分页时如何保持当前复选框状态

时间:2017-10-24 06:13:17

标签: javascript asp.net-mvc checkbox kendo-grid

我有加载数据的Kendo网格。每列都有一个复选框,供用户选择和下载。现在的问题是,如果我检查第1页上的几行,然后转到第2页进行选择。当我返回到第1页时,将取消选中所有选中的复选框。

我还尝试过此Make Selection with Checkbox ColumnExample

分页时如何保持复选框状态?

我试过这个没有运气,

剑道

 <fieldset class="fieldsetStyle" id="form">
     <div class="box-body">
         <div id="divMain" class="col-md-13">
              <div class="form-group">
            @(Html.Kendo().Grid<myModel>()

.Name("Grid")
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
    <button class="btn btn-primary" id="showSelection1" 
            onclick="goToFunctionController()" name="submit" type="submit">Download Selected 
            Orders</button>
    </div>
</text>);
})
.Columns(columns =>
{
columns.Bound(x => x.ordernumber).Title("Order Number");
            columns.Bound(x => x.ordernumber).Template(@<text>
</text>).ClientTemplate("<input id='chkId' name'chkbox' type='checkbox' 
class='checkbox' onClick='' />").Title("")
                .Filterable(false).Sortable(false);

})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Events(e => e.DataBound(@<text>function(e) {onDataBound()}</text>))

                  .Resizable(resize => resize.Columns(true))
                  .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(10)
                  .ServerOperation(false) //No post back
                  .Read(read => read.Action("ReadPoss", "ConsolidatedPOSS"))))
        </div>
    </div>
</div>

的Javascript

  function onDataBound() {
  alert("Inside onDataBound !!!!");
  var  grid = $("#Grid").data("kendoGrid")
  var  datasource = grid.dataSource.view();

    for (var i = 0; i < datasource.length; i++) {
        if (SeletectOrders[datasource[i].ordernumber]) {
            this.tbody.find("tr[data-uid='" + datasource[i].uid + "']")
            .addClass("k-state-selected")
            .find(".checkbox")
            .attr("checked", "checked"); 
        }
    }
}

模型

public class myModel
{
  public string ordernumber { get; set; }
  public bool IsSelected { get; set; }
}

1 个答案:

答案 0 :(得分:0)

您需要做的是将支票一旦选入griddata就存储,就像会话存储一样。好的,你去吧:

https://dojo.telerik.com/abEYO/2

$(".js-example-basic-single").select2();

$(function() {
   $("#geStd").click(function() {
      if ($(this).attr('id') === "geStd") {
         $("#appearance").val("green").trigger('change');
      } else {
         $("#geStd").prop('checked', false);
      }
   });
   $("select").change(function() {
      if (this.value !== "green") {
         $("#geStd").prop('checked', false);
      }
   });
});

如果您有任何问题,请与我们联系。