在按钮上单击以清空Java语言中的slickgrid

Question

Hello I have a slickgrid with five row , how can I empty my grid on a button click? Thanks.

My grid code:

var grid;
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 < 5; i++) {
    data[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)
    };
  }

  grid = new Slick.Grid("#myGrid", data, columns, options);

Answer 1

So to do what you intend to do, the following piece of code should work... Please note that I did not try it, I usually do a refresh of data instead, so try it and let me know:

// initialize the model after all the events have been hooked up
var data = null; // empty out your dataset
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();

// re-render the grid
grid.updateRowCount();
grid.render();

I just realized that you are not using a dataview object, I always use a dataview, it's easier to play with the data. So without the dataview, you could instead try doing this:

// reset the dataset
grid.setData(null, true);

// re-render the grid
grid.updateRowCount();
grid.render();

For the method documentation, see the wiki: SlickGrid grid.setData()