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

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

请找到小提琴：

增强的网格代码：

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";
            };

这一行：

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

---

在与dojo纠缠了大约一个小时之后，在dojo的作用域和如何调用能够访问数据网格和/或其数据存储的函数方面遇到了困难（对不起，在这个问题之前，我对dojo没有任何经验）…这里是您的简单解决方法，OP:

重要部分包括：

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

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

最后，refreshGrid（）将强制重新渲染整个网格。我讨厌我必须这样做：

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

---

有关完整的工作示例，请参见小提琴。

。更新col2并单击更新链接后，新的更新值将显示在警报框中。我的做法与您建议的相同，我不能在这种方法中使用ajax，因为当网格加载时，我需要显示更新图标，这是使用href链接，然后是fiddle中显示的图像来完成的。请建议是否有其他可能的方法来实现这一点@dubhovRight，因此您有一个javscript提醒您注意新值。但是，这里重要的部分是你的标签在做什么，对吗？因此，无论发生什么情况，href属性都不会被更新。这里没有数据绑定或任何花哨的事情；呈现表时，标记的href值包含col2值。这意味着，在你改变页面之前，页面上的内容就是页面上的内容。同样，作为对“我不能使用ajax”的回应：你绝对可以。您可以让ajax以与当前相同的方式执行GET请求，并且它将提供与单击更新链接相同的结果。你的两个选择（依我看，可能还有更多）是：1。使用ajax执行get请求，请求的URL与更新引用或2的URL相同。重新渲染更新以指向新值（我不建议这样做，我觉得这样做过于工程化了。如果您对选项1有问题，我很乐意为您提供帮助。很抱歉，它不起作用，问题是我们需要将焦点放在已编辑的单元格外，以便在控制器上获得更新的值。如果焦点位于具有可编辑模式的单元格中，我们会更改值和click在更新时，它将旧值传递给spring控制器，我需要单击页面中的其他位置以使焦点离开单元格，然后单击更新链接以获取更新的值。在我们将焦点离开可编辑单元格之前，上面提到的方法也不起作用。+1感谢您的努力。我们是否需要写入焦点以解决此问题这个问题。请提出建议。我提供的事件是我能找到的最细粒度的事件。我找不到网格单元的“keyUp”事件。这是我能做的最好的事情，因为你和dojo有联系（在这次冒险之后我真的不喜欢它）.Good luck.hmm，不幸的是，它不起作用。即使我尝试了所有可能的方法，但在没有将焦点从更新的单元格中完全移除的情况下，也无法获得更新的值。谢谢您的时间。@dubhovSo，只有在您单击离开单元格后，该值才会更新。我意识到这并不完全是您想要的，但考虑到J这就是它的工作原理。选项是：在ajax中执行，或者找出是否有键控处理程序，然后在每个键控上重新渲染网格…这听起来很可怕。是的。请参阅我的初始帖子，其中还说“但问题是，在增强型网格中键入值后，我需要单击网格中的某个位置或将焦点放在其他字段上，以便将新键入的值传递给spring控制器。”。我尝试了所有可能的方法，但有点运气不佳：（。但我必须继续尝试，直到找到解决方案。@dubhov

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

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

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

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