jqGrid disable sortablerows

I'm trying to disable sortablerows functionality from a grid. I'd like to have the ability to toggle on/off the sortablerows functionality. Enabling the feature is pretty straightforward:

jQuery("#list").jqGrid('sortableRows', {
     update: function(event, ui) { updateOrder() }
});

But disabling the feature has proven to be a little bit harder. I've consulted the UI Integrations where sortableRows is documented in the jqGrid Wiki:

www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods

And found that "The method is fully compatible with jQuery UI sortable widget." So I ventured off to the jQuery UI sortable documentation and found this:

http://jqueryui.com/demos/sortable/

jQuery("#list").jqGrid('sortableRows', {disabled: true});

The code above simply disables the rows. So I moved onto the destroy method:

jQuery("#list").jqGrid('sortableRows', {destroy: true});

but that doesn't do anything. Based upon the documentation the destroy method seems to be exactly what I need, so maybe my syntax is wrong but I can't seem to get it to work.

Does anyone have experience with this same issue?

回答1:

It took awhile for me to figure this one out but I got it and it's pretty simple. This is all you need to do:

$("#list tbody").sortable("destroy");

My initial instincts to turn to jQuery UI Sortable documentation were right on. My syntax wasn't. I dug through the jqgrid JS file and found this:

a("tbody:first", i).sortable(b)

Which then pointed me in the right direction. It appears that the tbody is the hinge pin to the entire mess.

Not that anyone cares but I thought I should share in case someone else has a similar issue and my solution isn't a 100% fit for them.

Anywho, thanks for the help y'all. Mission accomplished.

回答2:

You should define a dummy CSS class like

.unsortable{}

then call sortableRows method of jqGrid replacing default items: '.jqgrow' parameter with

jQuery("#list").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});

Now you should only add the class "unsortable" to the rows, which you want not permit be sortable. Let us we have in the grid rows with ids 'C28011' and 'C28015'. Then to do so you can either use setRowData method of jqGrid or call addClass method of jQuery directly:

jQuery("#list").setRowData ('C28011', false, 'unsortable');
jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable');

UPDATED (add a code example): After reading of your comment I think it would be better if I post here a code example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
    <title>Demonstration of disabling sortableRows on some jqGrid rows</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.6.5/js/jquery.jqGrid.min.js"></script>

    <style type="text/css">
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
        #sortable li span { position: absolute; margin-left: -1.3em; }
        .unsortable {}
    </style>

    <script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function() {
            jQuery("#sortable").sortable({ items: 'li:not(.unsortable)'});
            jQuery("#sortable").disableSelection();

            jQuery("#sortrows").jqGrid({
                datatype: 'local',
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', width:55},
                    {name:'invdate',index:'invdate', width:90},
                    {name:'name',index:'name asc, invdate', width:100},
                    {name:'amount',index:'amount', width:80, align:"right"},
                    {name:'tax',index:'tax', width:80, align:"right"},
                    {name:'total',index:'total', width:80,align:"right"},
                    {name:'note',index:'note', width:250, sortable:false}
                ],
                rowNum:10,
                width:700,
                rowList:[10,20,30],
                pager: '#psortrows',
                sortname: 'invdate',
                viewrecords: true,
                sortorder: "desc",
                caption:"Sortable Rows Example"
            });
            jQuery("#sortrows").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});

            var myData = [
                {id: "11", invdate: "2007-10-06", name: "Client 1", amount: "600.00",  tax:"120.00", total: "720.00", note: "not sortable"},
                {id: "9",  invdate: "2007-10-06", name: "Client 1", amount: "200.00",  tax:"40.00", total: "240.00",  note: "not sortable"},
                {id: "5",  invdate: "2007-10-05", name: "Client 3", amount: "100.00",  tax:"0.00", total: "100.00",   note: "not sortable"},
                {id: "7",  invdate: "2007-10-05", name: "Client 2", amount: "120.00",  tax:"12.00", total: "134.00",  note: "no tax at all"},
                {id: "6",  invdate: "2007-10-05", name: "Client 1", amount: "50.00",   tax:"10.00", total: "60.00",   note: ""},
                {id: "4",  invdate: "2007-10-04", name: "Client 3", amount: "150.00",  tax:"0.00", total: "150.00",   note: "no tax"}
            ];

            for (var i = 0; i < myData.length; i++) {
                jQuery("#sortrows").addRowData(myData[i].id, myData[i]);
            }

            jQuery("#sortrows").setRowData ('11', false, 'unsortable');
            jQuery("#sortrows").setRowData ('9', false, 'unsortable');
            jQuery("#5",jQuery("#sortrows")[0]).addClass('unsortable');
        });
    //]]>
    </script>
</head>

<body>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default unsortable"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 (not sortable)</li>
    <li class="ui-state-default unsortable"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 (not sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6 (sortable)</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7 (sortable)</li>
</ul>

</div>

<table id="sortrows"></table>
<div id="psortrows"></div>

</body>
</html>

In this code I use at the beginning standard jQuery sortable functionality to allow sort only selected items. Than I do the same inside of jqGrid. You can see this example working here http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm. So adding a dummy class 'unsortable' to a row follow to disabling "sortable" functionality. Removing of this class switch "sortable" on. You can do this any time for selected rows of grid or for all (jQuery("tr",jQuery("#list")[0]).addClass('unsortable');).

The only thing which you should don't forget: you should call setRowData or addClass after the data added in the grid, for example, inside of loadComplete function of jqGrid.

UPDATED 2: See the answer which described how to disable sorting for specific rows of the grid. It uses possibilities existing in more recent versions of jqGrid and jQuery UI.

回答3:

As gurun8 wrote:

 $("#list tbody").sortable("destroy");

This works great. But, if you use inline editing, you might want to do

$("tbody:first","#list").enableSelection();

jqGrid sortableRows calls the disableSelection() function, which disallows the selection of any form element within the grid's tbody, thus preventing proper inline editing.