Question

我有以下项目。在那里，您可以单击各个复选框，并写入ID（请参阅控制台）。

然后我已经测试了ServerPaging。这在另一个项目中起作用（没有复选框）。如果将以上项目更改为ServerPaging，则可以单击复选框，但是它将重新加载数据源。我在这里可以做什么？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Grid with checkboxes</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.bootstrap-v4.min.css" />

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
  <script src="https://demos.telerik.com/kendo-ui/content/shared/js/console.js"></script>
  
</head>

<body>

  <style>

    html {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    label {
      float: left;
      line-height: 1;
    }

    [role='gridcell'] {
      box-shadow: none !important;
    }

    .checkColumnCenter {
      text-align: center;
      width: 20px;
    }
    
    .fieldlist {
      margin: 0 0 -1em;
      padding: 0;
    }

    .fieldlist li {
      list-style: none;
      padding-bottom: 1em;
    }

  </style>

  <div id="example">
    <div id="grid"></div>
  </div>
  <script>
    

  $(document).ready(function() {

    var MainArray = [];
    var subArray = [];
    var selectedItems = [];
    var pageNum;
    var initialLength = 0;
    var confirmedArray = [];
    
		var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
        
    dataSource = new kendo.data.DataSource({
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
          dataType: "jsonp"
        },
        update: {
          url: "https://demos.telerik.com/kendo-ui/service/products/update",
          dataType: "jsonp"
        },
        parameterMap: function (options, operation) {
          if (operation !== "read" && options.models) {
            return { models: kendo.stringify(options.models) };
          }
          return kendo.data.transports["odata"].parameterMap(options, operation);
        }
      },
      pageSize: 10,
      type: "odata",
      batch: true,
      serverPaging: false,
      serverSorting: false,
      /*serverPaging: true,
      serverFiltering: true,
      serverSorting: true,
      batch: true,*/
      schema: {
        model: {
          id: "ProductID",
          fields: {
            ProductID: { editable: false, nullable: true },
            ProductName: { validation: { required: true } },
            UnitPrice: { type: "number", validation: { required: true, min: 1 } },
            Discontinued: { type: "boolean" },
            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
          }
        },
        data: function (response) {
          return response.d ? response.d.results: response;
        }
      }
    });


    $("#grid").kendoGrid({
      dataSource: dataSource,
      height: 350,
      navigatable: true,
      pageable: true,
      sortable: true,
      persistSelection: true,
      filterable: {
        extra: false,
        mode: 'row',
        operators: {
          string: {
            contains: "Contains",
            startswith: "Starts with",
            eq: "Equal",
            neq: "Not equal"
          }
        },
        messages: {
          isTrue: "checked",
          isFalse: "selectable"
        }
      },
      resizable: true,
      columns: [{
          field: "Discontinued",
          width: 150,
          template: "<input type='checkbox' onclick='checkOne()' data-bind='checked:Discontinued' />",
          headerTemplate: "<input id='checkAll' type='checkbox' onclick='checkAll(this)'/><span id='checkAllPtext'></span>",
          attributes: {
            "class": "checkColumnCenter",
            style: "color:\\#0c0"
          }
        },
        {
          field: "ProductName",
          title: "Product",
          width: 150
        },
        {
          field: "UnitPrice",
          title: "Unit",
          width: 120
        },
        {
          field: "UnitsInStock",
          title: "Costplace",
          width: 120
        },
      ],
      dataBound: function(e) {
        
        if(this.dataSource.filter()){
              $('#checkAll').show(); 
              $('#checkAllPtext').show().html("All");
            } else {
              $('#checkAll').hide();
              $('#checkAllPtext').hide();
            }
        
        selectedItems = [];
        var selectedItemsPage = [];

        e.sender.items().each(function() {
          var dataItem = e.sender.dataItem(this);
          kendo.bind(this, dataItem);

          if (dataItem.Discontinued) {
            var grid = $("#grid").data("kendoGrid");
            var dataItem = grid.dataItem(this);
            selectedItemsPage.push(dataItem);
            $(this).addClass("k-state-selected");
          }

        });

        if (pageNum == e.sender.dataSource._page) {
          // kendoConsole.log('initialLength', initialLength)
          if (initialLength !== 0) {
            // MainArray.splice(-initialLength);
            // kendoConsole.log('subArray', MainArray.indexOf(subArray[0]))
            subArray.forEach(function(item, i) {
              MainArray.splice(MainArray.indexOf(item), 1);
            });
          }
          if (selectedItemsPage.length > 0) {
            selectedItems = selectedItemsPage;
          }
          subArray = selectedItemsPage;
          initialLength = selectedItems.length;
        } else {
          selectedItemsPage.forEach(function(item) {
            if (MainArray.indexOf(item) > -1) {
              MainArray.splice(MainArray.indexOf(item), 1);
            }
          });
          pageNum = e.sender.dataSource._page;
          if (selectedItemsPage.length > 0) {
            selectedItems = selectedItemsPage;
          }
          subArray = selectedItemsPage;
          initialLength = selectedItems.length;
        }

        MainArray = MainArray.concat(selectedItems);
        // kendoConsole.log(MainArray);
        $("#checkAll")[0].checked = e.sender.items().find(":checked").length == e.sender.dataSource.view().length;
      }
    });

    setTimeout(function() {
      getMarked();
    }, 500);

    getMarked = function() {
      dataSource.fetch(function() {
        confirmedArray = dataSource._data.filter(function(item) {
          return item.Discontinued;
        })
        var confirmedIDs = confirmedArray.map(function(item) {
          return item.ProductID;
        });
        kendoConsole.log(JSON.stringify("Selected ID's: " + confirmedIDs));
      })
    }
    // setTimeout(function () {
    //     getMarked();
    // }, 200);
  });

    var getMarked;
    function checkOne() {
      setTimeout(function() {
        getMarked();
      }, 100);
    }

    function checkAll(input) {
      var grid = $("#grid").data("kendoGrid");
      var items = grid.items();
      items.each(function() {
        var dataItem = grid.dataItem(this);
        if (dataItem.Discontinued != input.checked) {
          dataItem.Discontinued = input.checked;
          dataItem.dirty = true;
        }
      })
      grid.dataSource.sync();
      setTimeout(function() {
        getMarked();
      }, 100);
    }
  </script>
  
        <div class="box wide">
        <h4>Console log</h4>
        <div class="console"></div>
    </div>
    <style>
        .console div {
            height: 6em;
        }
    </style>
  
</body>

</html>

Answer 1

我通过简单的支票array.length > 0

帮助了它

        getMarked = function() {
          if (array.length > 0) {
            // foo nothing 
          }
          dataSource.fetch(function() {
            confirmedArray = dataSource._data.filter(function(item) {
              return item.Discontinued;
            })
            var confirmedIDs = confirmedArray.map(function(item) {
              return item.ProductID;
            });
          })
        }

问题在于，每次执行操作后，都会重新加载网格。由于网格中的更改尚未保存，因此他每次都放弃了更改。对我来说是个不错的解决方法。

如何在Kendo UI上使用复选框和ServerPaging？

1 个答案: