обновленное значение в сетке не показано на контроллере java весны

Question

У меня есть улучшенная сетка, я хочу отредактировать содержимое сетки и однажды щелкнув по ссылке «Обновление», мне нужно передать новые типизированные значения в контроллер пружины java, где у меня есть логика для сохранения обновленных значений в базе данных. Но проблема заключается в том, что после того, как я наберу значение в расширенной сетке, мне нужно щелкнуть где-нибудь в сетке или сделать фокус на другом поле, чтобы новое типизированное значение передавалось контроллеру пружины. Если я набираю новое значение, и ячейка находится в режиме редактирования и непосредственно нажимает на ссылку UPDATE, присутствующую в столбце4 сетки, старое значение передается контроллеру пружины. Пожалуйста, представьте, какие изменения необходимо внести, чтобы, когда мышь вышла из фокуса ячейки, новое типизированное значение должно сохранить в памяти, и это значение должно быть отправлено контроллеру весны, когда на ссылку UPDATE щелкнуть по столбцу4 сетки.

Пожалуйста найти скрипку: http://jsfiddle.net/740L0y43/7/

расширенный код сетки:

require(['dojo/_base/lang', 'dojox/grid/EnhancedGrid', 'dojo/data/ItemFileWriteStore', 'dijit/form/Button', 'dojo/dom', 'dojo/aspect', 'dojo/domReady!'], 

function (lang, EnhancedGrid, ItemFileWriteStore, Button, dom, aspect) { 
    /*set up data store*/ 
    var data = { 
     identifier: "id", 
     items: [{ 
      id : 1, 
      col2 : "aa", 
      col3 : "bb", 
      col4 : "cC" 
     }] 
    }; 

    var store = new ItemFileWriteStore({ 
     data: data 
    }); 

    /*set up layout*/ 
    var layout = [ 
     [{ 
      'name': 'Column 1',singleClickEdit:'true', editable:'true', 
       'field': 'id', 
       'width': '100px' 
     }, { 
      'name': 'Column 2',singleClickEdit:'true', editable:'true', 
       'field': 'col2', 
       'width': '100px' 
     }, { 
      'name': 'Column 3',singleClickEdit:'true', editable:'true', 
       'field': 'col3', 
       'width': '200px' 
     }, { 
      'name': 'Column 4',formatter: updateDetails, 
       'field': 'col4', 
       'width': '150px' 
     }] 
    ]; 

    /*create a new grid*/ 
    var grid = new EnhancedGrid({ 
     id: 'grid', 
     store: store, 
     structure: layout, 
     sortInfo: -1, 

    }); 


    /*append the new grid to the div*/ 
    grid.placeAt("gridDiv"); 

    /*Call startup() to render the grid*/ 
    grid.startup(); 

    aspect.after(grid, 'renderRow', grid.sort); 

    var id = 2; 

    var button = new Button({ 
     onClick: function() { 
      console.log(arguments); 
      store.newItem({ 
       id: id, 
       col2: "col2-" + id, 
       col3: "col3-" + id, 
       col4: "col4-" + id 
      }); 
      id++; 
     } 
    }, "addRow"); 
}); 

    var updateDetails = function(value, rowIndex) { 
     var col2 = this.grid.getItem(rowIndex).col2; 
     alert("col2 updated value : " + col2); 
    return "<a href=\"<%=request.getContextPath()%>/updateInfo.htm?col2="+col2 +"\">" + "UPDATE"; 
      }; 

пружинный код контроллера:

@RequestMapping(value = "/updateInfo", method = RequestMethod.GET) 
    public ModelAndView updateInfo(HttpServletRequest request, 
     HttpServletResponse response, @ModelAttribute MyDTO myDto, 
      @RequestParam("col2") String col2, @RequestParam("col2") String col2){ 

    System.out.println("col2 value: " + col2); 
    System.out.println("col3 value: " + col3); 

    //when i type some value in COlumn2/Column3 of enhanced grid and column is still in edit mode then on click of UPDATE , new value is not passed to spring controller, its passing the old value. 
... 
    ... 
    //logic to save in DB 


    } 

Answer 1

Эта линия:

 return "<a href=\"<%=request.getContextPath()%>/updateInfo.htm?col2="+col2 +"\">" + "UPDATE"; 

возвращается якорь с href как «/contextPath/updateInfo.html?col2=aa». Это делает это, и это это; этот URL никогда не меняется. Затем, когда вы нажимаете UPDATE, он отправляет то, что было там, когда страница была визуализирована, а не то, что текущее значение в вашей таблице.

Если вы хотите, чтобы текущее значение будет отправлено, вы должны иметь ваш HREF быть «#» и имеют OnClick = «updateValue (1)», как это:

<a href="#" onclick="updateValue(1)">UPDATE</a> 

где 1 является строка номер.

Затем в вашей функции значения обновления вы должны отправить запрос ajax для обновления значения. Так как вы используете додзё, проверить это: http://dojotoolkit.org/documentation/tutorials/1.8/ajax/

Вот что ваша функция может выглядеть следующим образом (некоторые псевдо-код, некоторые комментарии для описания поведения):

function updateValue(rowNum){ 
    //var row = data.items.getRow(rowNum); or something like this 
    //Call ajax here and send the new row values 
} 

Answer 2

После баловаться с додзе в течение приблизительно часа , и борется с областью додзе и как вызвать функцию, которая имеет доступ к сетке данных и/или ее хранилище данных (извините .. У меня было 0 опыта с додзе до этого вопроса) ... вот ваш простой выход, OP:

http://jsfiddle.net/hm8gpz6o/

Важных деталей:

1. EnhancedGrid был НЕ повторно рендеринг форматтер генерироваться ячейками, когда хранилище данных было обновлено. Это похоже на проблему с расширенным интерфейсом Dojo.

2. Я добавил следующее (onApplyCellEdit будет срабатывать, когда обновляется клетка):

   /*create a new grid*/ 
   var grid = new EnhancedGrid({ 
       id: 'grid', 
       store: store, 
       structure: layout, 
       sortInfo: -1, 
       onApplyCellEdit: function(inValue, inRowIndex, inFieldIndex){ 
        refreshGrid(); 
       } 
   }); 
   

3. И, наконец, refreshGrid() заставит повторно рендер всей сетки.Я ненавижу то, что я должен сделать это:

   function refreshGrid(){ 
       grid.startup(); 
   }  
   

Пожалуйста, смотрите скрипку за полный рабочий пример.