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

  • 相关阅读:
    防止头文件的重复包含问题
    git常用命令
    redis
    linux常用操作
    数据库安装
    mysql修改表结构
    mysql 忘记root密码及授权访问
    mysql连表查询
    mysql 存取ip方法
    php批量修改表结构
  • 原文地址:https://www.cnblogs.com/xinyibufang/p/7246037.html
Copyright © 2011-2022 走看看