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", 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");

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");