开发者

Validation on onCellChange with Slickgrid

开发者 https://www.devze.com 2023-03-10 23:23 出处:网络
I have just started to use slickgrid (++ to the author btw) - running into a few small issues - I want to dynamically update some fields using the in-context editing.Once editing is done I wish to sen

I have just started to use slickgrid (++ to the author btw) - running into a few small issues - I want to dynamically update some fields using the in-context editing. Once editing is done I wish to send this to the server which also should validate what was sent. If there is an error I would like to handle the error in a similar way to how the validatr event works? e.g. highlight the cell and not let the user to move away until it is valid, however I do not see how I can do so? any advice on this would be mu开发者_如何学Pythonch appreciated!

Code so far...

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();
});

Many thanks


Ajax requests are, by default, asynchronous, which means that

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

will probably be executed before the success callback. A couple different solutions:

  • Make the ajax request synchronous (not recommended):

    $.ajax({ ... async: false, ...})
    
  • Put all of the code that follows the ajax request in the success or complete callback. Something like this (not tested):

    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's deferred object can also provide a clean way to write this.


I would recommend one of two options:

  • Submit your change to the server for validation. Display a spinner to visually indicate that a background process is running and temporarily disable editing and cell navigation while the validation is going on. When you've received the response, re-enable the editing and navigation or switch the cell back into edit mode and display a validation error.

  • Same as above, but keep the navigation going, just disable the editing. Add an onBeforeCellEdit event handler to display a gentle message to the user informing them that a cell cannot be edited because the server hasn't responded yet and cancel the edit.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号