Question

我希望能够将项目从Grid1拖动到Grid2，然后允许用户对Grid2的项目进行排序。单独地，sortableRows选项和gridDnd选项可以正常工作。当两个集成一起使用并且用户对Grid2中的行进行排序时，行将被复制，就好像它们是从Grid1拖动一样。

使用jquery 1.4.4，jqueryui 1.8.10，jqGrid 4.2 以下是一些演示此问题的示例代码：

<script type="text/javascript">
$(document).ready(function () {
    // Creating grid1
    jQuery("#grid1").jqGrid({
        datatype: "local",
        height: 100,
        colNames: ['Id1', 'Name1', 'Values1'],
        colModel: [
           {name: 'id1', index: 'id',width: 100}, 
           {name: 'name1',index: 'name',width: 100},
           {name: 'values1',index: 'values',width: 200}
        ],
        caption: 'Grid 1',
        pager: '#pgrid1'
    });

    // Creating grid2
    jQuery("#grid2").jqGrid({
        datatype: "local",
        height: 'auto',
        colNames: ['Id2', 'Name2', 'Values2'],
        colModel: [
           {name: 'id2',index: 'id',width: 100},
           {name: 'name2',index: 'name', width: 100},
           {name: 'values2',index: 'values',width: 200}],
        caption: 'Grid 2',
        pager: '#pgrid2'
    });

    // Data for grid1
    var mydata1 = [
        {id1:"1",name1:"test1",values1:'One'},
        {id1:"2",name1:"test2",values1:'Two'},
        {id1:"3",name1:"test3",values1:'Three'}
    ];

    // Data for grid2
    var mydata2 = [
        {id2:"11",name2:"test11",values2:'One1'},
        {id2:"21",name2:"test21",values2:'Two1'},
        {id2:"31",name2:"test31",values2:'Three1'}
    ];

    // Adding grid data
    for (var i = 0; i <= mydata1.length; i++) {
        jQuery("#grid1").jqGrid('addRowData',i + 1, mydata1[i]);
        jQuery("#grid2").jqGrid('addRowData',i + 1, mydata2[i]);
    }

    // connect grid1 with grid2
    jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2'});
    // make grid2 sortable
    jQuery("#grid2").jqGrid('sortableRows');

});

</script>
<table id="grid1">
    <tr>
        <td />
    </tr>
</table>
<table id="grid2">
    <tr>
        <td />
    </tr>
</table>

Answer 1

这似乎是jqGrid代码中的一个错误。我认为应该从

更改grid.jqueryui.js的行392

return d;

到

return false;

jquery.jqGrid.src.js中的相应行的数字为11098.更改后the original demo将固定为the following，这似乎无法正常工作。

更新：我在trirand论坛上发布了the bug report，我在其中描述了问题以及我的修复建议。我希望Tony能将修复包含在jqGrid的主代码中。

更新2 ：jqGrid的主要代码中的错误已经是fixed。

Answer 2

Oleg：我得到你的示例页面并修改它以使第一个网格可以像这样排序：我在源代码的末尾添加了这一行：jQuery（“＃grid1”）。jqGrid（'sortableRows'）;并且第一个网格不能像第二个网格那样排序，所以我们无法在同一网格上组合sortableRows和Dnd？你觉得怎么样？

<script type="text/javascript">
//<![CDATA[
    /*global jQuery */
    /*jslint browser: true */
    jQuery(function () {
        'use strict';
        var mydata1 = [ // Data for grid1
                {id1: "1", name1: "test1", values1: 'One'},
                {id1: "2", name1: "test2", values1: 'Two'},
                {id1: "3", name1: "test3", values1: 'Three'}
            ],
            mydata2 = [ // Data for grid2
                {id2: "11", name2: "test11", values2: 'One1'},
                {id2: "21", name2: "test21", values2: 'Two1'},
                {id2: "31", name2: "test31", values2: 'Three1'}
            ];

        // Creating grid1
        jQuery("#grid1").jqGrid({
            datatype: "local",
            data: mydata1,
            height: 'auto',
            colNames: ['Id1', 'Name1', 'Values1'],
            colModel: [
                {name: 'id1', index: 'id', width: 100},
                {name: 'name1', index: 'name', width: 100},
                {name: 'values1', index: 'values', width: 200}
            ],
            caption: 'Grid 1',
            pager: '#pgrid1'
        });

        // Creating grid2
        jQuery("#grid2").jqGrid({
            datatype: "local",
            data: mydata2,
            height: 'auto',
            colNames: ['Id2', 'Name2', 'Values2'],
            colModel: [
                {name: 'id2', index: 'id', width: 100},
                {name: 'name2', index: 'name', width: 100},
                {name: 'values2', index: 'values', width: 200}
            ],
            caption: 'Grid 2',
            pager: '#pgrid2'
        });

        // connect grid1 with grid2
        jQuery("#grid1").jqGrid('gridDnD', {connectWith: '#grid2'});

        // make grid2 sortable
        jQuery("#grid2").jqGrid('sortableRows');
  **jQuery("#grid1").jqGrid('sortableRows');**
    });
//]]>
</script>

jqGrid：组合sortableRows和gridDnD（重复行）

2 个答案: