jquery 在KendoGrid中跨页面转换保持选择状态

vsikbqxv  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(136)

在kendoGrid中,当页面加载时,假设我已经有了选定的productID。因此,当加载网格并绑定数据时,它会选择相应的行。
当我取消选中第一页上的产品ID,然后导航到第二页检查数据时,问题就出现了。返回到第一页时,我注意到以前未选中的产品ID再次变为选中状态。
我希望网格只获取和显示我主动选择的ID,确保我的选择在不同的页面和操作中保持不变。感谢你的帮助。
DEMO IN DOJO

$("#grid").kendoGrid({
  dataBound: function(e){
    var grid = this;
    var rows = grid.items();
    $(rows).each(function(e) {
      var row = this;
      var dataItem = grid.dataItem(row);
      if (selectedProductIDs.includes(dataItem.ProductID)) {
        grid.select(row);
      }                    
    });
  },
  dataSource: dataSourceTEST,
  pageable: true,
  persistSelection: true,
  sortable: true,
  change: function(e) {
    console.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
  },
  columns: [{
    selectable: true,
    width: "50px"
  },
            {
              field: "ProductName",
              title: "Product Name"
            },
            {
              field: "UnitPrice",
              title: "Unit Price",
              format: "{0:c}"
            },
            {
              field: "UnitsInStock",
              title: "Units In Stock"
            },
            {
              field: "Discontinued"
            }
           ]
});
qvk1mo1f

qvk1mo1f1#

我有一个有点类似的错误,它发生,当我选择了一个项目在剑道网格,并打开页面,当我返回的选择从上一页不再坚持,甚至没有通过添加.PersistSelection().我选择不使用columns.select(),在我的剑道网格中,我可以做以下事情:

columns.Bound(p => p.JoinContractID).ClientTemplate("<input type='checkbox' id='eachCheckbox-#= Contract_Join.ContractID #' onchange='saveCheckedItem(this);' class='chkbx'/>").Title("Select").Editable("ReturnFalse").Width(80).Filterable(false).HtmlAttributes(new { style = "text-align: center" });

然后我添加了以下事件:

.Events(events => events.DataBound("onDataBoundGridJoin"))

我的js

var selectItems = [];
function saveCheckedItem(element) {
    if (element.checked) {
        selectItems.push(element.id);
    }
    else {
        if (selectItems.includes(element.id)) {
            var removePosition = selectItems.indexOf(element.id);
            selectItems.splice(removePosition, 1);
        }
    }
}
function onDataBoundGridJoin(e) {
    selectItems.forEach((checkId, index) => {
        $(`#${checkId}`).prop("checked", true);
    })
}
function ReturnFalse(e) {
    return false;
}

也许它也会为你工作,祝你好运

相关问题