是否可以使用本地数据在剑道网格中拥有完整的 CRUD 功能 [英] Is it possible to have full CRUD functions in kendo grid with local data

问题描述

我目前正在实现一个剑道网格，我正在用本地数据填充它.那是;我从我的操作中生成了一个 JSON 字符串，并在视图页面上提供了该字符串.

最后我想知道是否可以使用本地数据实现完整的CRUD功能?

这是到目前为止编写的代码示例；

 
<div id="网格"></div><脚本>$(document).ready(function() {var myData = ${coursemodules},数据源 = 新剑道.data.DataSource({数据:我的数据，批次:真实，页面大小:30，架构:{模型: {id: "id",字段:{id:{可假，可为空:真}，名称:{ 类型:字符串"，验证:{ 必需:true }}，资格级别:{ 类型:字符串"，验证:{ 必需:真}}，描述:{ 类型:字符串"，验证:{ 必需:真}}，已发布:{ 类型:布尔型"}，gateApprove: { type: "boolean" },持续时间:{ 类型:数字"，验证:{ 分钟:1，要求:真 } }，AcademicBody:{ 类型:字符串"}}}}});$("#grid").kendoGrid({数据源:数据源，高度:350，可滚动:真实，可排序:真实，可分页:真实，工具栏:[创建"，保存"，取消"]，列: [{字段:id"，title: "身份证",宽度:'3%'},{字段:姓名"，title: "课程名称",宽度:'20%'},{字段:描述"，标题描述"，宽度:'35%'},{字段:已发布"，title: "已发表",宽度:'7%'},{字段:gateApprove"，title: "门批准",宽度:'7%'},{字段:持续时间"，title: "持续时间",宽度:'5%'},{字段:academicBody.shortName"，title: "学术团体",宽度:'10%'}],可真实});});

我已经意识到，对于数据源，您必须声明传输以实现 CRUD.但是，我需要声明数据".我尝试声明传输和数据.这似乎不起作用.

解决方案

Yes you can Here is JSFiddle 希望这个会帮助你.

//添加、更新或删除新条目时应更新此项变量数据 =[{身份证":3，"TopMenuId": 2,"Title": "收银员","链接": "www.fake123.com"},{身份证":4，"TopMenuId": 2,"Title": "存款",链接":www.fake123.com"}];$("#grid").kendoGrid({数据源: {运输: {阅读:功能(选项){options.success(数据)；},创建:功能(选项){警报(数据.长度)；},更新:功能(选项){警报(更新")；},销毁:功能(选项){警报(销毁")；警报(数据.长度)；}},批次:真实，页面大小:4，架构:{模型: {id: "身份证",字段:{ID: {可假，可为空:真},顶部菜单 ID:{可假，可为空:真},标题: {可真实，验证: {要求:真实}},关联: {可真实}}},数据: ""，总计:功能(结果){结果 = 结果.数据 ||结果;返回 result.length ||0;}}},可真实，工具栏:[创建"，保存"，取消"]，高度:250，可滚动:真实，可排序:真实，可过滤:假，可分页:真实，列: [{字段:TopMenuId"，title: "菜单 ID"},{字段:标题"，标题:标题"}，{字段:链接"，标题:链接"}，{命令:销毁"}]});

I'm currently implementing a kendo grid and i'm populating it with local data. That is; I have generated a JSON string from my action and supplying that string on the view page.

In the end i would like to know if it is possible to implement full CRUD functions with local data?

here's a sample of the code written so far;

 <div id="example" class="k-content">            
        <div id="grid"></div>            
        <script>                
            $(document).ready(function() {   
                var myData = ${coursemodules},
                dataSource = new kendo.data.DataSource({
                    data: myData,                          
                    batch: true,                            
                    pageSize: 30,                            
                    schema: {                                
                        model: { 
                            id: "id",
                            fields: {                                       
                                id: { editable: false, nullable: true},                                        
                                name: { type: "string", validation: { required: true }}, 
                                qualificationLevel: { type: "string", validation: { required: true }},
                                description: { type: "string", validation: { required: true }},                                        
                                published: { type: "boolean" },
                                gateApprove: { type: "boolean" },
                                duration: { type: "number", validation: { min: 1, required: true } },
                                academicBody: { type: "string" }
                            }                                
                        }                            
                    }                        
                });

                $("#grid").kendoGrid({                        
                    dataSource: dataSource,
                    height: 350,                        
                    scrollable: true,                        
                    sortable: true,                                                
                    pageable: true,
                    toolbar: ["create", "save", "cancel"],
                    columns: [                            
                        {                                
                            field: "id",                                
                            title: "ID",
                            width: '3%'
                        },                            
                        {                                
                            field: "name",                                
                            title: "Course Title",
                            width: '20%'
                        },                            
                        {                                
                            field: "description",
                            title:"Description",
                            width: '35%'
                        },                            
                        {                                
                            field: "published",
                            title: "Published",
                            width: '7%'
                        },
                        {                                
                            field: "gateApprove",
                            title: "Gate Approve",
                            width: '7%'
                        },
                        {                                
                            field: "duration",
                            title: "Duration",
                            width: '5%'
                        },
                        {                                
                            field: "academicBody.shortName",
                            title: "Academic Body",
                            width: '10%'
                        }
                    ],
                    editable: true
                });                
            });            
        </script>        
    </div>

I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.

解决方案

Yes you can Here is JSFiddle Hope this will help you.

// this should be updated when new entries are added, updated or deleted

var data =
    [{
        "ID": 3,
        "TopMenuId": 2,
        "Title": "Cashier",
        "Link": "www.fake123.com"},
    {
        "ID": 4,
        "TopMenuId": 2,
        "Title": "Deposit",
        "Link": "www.fake123.com"}
   ];


$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: function(options) {
                options.success(data);
            },
            create: function(options) {
                alert(data.length);
            },
            update: function(options) {
               alert("Update");
            },
            destroy: function(options) {
                alert("Destroy");
                alert(data.length);
            }
        },
        batch: true,
        pageSize: 4,
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: {
                        editable: false,
                        nullable: true
                    },
                    TopMenuId: {
                        editable: false,
                        nullable: true
                    },
                    Title: {
                        editable: true,
                        validation: {
                            required: true
                        }
                    },
                    Link: {
                        editable: true
                    }
                }
            },
            data: "",
            total: function(result) {
                result = result.data || result;
                return result.length || 0;
            }
        }
    },
    editable: true,
    toolbar: ["create", "save", "cancel"],
    height: 250,
    scrollable: true,
    sortable: true,
    filterable: false,
    pageable: true,
    columns: [
        {
        field: "TopMenuId",
        title: "Menu Id"},
    {
        field: "Title",
        title: "Title"},
        {
        field: "Link",
        title: "Link"},
    {
        command: "destroy"}
    ]
});

这篇关于是否可以使用本地数据在剑道网格中拥有完整的 CRUD 功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！