Question

我使用以下代码创建了一个网格。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div id="grid-wrapper" style="margin: 5px 5px;height: calc(100% - 10px)">
    <div class="k-content" id="grid">

    </div>
</div>
<script type="text/x-kendo-template" id="fts">
    <input type="search" id="search" class="k-input k-textbox" style="width: 150px" />
</script>   
<script>
    // 数据源
    var crudServiceBaseUrl = "data/infra/roles";
    var ds_options = {
        url: crudServiceBaseUrl,
        dataType: "json",
        contentType : 'application/json; charset=UTF-8',
        type : 'POST'
    };
    var dataSource = new kendo.data.DataSource({
        transport: {
            read:  ds_options,
            update: ds_options,
            destroy: ds_options,
            create: ds_options,
            parameterMap: function(options, operation) {
                options.action = operation;
                return kendo.stringify(options);
            }
        },
        batch: true,
        pageSize: 10,
        serverPaging : true,
        serverFiltering : true,
        serverSorting : true,
        schema: {
            total : "total",
            data : "data",
            model: {
                id: "roleID",
                fields: {
                    roleID: { editable: true, nullable: false },
                    sortNo: { validation: { required: true } },
                    roleName: { validation: { required: true } },
                    roleStatus: { },
                    allocated: {type : 'number' }
                }
            }
        },
        requestEnd : function(e){
            console.log('request end of role grid');
        },
        error : function(e){
            console.log('error happened:' + e.errors);
        }
    });

    function edit(){
        alert('edit');
    }

    var grid = $("#grid").kendoGrid({
        dataSource : dataSource,
        toolbar : [{
            text: "新增",
            imageClass: "k-add",
            className: "k-grid-add",
            iconClass: "k-icon",
            click : function(e){
                alert('add');
            }
        },{
            text: "编辑",
            imageClass: "k-edit",
            className: "a-g-e",
            iconClass: "k-icon",
        },{
            text: "删除",
            imageClass: "k-delete",
            className: "a-g-d",
            iconClass: "k-icon"
        },{
            template : $("#fts").html()
        }],
        height : '100%',
        pageable: true,
        columns: [
            { field:"roleID", title: "角色编号", visible : false},
            { field:"sortNo", title: "排序号"},
            { field:"roleName", title: "角色名称"},
            { 
                field:"roleStatus", 
                title: "角色状态",
                filterable: {
                    ui: statusFilter
                }
            },
            { field:"allocated", title: "已分配用户数"}
        ],
        editable: "popup",
        resizable: true,
        selectable : "row",
        sortable : true,
        filterable: {
            extra : false,
            messages: {
                info: "查询条件：", // sets the text on top of the filter menu
                filter: "查询", // sets the text for the "Filter" button
                clear: "清除", // sets the text for the "Clear" button

                // when filtering boolean numbers
                isTrue: "是", // sets the text for "isTrue" radio button
                isFalse: "否", // sets the text for "isFalse" radio button

                //changes the text of the "And" and "Or" of the filter menu
                and: "且",
                or: "或"
            },
            operators: {
                //filter menu for "string" type columns
                string: {
                    eq: "等于",
                    neq: "不等于",
                    startswith: "以……开始",
                    contains: "包含……",
                    endswith: "以……结束"
                },
                //filter menu for "number" type columns
                number: {
                    eq: "等于",
                    neq: "不等于",
                    gte: "大于等于",
                    gt: "大于",
                    lte: "小于等于",
                    lt: "小于"
                },
                //filter menu for "date" type columns
                date: {
                     eq: "等于",
                    neq: "不等于",
                    gte: "大于等于",
                    gt: "大于",
                    lte: "小于等于",
                    lt: "小于"
                },
                //filter menu for foreign key values
                enums: {
                    eq: "等于",
                    neq: "不等于"
                }
            },
        },
        navigatable : false,
        reorderable : true,
        columnMenu: {
            messages: {
                sortAscending: "升序排列",
                sortDescending: "降序排列",
                filter: "过滤条件",
                columns: "选择列"
            }
        }
    }).data('kendoGrid');

    function statusFilter(ele){
         ele.kendoDropDownList({
             dataTextField: "text",
             dataValueField: "value",
             dataSource: [{text : "正常", value : "1"}, {text : "停用", value : "2"}],
             optionLabel: "--Select Value--"
         });
    }

    $('.a-g-e', '#grid').bind('click', function(e){
        grid.editRow(grid.select());
    });

    $('.a-g-d', '#grid').bind('click', function(e){
        grid.removeRow(grid.select());
    });
</script>
<style scoped>
.k-dropdown-wrap {
    margin-bottom : 2px
}
</style>

每次单击add或edit按钮时，默认弹出窗口都会显示“更新”按钮;当我完成编辑并单击update按钮时，修改立即转到服务器。如何才能将更改保存到本地数据源，并仅在用户单击“保存”按钮时将更改发送到服务器？

在Kendoui网站的批量编辑示例中，我发现如果更改包括创建，更新和删除，则会向服务器发送多个HTTP请求。由于我只使用一个Java servlet来处理所有CRUD操作，如何在进行批量更新时使Kendo网格始终只发送一个HTTP请求？

Answer 1

这是剑道的工作方式。当你使用：

grid.editRow(grid.select());

它会自动使用您的更新方法如果要控制所有进程，则应使用ajax编写自己的代码

Kendo UI网格批量更新

1 个答案: