使用 Slickgrid 验证 onCellChange答案

【问题标题】：Validation on onCellChange with Slickgrid使用 Slickgrid 验证 onCellChange
【发布时间】：2011-06-06 14:12:38
【问题描述】：

我刚刚开始使用 slickgrid（顺便说一句，作者是 ++）——遇到了一些小问题——我想使用上下文编辑动态更新一些字段。编辑完成后，我希望将其发送到服务器，该服务器也应该验证发送的内容。如果出现错误，我想以与验证事件的工作方式类似的方式处理错误？例如突出显示单元格，并且在它有效之前不要让用户离开，但是我不知道该怎么做？对此的任何建议将不胜感激！

到目前为止的代码......

grid.onCellChange.subscribe(function(e, args) {
    var item = args.item;
    var column = args.cell;       
    var row = args.row;
    var value = data[args.row][grid.getColumns()[args.cell].field];
    var id = args.item.id;
    var field = grid.getColumns()[args.cell].field;
    var dataString = "id="+id+"&field="+field+"&value="+value;
    var status = false;
    $.ajax({
        type: "POST",
        url: "/en/<?php echo $this->controller; ?>/updateattribute/&callback=?'",
        data: dataString,
        dataType: "json",
        success: function(a) {  
            console.log(data);              
            if(a.status == true) {                  
                status = true;
            } else {
                status = false;             
            }       
            return false; 
        }
    });    
    if(!status) {
        return false;
    }             
    grid.invalidateRow(data.length);
    data.push(item);
    grid.updateRowCount();
    grid.render();
});

非常感谢

【问题讨论】：

标签： slickgrid

【解决方案1】：

默认情况下，Ajax 请求是异步的，这意味着

if(!status) {
    return false;
}             
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();

可能会在success 回调之前执行。几种不同的解决方案：

使 ajax 请求同步（不推荐）：
```
$.ajax({ ... async: false, ...})
```

将 ajax 请求之后的所有代码放在 success 或 complete 回调中。像这样的东西（未测试）：

grid.onCellChange.subscribe(function(e, args) {
    // snip...

    $.ajax({
        type: "POST",
        url: "/en/<?php echo $this->controller; ?>/updateattribute/&callback=?'",
        data: dataString,
        dataType: "json",
        success: function(a) {  
            console.log(data);              
            if(a.status) {                  
                grid.invalidateRow(data.length);
                data.push(item);
                grid.updateRowCount();
                grid.render();
            }
        }
    });
});

jQuery 的deferred object 也可以提供一种简洁的方式来编写这个。

【讨论】：

感谢您的回复，感谢有关异步的观点，已按照您提到的方式进行了修改。理想情况下，当状态为 false 时，它会以与验证器工作类似的方式响应（例如，闪烁有问题的单元格，并且在您输入有效输入之前不会让您关闭它）这有意义吗？
是的，这确实有道理。不过，我对 SlickGrid 并不十分熟悉，也不知道如何实现它。

【解决方案2】：

我会推荐以下两种选择之一：

将您的更改提交到服务器进行验证。显示一个微调器以直观地指示后台进程正在运行，并在验证进行时暂时禁用编辑和单元格导航。收到响应后，重新启用编辑和导航，或将单元格切换回编辑模式并显示验证错误。
同上，但保持导航继续，只是禁用编辑。添加一个 onBeforeCellEdit 事件处理程序，以向用户显示一条温和的消息，通知他们无法编辑单元格，因为服务器尚未响应并取消编辑。

【讨论】：