Kendo UI Grid中的动态数据（三）

最新推荐文章于 2022-04-20 10:46:51 发布

界面开发小八哥

最新推荐文章于 2022-04-20 10:46:51 发布

阅读量800

点赞数

Kendo UI首推团队升级培训套包，享超低折扣！查看详情>>>

【Kendo UI R3 2017最新版下载】

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

5. 下一行是网格列。使用此功能自定义格式、宽度或其他列设置。

 
        function 
         generateColumns(sampleDataItem) { 
       
        var 
         columnNames = Object.keys(sampleDataItem); 
       
        return 
         columnNames.map( 
        function 
        (name) { 
       
        var 
         isIdField = name.indexOf( 
        "ID" 
        ) !== -1; 
       
        return 
         { 
       
        field: name, 
       
        width: (isIdField ? 40 : 200), 
       
        title: (isIdField ?  
        "Id" 
         : name) 
       
        }; 
       
        }); 
       
        }

6. 这是最后一步。模式、数据源和列是已知的，我们可以初始化动态Kendo UI Grid。在我们的函数中，传递了初始化网格元素的ID，但是可以扩展createGrid函数，并将新生成的网格附加在其他位置。

 
        function 
         createGrid(gridName, baseUrl) { 
       
        $.ajax({ 
       
        url: baseUrl, 
       
        success:  
        function 
        (response) { 
       
        var 
         sampleDataItem = response[0]; 
       
        var 
         model = generateModel(sampleDataItem); 
       
        var 
         dataSource = generateDataSource(baseUrl, model, editable); 
       
        var 
         columns = generateColumns(sampleDataItem); 
       
        var 
         gridOptions = { 
       
        toolbar: [ 
        "create" 
        ,  
        "save" 
        ,  
        "cancel" 
        ], 
       
        dataSource: dataSource, 
       
        columns: columns, 
       
        pageable:  
        true 
        , 
       
        editable: editable, 
       
        height: 450 
       
        }; 
       
        columns.push({ command:  
        "destroy" 
        , title:  
        " " 
        , width: 170 }); 
       
        $( 
        "#" 
         + gridName).kendoGrid(gridOptions); 
       
        } 
       
        }); 
       
        }

具有单行代码的动态可编辑网格的结果初始化：

1

2

3

4

 
        < 
        div 
         id 
        = 
        "products" 
        ></ 
        div 
        > 
       
 
        < 
        script 
        > 
       
 
        createGrid("products", "https://demos.telerik.com/kendo-ui/service/products/"); 
       
 
        </ 
        script 
        > 
       