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>