Gridstack.js JSON에서 위치 가져 오기

Question

지금은 Gridstack.js으로 작업하고 있지만 나에게 도움이되지만 (항상 있지만 그렇습니다) 누군가 JSON 배열에 정의 된대로 grid-stack-item을 배치하는 방법을 알고 있습니다. ?

예 HTML

<div class="grid-stack"> 
    <div id="1" class="grid-stack-item"> 
      <div class="grid-stack-item-content"></div> 
    </div> 
    <div id="2" class="grid-stack-item"> 
      <div class="grid-stack-item-content"></div> 
    </div> 
    <div id="3" class="grid-stack-item"> 
      <div class="grid-stack-item-content"></div> 
    </div> 
</div> 

내 JSON은

[{"widgetId":"1","x":0,"y":2,"width":3,"height":4},{"widgetId":"2","x":1,"y":6,"width":3,"height":1},{"widgetId":"3","x":0,"y":7,"width":3,"height":4}] 

나는 설명서에서 그것에 대해 아무것도 찾을 수 없습니다. 그리고 나는 가능하지 않다.

Answer 1

나는 또한 이것을 가능케하는 방법을 알아내는 두려운 두통이있었습니다. JSON 데이터를 반환하고 te 위치 배열을 빌드하는 jQuery 게시물에서 그리드 데이터를 가져옵니다. 귀하의 경우에는이 될 수있다 :

var seri_data = []; 
    this.serialized_data = seri_data; 

    jQuery.post('yourfile.php', function(data) { 

     jQuery.each(data, function(key, value) { 

      seri_data.push({ 
       'id'  : this.widgetId, 
       'x'  : this.x, 
       'y'  : this.y, 
       'width' : this.width, 
       'height' : this.height, 
      }); 

     }); 

    });  

는 here을 찾을 수있는 gridstack 직렬화 데모 예제의 기본이다, 아래의 코드를 사용합니다. 해당 페이지의 소스를 열고로드 기능 부분을 살펴보십시오 ... 아래 제공된 코드로 코드를 변경하십시오.

_.each(items, function(node) { this.grid.add_widget(jQuery('<div data-gs-id="widget_' + node.id + '" class="grid-stack-item"><div class="grid-stack-item-content"></div></div>'), node.x, node.y, node.width, node.height); }, this);