分页后jqgrid可拖动不起作用答案

【问题标题】：jqgrid draggable not working after paging分页后jqgrid可拖动不起作用
【发布时间】：2015-03-06 08:03:03
【问题描述】：

我正在使用可拖动的 jqgrid。但问题是行只能在第一页中拖动。在我更改分页后，行的可拖动不起作用。你能帮帮我吗？下面是使 jqgrid 行可拖动的代码。

function GetAllCompanyProducts(productData) {
/// <summary>method to load the Proposal grid</summary>
//Load the grid
var tabelWidth = $("#tblCompanyProducts").width();

jQuery("#tblCompanyProducts").jqGrid({
    datatype: 'local',
    data: productData,
    jsonReader: { repeatitems: false },
    loadui: "block",
    autowidth: true,
    mtype: 'get',
    rowNum: 30,
    rowList: [30, 100, 200],
    viewrecords: true,
    colNames: ['ProductId', 'ProductName', 'Price'],
    colModel: [
        { name: 'ProductId', index: 'ProductId', width: '30%' },
        { name: 'ProductName', index: 'ProductName', width: '30%' },
        { name: 'Price', index: 'Price', width: '30%' }
    ],
    sortname: 'ProductId',
    sortorder: 'asc',
    caption: "Product List",
    width: tabelWidth - 10,
    pager: '#divPager',
    height: "100%",
    hoverrows: true,
    onPaging: function () {
        $("#tblCompanyProducts").trigger('reloadGrid');
    },

});    


$("#tblCompanyProducts").jqGrid('setGridParam', { gridComplete: MakeGridRowsDraggable($("#" + this.id)) });

}

下面是方法

function MakeGridRowsDraggable(grid) {
/// <summary></summary>
/// <param name="grid" type=""></param>

//$("#tblCompanyProducts").val(new Date().getTime());
var searchResultsRows = $("#tblCompanyProducts .ui-row-ltr");

searchResultsRows.draggable({ appendTo: "body" }); searchResultsRows.draggable({
    create: function (event, ui) { }
});

searchResultsRows.css("cursor", "move").draggable("option", "helper", "clone").draggable({
    revert: "true",
    appendTo: 'body',
    cursor: "move",
    snap: "true",
    cursorAt: {
        top: 10,
        left: -5
    },
    helper: function (event) {
        //get a hold of the row id
        var rowId = $(this).attr('id');

        var rowData = $("#tblCompanyProducts").getRowData(rowId);
        var  id = parseInt(rowData['ProductId']) + "-" + rowData['ProductName'] + "-" + rowData['Price'];
        //set the data on this to the value to grab when you drop into input box
        $(this).data('colValue', id);
        var dialog = ($('#DragableWidget').length > 0) ? $('#DragableWidget') :
                     $('<div id="DragableWidget" class="draggedValue ui-widget-header ui-corner-all"></div>').appendTo('body');
        dialog.html(id);
        return dialog;
    }
    , start: function (event, ui) {
    }
    , stop: function (event, ui) {
        $(this).parent().fadeTo(0, 1);
    }
});

}

【问题讨论】：

jqGrid默认有可排序的行功能。
您好 Frebin，感谢您的建议。但要求是将网格行拖到另一个 div 上。这可以通过 sortable 函数实现吗？
当然你可以用可排序的插件来做到这一点。
你能给我一个如何使用这个的例子吗..谢谢.. :)
用分页检查这个jsfiddle.net/9kLqqtfL/3

标签： jquery jqgrid draggable jquery-ui-draggable

【解决方案1】：

我通过超时调用 loadcomplete 方法解决了这个问题。下面是代码

  loadComplete: function () {
            setTimeout(function () {
                MakeGridRowsDraggable($("#" + this.id));
            }, 2000);

对我来说效果很好。:)

【讨论】：