更改jqGrid行被拖动的CSS [英] Change the CSS of a jqGrid Row Being Dragged

问题描述

我使用jqGrid的拖放功能，我想知道如何改变被拖动的行的CSS。

我想我可以添加一个CSS类到拖动的行，但我不是100％确定如何。

任何人都可以帮忙吗？谢谢！

解决方案

您可以使用。您可以尝试演示查看所有作品。

I'm using jqGrid's Drag and Drop functionality and I would like to know how I can alter the CSS of the row that is being dragged around.

I'm thinking I can add a CSS class to the dragged row, but I'm not 100% sure how.

Can anyone help? Thanks!

解决方案

You can use onstart callback to modify the style of the row that is being dragged around.

I made the following demo for you to demonstrate how it can be done:

The corresponding code is

$("#grid1").jqGrid('gridDnD', {
    connectWith: '#grid2',
    onstart: function (ev, ui) {
        ui.helper.removeClass("ui-state-highlight")
            .addClass("ui-state-error ui-widget")
            .css({
                border: "5px ridge tomato"
            });
    }
});

In the example I remove the style "ui-state-highlight" added by jqGrid by default to the dragging row, then I add "ui-widget" to fix the problem with the font of the dragging row. At the end I added the styles which corresponds to the style which I need to have: CSS class "ui-state-error" and CSS style border: 5px ridge tomato.

Additionally I use CSS style

.ui-jqgrid .ui-jqgrid-bdiv table.ui-state-active { border-style: none; }

to prevent horizontal scroll bar in the destination grid.

UPDATED: I din't see any problem with the usage of altRows: true in some from grids. Probably you the reason was the usage of sortableRows in the

// make rows of grid2 sortable
$("#grid2").jqGrid('sortableRows', {
    update: function () {
        resetAltRows.call(this.parentNode);
    }
});

where simple resetAltRows functions I described here. You can try the demo to see that all works.

这篇关于更改jqGrid行被拖动的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！