KendoUI操作笔记

 注意：使用Grid筛选功能需要jqery2.2.4,否则会报错。

筛选：

 filterable: true

或

 filterable: {
                            mode: "row"
                        },

Grid隐藏某列

 hidden: true

例子：

  columns: [
            { title: '供应商ID', field: 'V_Verdor_ID', },
            { title: '供应商姓名', field: 'V_Name', },
            { title: '联系人', field: 'V_Contacts' },
            { title: '电话1', field: 'V_Phone1' },
            { title: '电话2', field: 'V_Phone2' },
            { title: '座机', field: 'V_Tel' },
            { title: '地址', field: 'V_Address' },
            { title: '产品类别ID', field: 'V_PTID', hidden: true, },
            { title: '产品类别', field: 'V_PTName' },
            { title: '产品资质', field: 'V_Certification',},
        ]

Grid绑定单击双击事件

Grid绑定单击事件

GG.on('click', '.k-grid-content tr', function () {
        // 获取当前选择行数据  
        var row = GG.data("kendoGrid").select();
        var data = GG.data("kendoGrid").dataItem(row);
        var Name = data.V_Name;
        alert(Name);
    });

Grid绑定双击事件

GG.on('dblclick', '.k-grid-content tr', function () {
        // 获取当前选择行数据  
        var row = GG.data("kendoGrid").select();
        var data = GG.data("kendoGrid").dataItem(row);
        var Name = data.V_Name;
        alert(Name);
    });

jQuery触发单击事件

//触发选中行点击
function GridRefresh() {
    var grid = $("#Grid").data("kendoGrid");
    var dataRows = grid.items();
  
    var rowIndex = dataRows.index(grid.select()); // 获取行号

    grid.select("tr:eq(" + rowIndex + ")"); //设置选中指定行
    $(".k-state-selected").trigger("click");    //触发选中行的点击事件
}

时间格式化

 var Date_Source = new kendo.data.DataSource({
        transport: {
            read: {
                dateType: 'application/json',
                url: '/ConfigManage/VendorPrice/GridRead',
                type: 'POST',
            },
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "ID",
                fields: {
                    VendorPriceID: {},
                    VendorID: {},
                    VendorName: {},                
                    F_CreatorTime: { type: 'date', format: "{0:yyyy-MM-dd HH:mm:ss}" },
                }
            }
        }
    });

    var GG = $("#Grid").kendoGrid({
        dataSource: Date_Source,
        height: 600,
        selectable: "multiple",
        sortable: true,
        filterable: true,
        pageable: {
            pageSizes: true,
            refresh: true,
            buttonCount: 5,
        },

        columns: [
            { title: '报价ID', field: 'VendorPriceID' },
            { title: '供应商ID', field: 'VendorID' },
            { title: '供应商名称', field: 'VendorName', },
            { title: '报价时间', field: 'F_CreatorTime', format: "{0:yyyy-MM-dd HH:mm:ss}" },
        ]
    });