Question

我正在使用draggable jqgrid.But问题是行只能在第一页中拖动。在我改变分页后，行的拖动不起作用。你能帮帮我吗。下面是我的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在分页后无法正常工作

1 个答案: