码迷,mamicode.com
首页 > 其他好文 > 详细

KendoGrid基础

时间:2017-07-27 18:24:07      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:art   http   生效   form   分享   multi   默认值   back   kendoui   

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

KendoGrid基础

标签:art   http   生效   form   分享   multi   默认值   back   kendoui   

原文地址:http://www.cnblogs.com/xinyibufang/p/7246037.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!