手動觸發slickgrid事件

我想手動觸發slickgrid事件。例如：我想改變當前單元格，當我按下箭頭時向下移動。這隻有當slickgrid處於焦點時才能實現，一旦焦點丟失到網頁上，按下箭頭將不會更改活動單元格。手動觸發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>

但是，即使我現在能得到活動單元格的數據，而不是更新的網格（渲染不刷新）

如何使slickgrid作出反應，任何意見這樣的全球活動將受到高度讚賞。提前致謝。

來源

2016-07-04 aiyu

此代碼解決了我的問題，

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

請指點，是否有更好的方式來實現這一目標。

來源

2016-07-04 16:43:21 aiyu

grid.gotocell（row，cell）完成這項工作。 :) – aiyu

手動觸發slickgrid事件

回答

相關問題