jquery表記で滑らかなグリッドを参照する方法

私は、ウェブページ上にグリッドを表示するために、slickグリッドと呼ばれるjavascriptライブラリを使用しています。グリッド情報をajax経由でサーバーに送信する必要があります。私の問題は、グリッドにアクセスするためにjquery表記を使用する必要があることです。ここでjquery表記で滑らかなグリッドを参照する方法

はdivのグリッドである：ここで

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

は、私が使用しているのjavascriptです：

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"); 
      } 
     }); 
    }; 
};

任意の助けいただければ幸いです。

編集：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をどのようにトリガしているのかわからないので、私は確かに言えません。

しかし、「$（関数（）{」最後に変数が見つかり、グリッドにアクセスした内部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表記で滑らかなグリッドを参照する方法

答えて

関連する問題