网格中的更新值不会显示在javaspring控制器上

我有一个增强的网格，我想编辑网格内容，一旦单击更新链接，我必须将新键入的值传递给java spring控制器，在那里我有逻辑将更新的值保存在数据库中。但问题是，在我在增强型网格中键入值后，我需要单击网格中的某个位置，或者将注意力集中在其他字段上，以便将新键入的值传递给spring控制器。如果我键入新值，并且单元格处于编辑模式，并直接单击网格第4列中的UPDATE链接，则旧值将传递给弹簧控制器。请建议要进行哪些更改，以便在鼠标离开单元格焦点后，新键入的值应保存在存储中，并且当单击网格第4列上的UPDATE链接时，该值应发送到spring控制器。

请找到小提琴：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

    }

此行：

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

正在返回一个锚，href为"/contextPath/updateInfo.html？col2=aa"。这将呈现它，这就是it；该URL永远不会改变。然后，当您单击UPDATE时，它会发送页面呈现时的内容，而不是表中的当前值

如果你想发送当前值，你应该让你的href是"#"，并有一个onclick="updateValue（1）"，如下所示：

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

其中1是行号。

然后，在更新值函数中，您将发送一个ajax请求来更新值。既然您使用的是dojo，请检查一下：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
}

在与dojo纠缠了大约一个小时之后，在dojo的作用域以及如何调用可以访问数据网格和/或其数据存储的函数方面遇到了困难（对不起…在这个问题之前，我对dojo没有任何经验）。。。这是你的简单出路，OP：

http://jsfiddle.net/hm8gpz6o/

重要部分：

当数据存储更新时，EnhancedGrid不是重新呈现格式化程序生成的单元格。这似乎是dojo的EnhancedGrid的一个问题。

我添加了以下内容（更新单元格时，onApplyCellEdit将触发）：

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

最后，refreshGrid（）将强制重新渲染整个网格。我讨厌我不得不这样做：
```
function refreshGrid(){
    grid.startup();   
}    
```

完整的工作示例请参阅小提琴。

相关内容

最新更新

热门标签：