2016-07-04 7 views
0

スリックグリッドイベントを手動でトリガーしたい。たとえば:私は下の矢印を押すと下に移動する現在のセルを変更したい。これは私がslickgridがフォーカスにあるときにのみ達成することができます、フォーカスがWebページに失われたら、下向きの矢印を押すことはアクティブなセルを変更しません。手動でスリックグリッドイベントをトリガー

私はこの試みた:

(リフレッシュされないレンダリング)に反応するslickgridを作成する方法上の任意のアドバイスを

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>SlickGrid example 1: Basic grid</title> 
    <link rel="stylesheet" href="mycss/slick.grid.css" type="text/css"/> 
    <link rel="stylesheet" href="mycss/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> 
    <link rel="stylesheet" href="mycss/examples.css" type="text/css"/> 
</head> 
<body> 
<div> 
    <p id="p_title"></p> 
    <p id="p_duration"></p> 
    <p id="p_Complete"></p> 
    <p id="p_start"></p> 
    <p id="p_finish"></p> 
    <p id="p_effort-driven"></p> 
</div> 
<table width="100%"> 
    <tr> 
    <td valign="top" width="50%"> 
     <div id="myGrid" style="width:600px;height:500px;"></div> 
    </td> 
    </tr> 
</table> 



<script src="js/lib/jquery-1.7.min.js"></script> 
<script src="js/lib/jquery.event.drag-2.2.js"></script> 
<script src="js/slick.core.js"></script> 
<script src="js/slick.grid.js"></script> 
<script src="js/slick.dataview.js"></script> 

<script> 
    var grid; 
    var dataView; 
    var curr_row; 
    var columns = [ 
    {id: "title", name: "Title", field: "title"}, 
    {id: "duration", name: "Duration", field: "duration"}, 
    {id: "%", name: "% Complete", field: "percentComplete"}, 
    {id: "start", name: "Start", field: "start"}, 
    {id: "finish", name: "Finish", field: "finish"}, 
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"} 
    ]; 

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

    $(function() { 
    var data = []; 
    for (var i = 0; i < 50; i++) { 
     data[i] = { 
     id: i, 
     title: "Task " + i, 
     duration: "5 days", 
     percentComplete: Math.round(Math.random() * 100), 
     start: "01/01/2009", 
     finish: "01/05/2009", 
     effortDriven: (i % 5 == 0) 
     }; 
    } 
    dataView = new Slick.Data.DataView(); 
    dataView.setItems(data); 
    grid = new Slick.Grid("#myGrid", dataView, columns, options); 

    grid.onKeyDown.subscribe(function (e, args) { 
     if (e.which == 38) { 
      curr_row= args.row - 1; 
      sata(curr_row) 
     } 
     if (e.which == 40){ 
      curr_row = args.row + 1; 
      sata(curr_row) 
     } 
    }); 

    grid.onClick.subscribe(function (e, args){ 
     curr_row = args.row; 
     sata(curr_row) 
    }); 
    }); 


function sata(row){ 
    var row_data = dataView.getItem(row); // Read from dataView not the grid data 
     var cell_contents = row_data['title']; 
     alert(cell_contents); 
} 

    $(document).keydown(function(e) { 
    if (e.which == 38) { 
     curr_row= curr_row - 1; 
     grid.onClick.notify({row:curr_row}) 
     } 
     if (e.which == 40){ 
      curr_row = curr_row + 1; 
      grid.onClick.notify({row:curr_row}) 


     } 
}); 
</script> 
</body> 
</html> 

をしかし、私は今、アクティブセルのデータを取得することができていても、グリッドが更新されませんこのようなグローバルなイベントは高く評価されます。前もって感謝します。

答えて

0

このコードは私の問題に対処し、これを達成するためのより良い方法がある場合は、

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>SlickGrid example 1: Basic grid</title> 
    <link rel="stylesheet" href="mycss/slick.grid.css" type="text/css"/> 
    <link rel="stylesheet" href="mycss/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/> 
    <link rel="stylesheet" href="mycss/examples.css" type="text/css"/> 
</head> 
<body> 
<div> 
    <p id="p_title"></p> 
    <p id="p_duration"></p> 
    <p id="p_Complete"></p> 
    <p id="p_start"></p> 
    <p id="p_finish"></p> 
    <p id="p_effort-driven"></p> 
</div> 
<table width="100%"> 
    <tr> 
    <td valign="top" width="50%"> 
     <div id="myGrid" style="width:600px;height:500px;"></div> 
    </td> 
    </tr> 
</table> 



<script src="js/lib/jquery-1.7.min.js"></script> 
<script src="js/lib/jquery.event.drag-2.2.js"></script> 
<script src="js/slick.core.js"></script> 
<script src="js/slick.grid.js"></script> 
<script src="js/slick.dataview.js"></script> 

<script> 
    var grid; 
    var dataView; 
    var curr_row; 
    var curr_cell; 
    var columns = [ 
    {id: "title", name: "Title", field: "title"}, 
    {id: "duration", name: "Duration", field: "duration"}, 
    {id: "%", name: "% Complete", field: "percentComplete"}, 
    {id: "start", name: "Start", field: "start"}, 
    {id: "finish", name: "Finish", field: "finish"}, 
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"} 
    ]; 

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

    $(function() { 
    var data = []; 
    for (var i = 0; i < 50; i++) { 
     data[i] = { 
     id: i, 
     title: "Task " + i, 
     duration: "5 days", 
     percentComplete: Math.round(Math.random() * 100), 
     start: "01/01/2009", 
     finish: "01/05/2009", 
     effortDriven: (i % 5 == 0) 
     }; 
    } 
    dataView = new Slick.Data.DataView(); 
    dataView.setItems(data); 
    grid = new Slick.Grid("#myGrid", dataView, columns, options); 

    grid.onKeyDown.subscribe(function (e, args) { 
     curr_cell= args.cell; 
     if (e.which == 38) { 
      curr_row= args.row - 1; 

      sata(curr_row) 
     } 
     if (e.which == 40){ 
      curr_row = args.row + 1; 
      sata(curr_row) 
     } 
    }); 

    grid.onClick.subscribe(function (e, args){ 
     curr_cell= args.cell; 
     curr_row = args.row; 
     sata(curr_row) 
    }); 
    }); 


function sata(row){ 
    var row_data = dataView.getItem(row); // Read from dataView not the grid data 
     var cell_contents = row_data['title']; 
     alert(cell_contents); 
} 

    $(document).keydown(function(e) { 
    if (e.which == 38) { 
     curr_row= curr_row - 1; 
     grid.gotoCell(curr_row, curr_cell) 
     grid.onClick.notify({row:curr_row, cell:curr_cell}) 

     } 
     if (e.which == 40){ 
      curr_row = curr_row + 1; 
      grid.gotoCell(curr_row, curr_cell) 
      grid.onClick.notify({row:curr_row, cell:curr_cell}, e) 



     } 
}); 
</script> 
</body> 
</html> 

は、アドバイスをしてください。

+0

grid.gotocell(row、cell)はジョブを実行します。 :) – aiyu

関連する問題