SlickGrid에서 jQuery AJAX로 만든 데이터를 소비하는 방법은 무엇입니까?

Question

일종의이 일에 매달려서 어떻게 해야할지 모르겠다.

데이터에 대해 하드 코드 된 배열을 사용하면 예상대로 작동하지만 엔드 포인트에 대한 호출을 실행해도 jiddle 호출이 피들러를 통해 생성되는 것을 볼 수는 있지만 데이터는 그리드에 바인딩되지 않습니다.

, 감사 방법 $.getJSON() 작품이 아니다 스티븐

<script type="text/javascript"> 
    var grid; 
    var data = []; 

    var columns = [ 
        { id: "#", name: "", width: 40, behavior: "selectAndMove", selectable: false, resizable: false, cssClass: "cell-reorder dnd" }, 
        { id: "id", name: "id", field: "id", sortable: true }, 
        { id: "FoodGroupId", name: "FoodGroupId", field: "FoodGroupId", editor: TextCellEditor, sortable: true }, 
        { id: "Description", name: "Description", field: "Description", editor: TextCellEditor, sortable: true }, 
        { id: "FdGrp_Cd", name: "FdGrp_Cd", field: "FdGrp_Cd", editor: TextCellEditor, sortable: true }, 
        { id: "Long_Desc", name: "Long_Desc", field: "Long_Desc", editor: TextCellEditor, sortable: true }, 
        { id: "Shrt_Desc", name: "Shrt_Desc", field: "Shrt_Desc", editor: TextCellEditor, sortable: true }, 
        { id: "ComName", name: "ComName", field: "ComName", editor: TextCellEditor, sortable: true }, 
        { id: "ManufacName", name: "ManufacName", field: "ManufacName", editor: TextCellEditor, sortable: true }, 
        { id: "Survey", name: "Survey", field: "Survey", editor: TextCellEditor, sortable: true }, 
        { id: "Ref_Desc", name: "Ref_Desc", field: "Ref_Desc", editor: TextCellEditor, sortable: true }, 
        { id: "Refuse", name: "Refuse", field: "Refuse", editor: TextCellEditor, sortable: true }, 
        { id: "SciName", name: "SciName", field: "SciName", editor: TextCellEditor, sortable: true }, 
        { id: "N_Factor", name: "N_Factor", field: "N_Factor", editor: TextCellEditor, sortable: true }, 
        { id: "Pro_Factor", name: "Pro_Factor", field: "Pro_Factor", editor: TextCellEditor, sortable: true }, 
        { id: "Fat_Factor", name: "Fat_Factor", field: "Fat_Factor", editor: TextCellEditor, sortable: true } 
       ]; 

    var options = { 
     editable: true, 
     enableAddRow: true, 
     enableRowReordering: true, 
     enableCellNavigation: true, 
     forceFitColumns: true, 
     autoEdit: false 
    }; 

    function requiredFieldValidator(value) { 
     if (value == null || value == undefined || !value.length) 
      return { valid: false, msg: "This is a required field" }; 
     else 
      return { valid: true, msg: null }; 
    } 

    $(function() { 

     data = $.getJSON("http://localhost/com.patten.root/RDA/GetDataAJAX"); 

     grid = new Slick.Grid("#myGrid", data, columns, options); 

     grid.setSelectionModel(new Slick.RowSelectionModel()); 

     var moveRowsPlugin = new Slick.RowMoveManager(); 

     moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) { 
      for (var i = 0; i < data.rows.length; i++) { 
       // no point in moving before or after itself 
       if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) { 
        e.stopPropagation(); 
        return false; 
       } 
      } 

      return true; 
     }); 

     moveRowsPlugin.onMoveRows.subscribe(function (e, args) { 
      var extractedRows = [], left, right; 
      var rows = args.rows; 
      var insertBefore = args.insertBefore; 
      left = data.slice(0, insertBefore); 
      right = data.slice(insertBefore, data.length); 

      for (var i = 0; i < rows.length; i++) { 
       extractedRows.push(data[rows[i]]); 
      } 

      rows.sort().reverse(); 

      for (var i = 0; i < rows.length; i++) { 
       var row = rows[i]; 
       if (row < insertBefore) 
        left.splice(row, 1); 
       else 
        right.splice(row - insertBefore, 1); 
      } 

      data = left.concat(extractedRows.concat(right)); 

      var selectedRows = []; 
      for (var i = 0; i < rows.length; i++) 
       selectedRows.push(left.length + i); 

      grid.resetActiveCell(); 
      grid.setData(data); 
      grid.setSelectedRows(selectedRows); 
      grid.render(); 
     }); 

     grid.registerPlugin(moveRowsPlugin); 

     grid.onDragInit.subscribe(function (e, dd) { 
      // prevent the grid from cancelling drag'n'drop by default 
      e.stopImmediatePropagation(); 
     }); 

     grid.onDragStart.subscribe(function (e, dd) { 
      var cell = grid.getCellFromEvent(e); 
      if (!cell) 
       return; 

      dd.row = cell.row; 
      if (!data[dd.row]) 
       return; 

      if (Slick.GlobalEditorLock.isActive()) 
       return; 

      e.stopImmediatePropagation(); 
      dd.mode = "recycle"; 

      var selectedRows = grid.getSelectedRows(); 

      if (!selectedRows.length || $.inArray(dd.row, selectedRows) == -1) { 
       selectedRows = [dd.row]; 
       grid.setSelectedRows(selectedRows); 
      } 

      dd.rows = selectedRows; 
      dd.count = selectedRows.length; 

      var proxy = $("<span></span>") 
        .css({ 
         position: "absolute", 
         display: "inline-block", 
         padding: "4px 10px", 
         background: "#e0e0e0", 
         border: "1px solid gray", 
         "z-index": 99999, 
         "-moz-border-radius": "8px", 
         "-moz-box-shadow": "2px 2px 6px silver" 
        }) 
        .text("Drag to Recycle Bin to delete " + dd.count + " selected row(s)") 
        .appendTo("body"); 

      dd.helper = proxy; 

      $(dd.available).css("background", "pink"); 

      return proxy; 
     }); 

     grid.onDrag.subscribe(function (e, dd) { 
      if (dd.mode != "recycle") { 
       return; 
      } 
      e.stopImmediatePropagation(); 
      dd.helper.css({ top: e.pageY + 5, left: e.pageX + 5 }); 
     }); 

     grid.onDragEnd.subscribe(function (e, dd) { 
      if (dd.mode != "recycle") { 
       return; 
      } 
      e.stopImmediatePropagation(); 
      dd.helper.remove(); 
      $(dd.available).css("background", "beige"); 
     }); 


     $("#dropzone") 
       .bind("dropstart", function (e, dd) { 
        $(this).css("background", "yellow"); 
       }) 
       .bind("dropend", function (e, dd) { 
        $(dd.available).css("background", "pink"); 
       }) 
       .bind("drop", function (e, dd) { 
        var rowsToDelete = dd.rows.sort().reverse(); 
        for (var i = 0; i < rowsToDelete.length; i++) { 
         data.splice(rowsToDelete[i], 1); 
        } 
        grid.invalidate(); 
        grid.setSelectedRows([]); 
       }); 


     grid.onAddNewRow.subscribe(function (e, args) { 
      var item = { name: "New task", complete: false }; 
      $.extend(item, args.item); 
      data.push(item); 
      grid.invalidateRows([data.length - 1]); 
      grid.updateRowCount(); 
      grid.render(); 
     }); 
    }) 
</script> 

Answer 1

. 호출이 비동기입니다. 이는 요청이 시작되고 코드 실행이 다음 행으로 즉시 이어짐을 의미합니다. 그래서 당신은이 라인에 도착하면 :

이

grid = new Slick.Grid("#myGrid", data, columns, options); 

가 data 변수의 값이 설정되어 있지 않습니다.

해결하려면 $.getJSON()은 응답이 반환 된 후 콜백 함수를 제공합니다. 그리드를 초기화해야합니다. 이 같은 것을 :

$.getJSON("http://localhost/com.patten.root/RDA/GetDataAJAX", function(data) { 
    // data contains the response from the ajax call at this point 
    grid = new Slick.Grid("#myGrid", data, columns, options); 
}); 

자세한 내용은 here을 참조하십시오.