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

  • 相关阅读:
    css动画集合地址
    邮箱正则
    好用的工具之一 ---- Sublime Text
    组件化表单解决方案AForm 1.3 发布
    WinScp几个极大提高开发效率的小功能
    session的本质及如何实现共享?
    使用phantomjs操作DOM并对页面进行截图需要注意的几个问题
    Ubuntu 12.04 安装最新版本NodeJS
    IIS 8 nodejs + iisnode 配置
    Bagging和Boosting的介绍及对比
  • 原文地址:https://www.cnblogs.com/djd66/p/15688197.html
Copyright © 2011-2022 走看看