2016-07-04 4 views
0

Je souhaite déclencher manuellement un événement slickgrid. Par exemple: Je veux changer la cellule actuelle pour descendre lorsque j'appuie sur la flèche. Ce que je peux réaliser seulement quand le slickgrid est au foyer, une fois que le foyer est perdu à la page Web, en appuyant sur la flèche vers le bas ne changera pas la cellule active.Déclencher manuellement des événements slickgrid

J'ai essayé ceci:

<!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> 

Mais, même si je peux maintenant obtenir des données de cellules actives, la grille non mis à jour (render pas rafraîchi)

Tous les conseils sur la façon de faire slickgrid réagir à de tels événements mondiaux seront très appréciés. Merci d'avance.

Répondre

0

Ce code traite mon problème,

<!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> 

conseils S'il vous plaît, s'il y a une meilleure façon d'y parvenir. Grid.gotocell (ligne, cellule) fait le travail.

+0

:) – aiyu