SlickGridに新しい行を追加する

Question

私はデータビューを使って滑りグリッドを持っています。私が知ることから、グリッドの新しい行イベントの追加は、最初の新しい行フィールドのエディタが完了するまで呼び出されません。私が編集していたフィールドは、オートコンプリート付きの入力ボックスを使用し、選択した項目「値」をグリッドソースデータに保存するカスタムエディタです。問題は、グリッド追加の新しい行イベントが発生するまで、新しい「アイテム」ソースが作成されないことです。私はこれを回避する手段があることを知っており、これを解決する最良の方法が何であるかを知りたいだけです。

ありがとうございました。

//Add new row event 

grid.onAddNewRow.subscribe(function (e, args) { 
         var item = args.item; 
         addnewid = addnewid - 1; 
         item.inventorytransferdetailid = addnewid;       
         $.extend(item, args.item); 
         dataView.addItem(item); 
        }); 

// Custom editor 
function Suggest2(args) { 
    var $input; 
    var defaultValue; 
    var scope = this; 
    this.init = function() { 
     $input = $("<INPUT type=text class='editor-text' />") 
     $input.width = args.column.width; 
     $input.appendTo(args.container); 
     $input.focus(); 
     $input.bind("keydown.nav", function (e) { 
      if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) { 
       e.stopImmediatePropagation(); 
      } 
      else if ($input.val().length > 0) { 
       $.ajax({ 
        type: "GET", 
        url: "http://localhost:11111/GetProducts/" + $input.val(), 
        dataType: "json", 
        data: "{}", 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         $input.autocomplete({ 
          source: data, 
          select: function (event, ui) { 
           var v = ui.item.value; 
           var l = ui.item.label; 
           //Set "display" field with label 
           args.item[args.column.field] = l; 
           this.value = l; 
           //Set "hidden" id field with value 
           args.item["productid"] = v; 
           return false; 
          } 
         }); 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert(textStatus); 
        } 
       }); 
      } 
     }) 
    }; 
    this.destroy = function() { 
     $input.remove(); 
    }; 

    this.focus = function() { 
     $input.focus(); 
    }; 



    this.getValue = function() { 
     return $input.val(); 
    }; 



    this.setValue = function (val) { 
     $input.val(val); 
    }; 

    this.loadValue = function (item) { 
     defaultValue = item[args.column.field] || ""; 
     $input.val(defaultValue); 
     $input[0].defaultValue = defaultValue; 
     $input.select(); 
    }; 



    this.serializeValue = function() { 
     return $input.val(); 
    }; 


    this.applyValue = function (item, state) { 
     //item[args.column.field] = state; 
    }; 



    this.isValueChanged = function() { 
     return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
    }; 



    this.validate = function() { 
     if (args.column.validator) { 
      var validationResults = args.column.validator($input.val()); 
      if (!validationResults.valid) { 
       return validationResults; 
      } 
     } 



     return { 
      valid: true, 
      msg: null 
     }; 
    }; 
    this.init(); 
} 

Answer 1

以下のコードを試すことができます。

function add_new_row(){ 
item = { 
     "id": (Math.round(Math.random()*-10000)) 
    }; 
data_view.insertItem(0, item); 
} 

次に、ボタンでバインドします。

<button onclick="add_new_row()">Add Row</button>