Question

我想手动触发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对此类全球事件做出反应的任何建议都将受到高度赞赏。提前谢谢。

Answer 1

此代码解决了我的问题，

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

请提出建议，如果有更好的方法可以实现这一目标。

手动触发slickgrid事件

1 个答案: