zoukankan      html  css  js  c++  java
  • 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}" },
            ]
        });

     

  • 相关阅读:
    液晶电子看板
    车间电子看板厂家
    车间电子看板系统
    Andon系统有哪些类型?
    Andon系统最完整的介绍
    Andon系统一般架构
    生产看板管理系统
    车间看板系统
    生产管理看板介绍
    黑马Java2020在线就业班2.1-全新升级
  • 原文地址:https://www.cnblogs.com/xinyibufang/p/7715545.html
Copyright © 2011-2022 走看看