Question

我有一个使用冻结/锁定列的网格并具有拖放功能。问题是我只能在未锁定列的一侧拖放一行，这不是我想要的。我希望能够从锁定的一侧抓住一行并拖放。 IE，如果我从ID列中抓取一行，则应该可以将其拖放。我希望有道理

$(document).ready(() => {
  $.when(LoadGrid()).then(EnableDragAndDropForGrid());
});

let ds = [{
    id: 1,
    name: "Jane",
    lastname: "Doe",
    age: 25,
    gender: "female",
    city: "London"
  },
  {
    id: 2,
    name: "John",
    lastname: "Doe",
    age: 26,
    gender: "male",
    city: "London"
  },
  {
    id: 3,
    name: "James",
    lastname: "Jones",
    age: 30,
    gender: "male",
    city: "New York"
  },
  {
    id: 4,
    name: "Mary",
    lastname: "Johnson",
    age: 23,
    gender: "female",
    city: "Paris"
  },
  {
    id: 5,
    name: "Robert",
    lastname: "Lee",
    age: 44,
    gender: "male",
    city: "Berlin"
  }
];

function LoadGrid() {
  $("#grid").kendoGrid({
    schema: {
      model: {
        fields: {
          id: {
            type: "number"
          },
          name: {
            type: "string"
          },
          lastname: {
            type: "string"
          },
          age: {
            type: "number"
          },
          gender: {
            type: "string"
          },
          city: {
            type: "string"
          }
        }
      }
    },
    columns: [{
        title: "id",
        field: "id",
        width: 100,
        locked: true
      },
      {
        title: "First",
        field: "name",
        locked: true,
        width: 150
      },
      {
        title: "Last",
        field: "lastname",
        locked: true,
        width: 150
      },
      {
        title: "Age",
        field: "age",
        width: 100
      },
      {
        title: "Gender",
        field: "gender",
        width: 100
      },
      {
        title: "City",
        field: "city",
        width: 100
      }
    ],
    dataSource: {
      data: ds
    },
    sortable: true
  });
}

function EnableDragAndDropForGrid() {
  let grid = $('#grid').data('kendoGrid');
  grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: function(element) {
      let table = $('<table style="width: 600px;" class="k-grid k-widget"></table>'),
        hint;

      table.append(element.clone());
      table.css("opacity", 0.7);

      return table;
    },
    cursor: "move",
    placeholder: function(element) {
      return $('<tr colspan="4" class="placeholder"></tr>');
    },
    change: function(e) {
      let skip = grid.dataSource.skip(),
        oldIndex = e.oldIndex + skip,
        newIndex = e.newIndex + skip,
        data = grid.dataSource.data(),
        dataItem = grid.dataSource.getByUid(e.item.data("uid"));

      grid.dataSource.remove(dataItem);
      grid.dataSource.insert(newIndex, dataItem);

    }
  });
}

.k-grid tbody tr {
  cursor: move;
}

.placeholder {
  outline-style: dashed;
  outline-width: 1px;
  outline-color: red;
}

#grid {
  width: 600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css" />

<div id="grid"></div>

Answer 1

此问题的解决方案是

此行为的原因是，具有锁定列的Kendo UI网格创建了两个表，并且当前可排序窗口小部件在包含非锁定内容的表上初始化。

要初始化在锁定表上的拖放操作，我们需要使用lockedTable元素。

如果希望用户看到整行，则可以通过查找具有相同data-uid的行来从另一张表中获取相应的单元格

function EnableDragAndDropForGrid() {
  let grid = $('#grid').data('kendoGrid');
  console.log(grid)
  grid.lockedTable.kendoSortable({
    filter: ">tbody >tr",
    hint: function(element) {
      var unlockedPortion = grid.table.find("tr[data-uid=" + element.data("uid") + "]").children();

      let table = $('<table style="width: 600px;" class="k-grid k-widget"></table>'),
        hint;

      table.append(element.clone().append(unlockedPortion));
      table.css("opacity", 0.7);

      return table;
    },
    cursor: "move",
    placeholder: function(element) {
      return $('<tr colspan="4" class="placeholder"></tr>');
    },
    change: function(e) {
      let skip = grid.dataSource.skip(),
        oldIndex = e.oldIndex + skip,
        newIndex = e.newIndex + skip,
        data = grid.dataSource.data(),
        dataItem = grid.dataSource.getByUid(e.item.data("uid"));

      grid.dataSource.remove(dataItem);
      grid.dataSource.insert(newIndex, dataItem);

    }
  });
}

只能拖放kendo ui网格未锁定侧的行

1 个答案: