Question

我在jqGrid中使用tableToGrid方法创建了两个网格。现在我想在这两个网格之间拖放行。只需在选项中添加'gridDnD' : true即可。怎么做？

示例：

<script type="text/javascript">
$(function() {
tableToGrid("#table1", { gridDnD: {connectWith: "#table2" } });
tableToGrid("#table2", { gridDnD: {connectWith: "#table2" } });
}
</script>

<table id="table1">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1</td>
<td>Val 2</tr>
</tr>
</tbody>
</table>

<table id="table2">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
</table>

Answer 1

gridDnD是jqGrid的一种方法，而不是您可以直接在tableToGrid中使用的选项。因此，您必须将代码重写为以下内容：

tableToGrid("#table1");
tableToGrid("#table2");
$("#table1").jqGrid('gridDnD', {connectWith: "#table2"});
$("#table2").jqGrid('gridDnD', {connectWith: "#table1"});

请参阅the demo。

更新：我在拖放过程中使用处理行而不是移动来分析问题。问题似乎是jqGrid与jQuery UI从版本1.8.13开始的兼容性问题。如何在使用jQuery UI 1.8.12的the demo上看到代码正常工作。

我发现grid.jqueryui.js code的行（jquery.jqGrid.src.js的行11078-11079）

var ids = $(ui.helper).attr("id");
$($t).jqGrid('delRowData',ids );

是问题的根源。 ui.helper[0]包含从jQuery UI 1.8.13开始的已删除行且空ID 。

如果要将代码更改为

var id = this.id;
$($t).jqGrid('delRowData',id);

代码将在新的jQuery UI（使用1.8.16测试）和旧的（1.8.12）中工作。请参阅相应的演示here。

我目前没有时间更准确地分析jQuery UI 1.8.12和1.8.13之间的变化。可能jQuery UI中存在一个错误。不过，我会在trirand forum中将我上面描述的建议作为错误修正发布。我认为让jqGrid代码与不同版本的jQuery UI具有较少的兼容性问题会很好。

在jqGrid中组合tableToGrid和gridDnd

1 个答案: