zoukankan      html  css  js  c++  java
  • KendoGrid基础

    一.KendoUI Grid 绑定单击双击事件

    原文:http://blog.csdn.net/sakuya_tan/article/details/51437857

    <div id="grid"></div>
        <script>
            var grid = $("#grid").kendoGrid({
                columns: [
            { field: "id" },
            { field: "name" }
                ],
                dataSource: [
                    { id: "1", name: "lili" },
                    { id: "2", name: "jim" },
                    { id: "3", name: "jone" },
                    { id: "4", name: "tom" }
                ],
                filterable: true,
                sortable: true,
                navigatable: true,
                selectable: "multiple",
                pageable: {
                    pageSize: 10,
                    refresh: true
                },
                columns: [
                            { field: "id", title: "账号" },
                            { field: "name", title: "姓名" }
                ],
            });
            grid.on('dblclick', '.k-grid-content tr', function () {
                // 双击
                var row = grid.data("kendoGrid").select();
                var data = grid.data("kendoGrid").dataItem(row);
                var id = data.id;
                alert('双击事件【id:' + id + '');
            });
            grid.on('click', '.k-grid-content tr', function () {
                // 双击
                var row = grid.data("kendoGrid").select();
                var data = grid.data("kendoGrid").dataItem(row);
                var name = data.name;
                alert('单击事件【name:' + name + '');
            });
        </script> 

    二.编辑按钮名称自定义

     command: [{name:"edit",text:"asas"}

    三.Grid展示时间格式化

      schema: {
                    model: {
                        id: "ID",
                        fields: {
                            ID: {},
                            BegindYMD: { type: 'date', format: "{0:yyyy-MM-dd HH:mm:ss}" },
            }
        }
    }
    
    columns:[
      { title: '生效时间', field: 'BegindYMD', format: "{0:yyyy-MM-dd HH:mm:ss}" },
    ]            

    注意:必须columns:和schema都加format

    只加了schema效果:                                                                   都加了效果:

                      

    四.Grid转换显示

      { title: '门票状态', field: 'Stauts', values: [{ text: "售出", value: 1 }, { text: "已检", value: 2 }, { text: "退票", value: 3 }, { text: "挂失", value: 4 }] },

    效果:

     五.下拉选择框select加了name属性后selected不起作用,需要给个默认值,f_Enabled:{defaultValue:1},

    六.var All = grid.dataSource.view();  grid全选

  • 相关阅读:
    JVM系列三:JVM参数设置、分析
    JVM系列二:GC策略&内存申请、对象衰老
    HotSpot VM GC 的种类
    2.静态库和动态库
    1.GCC编译过程
    6.树
    5.队列
    4.栈
    3.线性表
    2.算法
  • 原文地址:https://www.cnblogs.com/xinyibufang/p/7246037.html
Copyright © 2011-2022 走看看