• kendoGrid methods方法


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

    .net core :https://docs.telerik.com/aspnet-core/api/grid

    这里等同于动态配置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"); 
     

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

  • 相关阅读:
    JAVA中的继承
    各种浏览器设置背景颜色线性渐变的方式
    JavaScript原型链
    JavaScript运算符
    QQ聊天:终结编程语言和编程职业
    virutal dom patch
    关于编辑器和语言的一些启示
    node-webkit 资源
    我的程序,你的生活
    过早优化是万恶之源
  • 原文地址:https://www.cnblogs.com/djd66/p/15214152.html
Copyright © 2020-2023  润新知