分页后jqgrid draggable不工作

Question

我正在使用 draggable jqgrid.But 问题是行只能在第一行拖动 page.After 我更改了分页，行的 draggable 不是 working.Can 你帮帮我. 下面是我使 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);
    }
});

}

Answer 1

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

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

它对我来说效果很好。:)

分页后jqgrid draggable不工作

jqgrid draggable not working after paging

jquery

jqgrid

draggable

jquery-ui-draggable