kendoGrid methods方法

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

这里等同于动态配置Grid

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

1.addRow

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

grid.addRow();

2.autoFitColumn

自动适应列宽

kendoGrid methods方法
//后面可以跟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]);
kendoGrid methods方法

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

折叠指定的组

kendoGrid methods方法
$("#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)");
kendoGrid methods方法

效果图:

kendoGrid methods方法

9.collapseRow

折叠指定的行

kendoGrid methods方法
$("#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");
kendoGrid methods方法

效果图:

kendoGrid methods方法

10.current

获取或设置当前单元格

kendoGrid methods方法
$("#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();
kendoGrid methods方法

效果图:

kendoGrid methods方法

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

展开组

kendoGrid methods方法
$("#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)");
kendoGrid methods方法

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

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

kendoGrid methods方法
$("#grid").kendoGrid({
  columns: [
    { field: "name", width: 400, locked: true },
    { field: "age", width: 200 },
    { field: "hometown", width: 400 },
    { field: "siblings", width: 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");
kendoGrid methods方法

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

设置数据源

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

31.setOptions

设置配置项

grid.setOptions({
          sortable: true
    });

32.showColumn

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

grid.showColumn("age");

33.unlockColumn

解锁冻结的列

grid.unlockColumn("name"); 
 

来自:https://www.cnblogs.com/zsj-02-14/p/9294153.html

上一篇:Vue 插槽 slot


下一篇:Vue基础