Question

有没有办法点击SlickGrid的dragstart / end事件？我试图从SlickGrid列标题中取出文本并放在另一个对象上。

Answer 1

它使用jquery sortable进行列排序，因此您可以挂钩事件通过修改slick.grid.js中的setupColumnReorder函数

我添加了自己的事件处理程序： onColumnsReorderStart onBeforeColumnsReordered

function setupColumnReorder() {
  $headers.filter(":ui-sortable").sortable("destroy");
  $headers.sortable({
    containment: "parent",
    distance: 3,
    axis: "x",
    cursor: "default",
    tolerance: "intersection",
    helper: "clone",
    placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
    start: function (e, ui) {
      ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
      $(ui.helper).addClass("slick-header-column-active");
      trigger(self.onColumnsReorderStart, ui);//added HERE
    },
    beforeStop: function (e, ui) {
        $(ui.helper).removeClass("slick-header-column-active");
        trigger(self.onBeforeColumnsReordered, ui);//added HERE
    },
    stop: function (e) {
      if (!getEditorLock().commitCurrentEdit()) {
        $(this).sortable("cancel");
        return;
      }

      var reorderedIds = $headers.sortable("toArray");
      var reorderedColumns = [];
      for (var i = 0; i < reorderedIds.length; i++) {
        reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
      }
      setColumns(reorderedColumns);

      trigger(self.onColumnsReordered, {});
      e.stopPropagation();
      setupColumnResize();
    }
  });
}

并且在同一个文件中，您需要注册事件：

// Public API

$.extend(this, {
  "slickGridVersion": "2.1",

  // Events
  "onScroll": new Slick.Event(),
  "onSort": new Slick.Event(),
  "onHeaderMouseEnter": new Slick.Event(),
  "onHeaderMouseLeave": new Slick.Event(),
  "onHeaderContextMenu": new Slick.Event(),
  "onHeaderClick": new Slick.Event(),
  "onHeaderCellRendered": new Slick.Event(),
  "onBeforeHeaderCellDestroy": new Slick.Event(),
  "onHeaderRowCellRendered": new Slick.Event(),
  "onBeforeHeaderRowCellDestroy": new Slick.Event(),
  "onMouseEnter": new Slick.Event(),
  "onMouseLeave": new Slick.Event(),
  "onClick": new Slick.Event(),
  "onDblClick": new Slick.Event(),
  "onContextMenu": new Slick.Event(),
  "onKeyDown": new Slick.Event(),
  "onAddNewRow": new Slick.Event(),
  "onValidationError": new Slick.Event(),

  "onViewportChanged": new Slick.Event(),
  "onColumnsReorderStart": new Slick.Event(),//added HERE
  "onColumnsReordered": new Slick.Event(),
  "onBeforeColumnsReordered": new Slick.Event(),//added HERE
  "onColumnsResized": new Slick.Event(),
  "onCellChange": new Slick.Event(),
  "onBeforeEditCell": new Slick.Event(),
  "onBeforeCellEditorDestroy": new Slick.Event(),
  "onBeforeDestroy": new Slick.Event(),
  "onActiveCellChanged": new Slick.Event(),
  "onActiveCellPositionChanged": new Slick.Event(),
  "onDragInit": new Slick.Event(),
  "onDragStart": new Slick.Event(),
  "onDrag": new Slick.Event(),
  "onDragEnd": new Slick.Event(),
  "onSelectedRowsChanged": new Slick.Event(),
  "onCellCssStylesChanged": new Slick.Event(),

...

然后像这样使用它：

    grid.onColumnsReordered.subscribe(function (s, e) {
        console.log('onColumnsReordered');
        var myItem = e.item;
    });
    grid.onColumnsReorderStart.subscribe(function (s, e) {
        console.log('onColumnsReorderStart');
        var myItem2 = e.item;
    });

    grid.onBeforeColumnsReordered.subscribe(function (s, e) {
        console.log('onBeforeColumnsReordered');
    });

SlickGrid - 将列标题拖到表外

1 个答案: