jquery 표기법을 사용하여 매끄러운 격자를 참조하는 방법

나는 웹 페이지에 격자를 표시하기 위해 slick grid라는 자바 스크립트 라이브러리로 작업하고 있습니다. 그리드 정보를 ajax를 통해 서버에 보내야합니다. 내 문제는 jquery 표기법을 사용하여 표에 액세스해야합니다. 어떤 도움을 크게 감상 할 수jquery 표기법을 사용하여 매끄러운 격자를 참조하는 방법

var grid; 

$(function() { 
    for (var i = 0; i < 30; i++) { 
     data[i] = { 
      pbc_id: "00" + i, 
      task: "Task " + i, 
      due_date: "02/02/2017" 
     }; 
    } 

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

    grid.setSelectionModel(new Slick.CellSelectionModel()); 
    grid.registerPlugin(new Slick.AutoTooltips()); 

    // set keyboard focus on the grid 
    grid.getCanvasNode().focus(); 

    var copyManager = new Slick.CellCopyManager(); 
    grid.registerPlugin(copyManager); 

    copyManager.onPasteCells.subscribe(function (e, args) { 
     if (args.from.length !== 1 || args.to.length !== 1) { 
      throw "This implementation only supports single range copy and paste operations"; 
     } 

     var from = args.from[0]; 
     var to = args.to[0]; 
     var val; 
     for (var i = 0; i <= from.toRow - from.fromRow; i++) { 
      for (var j = 0; j <= from.toCell - from.fromCell; j++) { 
       if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) { 
        val = data[from.fromRow + i][columns[from.fromCell + j].field]; 
        data[to.fromRow + i][columns[to.fromCell + j].field] = val; 
        grid.invalidateRow(to.fromRow + i); 
       } 
      } 
     } 
     grid.render(); 
    }); 

    grid.onAddNewRow.subscribe(function (e, args) { 
     var item = args.item; 
     var column = args.column; 
     grid.invalidateRow(data.length); 
     data.push(item); 
     grid.updateRowCount(); 
     grid.render(); 
    }); 
}) 

var DocumentViewModel = function() { 

    var self = this; 

    self.sendGridData = function() { 
     var data = $("myGrid"); 

     //TODO: access the grid data and convert the data to a json string 

     $.ajax({ 
      async: true, 
      type: "POST", 
      dataType: "json", 
      url: '/MyService/SubmitRequest', 
      data: , 
      success: function (response) { 
       alert("success"); 
      }, 
      error: function (xhr, textStatus, exceptionThrown) { 
       alert("error"); 
      } 
     }); 
    }; 
};

여기

<div id="myGrid" style="width:100%;height:300px;"></div>

내가 사용 자바 스크립트가 : 여기

는 사업부 그리드입니다.

편집 : trying to access the grid variable where my todo is

출처

2017-03-09 Samuel Branham

VAR Data_Grid = grid.getData는(). <------ 그 라인 그리드의 내용을 검색 ......... var myJsonString = JSON.stringify (Data_Grid); <----- json – Xique

으로 변환하면 TODO가있는 그리드 변수에 액세스 할 수 없습니다. –

나는 그것을 사용하고있다. O_o – Xique

내가 위의 문제를 재현 할 수 있었다. 예제를 그대로 실행하기 위해 코드를 추가해야했습니다. 주요 문제는 그리드 변수가 전역 주소 공간에 선언되었지만 DocumentViewModel의 내용이이 함수에 비공개이거나 다른 코드가 선언되기 전에 DocumentViewModel이 실행 중이기 때문에 DocumentViewModel의 내용에 액세스 할 수 없다는 것입니다 (more 가능성) 그러나 당신은 당신이 DocumentViewModel을 트리거하는 방법이나 방법을 보여주지 않았으므로 확실히 말할 수는 없습니다. 당신 플러스 여분을 포함하는 아래

그러나 '$ (함수() {'마지막 변수가 발견 된 그리드가 액세스 할 수있었습니다 내부 DocumentViewModel를 이동하여

내가 붙여 넣을 수 있습니다 내 코드는 내가 그것을 얻을에 추가 실행할

<html> 
<head> 
<h1>myGrid SO Question Test</h1> 

<script src="http://code.jquery.com/jquery-1.7.min.js"></script> 
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script> 
<style src="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css"></style> 
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script> 
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script> 

<script src="http://mleibman.github.com/SlickGrid/slick.editors.js"></script> 
<script src="http://mleibman.github.com/SlickGrid/slick.formatters.js"></script> 
<script src="http://mleibman.github.com/SlickGrid/slick.dataview.js"></script> 
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellselectionmodel.js"></script> 

<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangeselector.js"></script> 
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangedecorator.js"></script> 
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script> 
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.autotooltips.js"></script> 
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellcopymanager.js"></script> 

<script src="my.js"></script> 
</head> 
<body> 
<div id="myGrid" style="width:100%;height:300px;"></div> 
</body> 
</html>

$(function() { 

    var grid; 

    // Addition Start 
    var columns = [{ 
    id: "column", 
    name: "", 
    field: "column", 
    //selectable: false, 
    focusable: false 
    }, 
       { 
    id: "data", 
    name: "Data", 
    field: "data" 
    }]; 

    var options = { 
    enableCellNavigation: true, 
    enableColumnReorder: false  
    }; 
    // Addition End 


    var data = [];    // Addition 
    for (var i = 0; i < 30; i++) { 
     data[i] = { 
      pbc_id: "00" + i, 
      task: "Task " + i, 
      due_date: "02/02/2017" 
     }; 
    } 

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

    grid.setSelectionModel(new Slick.CellSelectionModel()); 
    grid.registerPlugin(new Slick.AutoTooltips()); 

    // set keyboard focus on the grid 
    grid.getCanvasNode().focus(); 

    var copyManager = new Slick.CellCopyManager(); 
    grid.registerPlugin(copyManager); 

    copyManager.onPasteCells.subscribe(function (e, args) { 
     if (args.from.length !== 1 || args.to.length !== 1) { 
      throw "This implementation only supports single range copy and paste operations"; 
     } 

     var from = args.from[0]; 
     var to = args.to[0]; 
     var val; 
     for (var i = 0; i <= from.toRow - from.fromRow; i++) { 
      for (var j = 0; j <= from.toCell - from.fromCell; j++) { 
       if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) { 
        val = data[from.fromRow + i][columns[from.fromCell + j].field]; 
        data[to.fromRow + i][columns[to.fromCell + j].field] = val; 
        grid.invalidateRow(to.fromRow + i); 
       } 
      } 
     } 
     grid.render(); 
    }); 

    grid.onAddNewRow.subscribe(function (e, args) { 
     var item = args.item; 
     var column = args.column; 
     grid.invalidateRow(data.length); 
     data.push(item); 
     grid.updateRowCount(); 
     grid.render(); 
    }); 

    // Move DocumentViewModel inside "$(function()" 
    var DocumentViewModel = function() { 

    var self = this; 

    self.sendGridData = function() { 
     var data = $("myGrid"); 

     //TODO: access the grid data and convert the data to a json string 

     var Data_Grid = grid.getData(); 
     var myJsonString = JSON.stringify(Data_Grid); 

     // $.ajax({ 
      // async: true, 
      // type: "POST", 
      // dataType: "json", 
      // url: '/MyService/SubmitRequest', 
      // data: , 
      // success: function (response) { 
       // alert("success"); 
      // }, 
      // error: function (xhr, textStatus, exceptionThrown) { 
       // alert("error"); 
      // } 
     // }); 
    }; 

    self.sendGridData(); // Addition Trigger our local function 
}; 

// Addition : Trigger our function to prove we can access the grid's data 
DocumentViewModel(); 

})

출처

2017-03-22 13:03:30

jquery 표기법을 사용하여 매끄러운 격자를 참조하는 방법

답변

관련 문제