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