Kendo UI使用教程：Kendo UI Grid中的动态数据（一）

最新推荐文章于 2021-01-19 09:34:45 发布

abdsa20103088

最新推荐文章于 2021-01-19 09:34:45 发布

阅读量575

点赞数

文章标签： kendo ui ui

本文链接：https://blog.youkuaiyun.com/evget20103088/article/details/84910552

版权

本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids。当您在一遍又一遍输入相同代码时，可以知道有些是可以关闭的，您输入的代码正在获取WET。创建具有动态数据的可编辑Kendo UI Grids是非常简单的，Progress的技术支持工程师帮助很多客户解决了有关动态数据的问题，并且提供了有关动态数据的建议，在本文中我们将会为大家一一解答。

【Kendo UI R3 2017最新版下载】

方法

1. 创建与控制器操作一致命名的后端，例如：

2. （此步骤适用于可读网格的只读网格，请转到步骤3.）当然，只读网格只需要较少复杂的逻辑。我们创建了一个简单的函数，在初始ajax请求的成功处理程序中调用。它增加了一些常用选项，其数据源只需要读操作。

 
         // add the grid options here 
        
         function 
         populateGrid(response) { 
        
         var 
         columns = generateColumns(response); 
        
         var 
         gridOptions = { 
        
         dataSource: { 
        
         transport:{ 
        
         read:  
         function 
         (options){ 
        
         options.success(response); 
        
         } 
        
         }, 
        
         pageSize: 10, 
        
         page: 1 
        
         }, 
        
         columns: columns, 
        
         pageable:  
         true 
         , 
        
         height:300 
        
         }; 
        
         // reuse the same grid, swapping its options as needed 
        
         var 
         grid = $( 
         "#grid" 
         ).data( 
         "kendoGrid" 
         ); 
        
         if 
         (grid){ 
        
         grid.setOptions(gridOptions); 
        
         }  
         else 
         { 
        
         $( 
         "#grid" 
         ).kendoGrid(gridOptions); 
        
         } 
        
         }

由于不希望“ID”列占用很多空间，所以创建了另一个generateColumns函数，因此我们可以更改列配置，此时可以自定义所有列属性。

 
         function 
         generateColumns(response){ 
        
         var 
         columnNames = Object.keys(response[0]); 
        
         return 
         columnNames.map( 
         function 
         (name){ 
        
         var 
         isIdColumn = name.indexOf( 
         "ID" 
         ) > -1 || name.indexOf( 
         "Id" 
         ) > -1; 
        
         return 
         { 
        
         field: name, 
        
         width: isIdColumn ? 50 : 180, 
        
         title: isIdColumn ?  
         "Id" 
         : name 
        
         }; 
        
         }) 
        
         }