【问题标题】:Manually trigger slickgrid events手动触发 slickgrid 事件
【发布时间】:2016-07-04 15:56:35
【问题描述】:

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

【问题讨论】:

    标签: javascript jquery slickgrid


    【解决方案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>
    

    请指教,如果有更好的方法来实现这一点。

    【讨论】:

    • grid.gotocell(row, cell) 完成这项工作。 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-20
    • 1970-01-01
    • 1970-01-01
    • 2020-01-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多