zoukankan      html  css  js  c++  java
  • kendoGrid methods方法

     链接地址:https://docs.telerik.com/kendo-ui/api/javascript/ui/grid

    var grid = $("#grid").data("kendoGrid");

    1.addRow

    新增一行,可编辑状态下(editable)

    grid.addRow();

    2.autoFitColumn

    自动适应列宽

    //后面可以跟index或field名
    grid.autoFitColumn(1);     
    grid.autoFitColumn("age");
    $("#grid").kendoGrid({
        columns: [{
            title: "Person",
            columns: [
                { field: "fname", title: "First name"},
                { field: "lname", title: "Last name"}
            ]}, {
                field: "age"
            }
        ],
        dataSource: [
            { fname: "Jane", lname: "Smith", age: 30 },
            { fname: "John", lname: "Stevens", age: 33 }
        ]
    });
    grid.autoFitColumn(grid.columns[0].columns[1]);

    3.cancelChanges

    撤销所有更改,可编辑状态下(editable)

    grid.cancelChanges();

    4.cancelRow

    撤销新增的行,可编辑状态下(editable)

    grid.cancelRow();

    5.cellIndex

    返回单元格的索引值

    var cell = $("#grid td:eq(1)");
    grid.cellIndex(cell);

    6.clearSelection

    取消选中的行

    grid.clearSelection();

    7.closeCell

      关闭正在编辑的单元格(感觉好像用不到)

    grid.closeCell();

    8.collapseGroup

    折叠指定的组

    $("#grid").kendoGrid({
      columns: [
        { field: "productName" },
        { field: "category" }
      ],
      dataSource: {
        data: [
          { productName: "Tea", category: "Beverages" },
          { productName: "Coffee", category: "Beverages" },
          { productName: "Ham", category: "Food" },
          { productName: "Bread", category: "Food" }
        ],
        group: { field: "category" }
      },
      groupable: true
    });
    var grid = $("#grid").data("kendoGrid");
    grid.collapseGroup(".k-grouping-row:contains(Beverages)");

    效果图:

    9.collapseRow

    折叠指定的行

    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
          { name: "Jane Doe", age: 30 },
          { name: "John Doe", age: 33 }
      ],
      detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
    });
    var grid = $("#grid").data("kendoGrid");
    // first expand the first master table row
    grid.expandRow(".k-master-row:first");
    grid.collapseRow(".k-master-row:first");

    效果图:

    10.current

    获取或设置当前单元格

    $("#grid").kendoGrid({
        columns: [
        { field: "name" },
        { field: "age" }
        ],
        dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
        ],
        navigatable: true
    });
    var grid = $("#grid").data("kendoGrid");
    var lastCell = grid.tbody.find("tr:last td:last");
    grid.current(lastCell);
    grid.table.focus();

    效果图:

    11.dataItem

    返回指定行的数据

    var dataItem = grid.dataItem("tbody tr:eq(0)");

    12.destroy

    分离所有事件处理程序(没用过,不太清楚)

    grid.destroy();

    13.editCell

    编辑单元格

    grid.editCell($("#grid td:eq(0)"));

    14.editRow

    编辑行

    grid.editRow($("#grid tr:eq(1)"));

    15.expandGroup

    展开组

    $("#grid").kendoGrid({
      columns: [
        { field: "productName" },
        { field: "category" }
      ],
      dataSource: {
        data: [
          { productName: "Tea", category: "Beverages" },
          { productName: "Coffee", category: "Beverages" },
          { productName: "Ham", category: "Food" },
          { productName: "Bread", category: "Food" }
        ],
        group: { field: "category" }
      },
      groupable: true
    });
    var grid = $("#grid").data("kendoGrid");
    // first collapse the group
    grid.collapseGroup(".k-grouping-row:contains(Beverages)");
    grid.expandGroup(".k-grouping-row:contains(Beverages)");

    16.expandRow

    展开指定行

    grid.expandRow(".k-master-row:first");

    17.getOptions

      获取配置信息

    var options = grid.getOptions();
    console.log(options.sortable); 
    console.log(options.columns);

    18.hideColumn

    隐藏列,用法同autoFitColumn

    grid.hideColumn(1);

    19.items

      当前页面的所有行

    grid.items();

    20.lockColumn

    锁定列(表格中必须有一列锁定)

    $("#grid").kendoGrid({
      columns: [
        { field: "name",  400, locked: true },
        { field: "age",  200 },
        { field: "hometown",  400 },
        { field: "siblings",  200 }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30, hometown: "Sofia, Bulgaria", siblings: 3 },
        { name: "John Doe", age: 33, hometown: "Boston, MA, USA", siblings: 1 }
      ]
    });
    var grid = $("#grid").data("kendoGrid");
    grid.lockColumn("age");

    21.refresh

    刷新数据

    grid.refresh();

    22.removeRow

      删除行

    grid.removeRow("tr:eq(1)");

    23.reorderColumn

    改变列的位置

    //destIndex:列的新位置   column:应更改其位置的列
    grid.reorderColumn(destIndex, column);
    grid.reorderColumn(1, grid.columns[0]);

    24.saveAsExcel

    导出excel

    grid.saveAsExcel();

    25.saveAsPDF

      导出PDF

    grid.saveAsPDF();

    26.saveChanges

    调用sync保存所有的更改

    grid.saveChanges();

    27.saveRow

      关闭编辑,并且保存更改(基本用不上)

    grid.saveRow();

    28.select

    获取或设置所选的行

      grid.select("tr:eq(0), tr:eq(1)");

    29.selectedKeyNames

    返回一个数组,包含所选行的id字段

    grid.selectedKeyNames()

    30.setDataSource

    设置数据源

    var dataSource = new kendo.data.DataSource({
      data: [
        { name: "John Doe", age: 33 }
      ]
    });
    var grid = $("#grid").data("kendoGrid");
    grid.setDataSource(dataSource);

    31.setOptions

    设置配置项

    grid.setOptions({
              sortable: true
        });

    32.showColumn

    显示指定的列(隐藏的列)

    grid.showColumn("age");

    33.unlockColumn

    解锁冻结的列

    grid.unlockColumn("name"); 
  • 相关阅读:
    [HNOI2002]营业额统计
    HDU 1374
    HDU 3345
    HDU 2089
    Graham扫描法
    Codeforces 1144D Deduction Queries 并查集
    Codeforces 916E Jamie and Tree 线段树
    Codeforces 1167F Scalar Queries 树状数组
    Codeforces 1167E Range Deleting
    Codeforces 749E Inversions After Shuffle 树状数组 + 数学期望
  • 原文地址:https://www.cnblogs.com/zsj-02-14/p/9294153.html
Copyright © 2011-2022 走看看