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

  • 相关阅读:
    MySql使用游标Cursor循环(While)更新数据
    初试TinyIoCContainer笔记
    用Razor做静态页面生成器
    在CentOS6.5上安装MariaDB
    mono的远程调试
    mono3.2.3+Jexus5.5+openSuSE13.1的asp.net
    mono3.2和monodevelop4.0在ubuntu12.04上两天的苦战
    第一节知识点:.net与c#的概念
    支付宝支付功能(使用支付宝sdk)
    vs2017/vs2019 去掉 单击aspx文件预览页面
  • 原文地址:https://www.cnblogs.com/xinyibufang/p/7246037.html
Copyright © 2020-2023  润新知