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全选

     来自:https://www.cnblogs.com/xinyibufang/p/7246037.html

  • 相关阅读:
    107. Binary Tree Level Order Traversal II
    103. Binary Tree Zigzag Level Order Traversal
    102. Binary Tree Level Order Traversal
    690. Employee Importance
    1723. Find Minimum Time to Finish All Jobs
    LeetCode 329 矩阵中最长增长路径
    7.2 物理内存管理
    LeetCode 面试题 特定深度节点链表
    LeetCode 100 相同的树
    npm安装包命令详解,dependencies与devDependencies实际区别
  • 原文地址:https://www.cnblogs.com/djd66/p/15688197.html
Copyright © 2011-2022 走看看