Обновление пакета сетки Kendo UI

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 для обработки всех операций CRUD, как я могу заставить сетку Kendo всегда отправлять только один HTTP-запрос при выполнении пакетных обновлений?

Answer 1

Это способ, которым работает кендо. при использовании:

grid.editRow(grid.select()); 

он автоматически использует свой метод обновления вы должны написать свой собственный код, с помощью AJAX, если вы хотите контролировать весь процесс