Question

当我拖放jqGrid时，我需要触发更改服务器端的项目。我觉得这将是一个简单的练习，但我还没有遇到如何实现这一目标的代码示例。我已经看过尝试使用jQueryUI事件信息，但目标被列为整个网格。我已经能够通过onstop从ui.helper.context.id事件中提取源行ID，但是我没有运气，因此确定了物品掉落（更重要的是它的ID）在列表中。

为了澄清一点，我在同一jqGrid内拖放，试图重新订购服务器上的项目。

我有一个jqGrid：

$("#modelList").jqGrid({
  url: getMSModelsJsonUrl + '?manuf=1',
  datatype: "json",
  colNames: ['ID', 'Name'],
  colModel: [
    { name: 'optionValue', key: true, index: 'optionValue', width: 55, editable: false, hidden: true, editrules: { edithidden: true } },
    { name: 'optionDisplay', index: 'optionDisplay', width: 155, editable: false }
  ],
  onSelectRow: function (id) {
    var manuf = $("#manufList").jqGrid('getGridParam', 'selrow');

    self.modelsTableInfo.currentSelection(manuf);

    $('#bodyList').setGridParam({ url: getMSBodiesJsonUrl + '?manuf=' + manuf + '&model=' + id }).trigger('reloadGrid');
  },
  loadComplete: function () {
    var grid = $("#modelList"),
    ids = grid.jqGrid("getDataIDs");
    if (ids && ids.length > 0)
      grid.jqGrid("setSelection", ids[0]);
  },
  sortname: 'optionValue',
  viewrecords: true,
  sortorder: "desc",
  caption: "Models",
  height: 350,
  rowNum: 1000,
  autowidth: true
});

和拖放绑定因此：

$("#modelList").jqGrid('gridDnD', {
  connectWith: '#modelList',

  onstop: function (event, ui) {
    var draggedItem = ui.helper.context.id;
    var dragTarget = event.target.id;
    alert(draggedItem +" to "+dragTarget );
  },

  beforedrop: function (event, ui, data, source, target) {
    return data;
  }
});

当使用上述代码拖放某些内容时，它会将源ID和目标ID报告为相同。

我必须在这里遗漏一些东西，因为这似乎是对拖放功能的明显使用。

- 编辑---

我最终选择了使用tableDnD的解决方案，因为我无法让jqGrid工作（我很乐意看到解决方案）

的jQuery（ “＃modelList”）。tableDnD（{ scrollAmount：0， onDrop：function（table，row）{ var rows = table.tBodies [0] .rows;
var rowIdBeforeNewPosition = null; for（var i = 0; i

      if (rows[i].id === row.id) {
        if (i > 0)
          rowIdBeforeNewPosition = rows[i-1].id;
      }
    }

    var manufId = $("#manufList").jqGrid('getGridParam', 'selrow');

    $.ajax({ url: setModelOrderJSONUrl + '?manufId=' + manufId + '&modelIdToMove=' + row.id + '&modelIdToPositionAfter=' + rowIdBeforeNewPosition, type: "POST" }).done(function (wasSuccessful) {
      if (!wasSuccessful)
        $('#modelList').trigger('reloadGrid');  //Reload to reflect true situation
    });       
  }
});

$（ “＃modelList”）。jqGrid的（{ url：getMSModelsJsonUrl +'？manuf = 1'，数据类型：“json”， colNames：['ID'，'Name']， colModel：[ {name：'optionValue'，key：true，index：'optionValue'，width：55，editable：false，hidden：true，editrules：{edithidden：true}}， {name：'optionDisplay'，index：'optionDisplay'，width：155，editable：false} ] onSelectRow：function（id）{ var manuf = $（“＃manufList”）。jqGrid（'getGridParam'，'selrow'）;

    self.modelsTableInfo.currentSelection(manuf);

    $('#bodyList').setGridParam({ url: getMSBodiesJsonUrl + '?manuf=' + manuf + '&model=' + id }).trigger('reloadGrid');
  },
  loadComplete: function () {
    var grid = $("#modelList"),
    ids = grid.jqGrid("getDataIDs");
    if (ids && ids.length > 0)
      grid.jqGrid("setSelection", ids[0]);
  },
  gridComplete: function () {
    $("#_empty", "#modelList").addClass("nodrag nodrop");
    jQuery("#modelList").tableDnDUpdate();
  },
  sortname: 'optionValue',
  viewrecords: true,
  sortorder: "desc",
  caption: "Models",
  height: 350,
  rowNum: 1000,
  autowidth: true
});

jqGrid拖放行与服务器端数据重新排序

0 个答案: