jqGrid отключить сортировку - PullRequest
5 голосов
/ 30 апреля 2010

Я пытаюсь отключить функциональность sortablerows из сетки.Я хотел бы иметь возможность включать / выключать функцию сортировки.Включение этой функции довольно просто:

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

Но отключение этой функции оказалось немного сложнее.Я консультировался с Интеграциями пользовательского интерфейса, где sortableRows задокументировано в вики jqGrid:

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

и обнаружил, что«Этот метод полностью совместим с сортируемым виджетом jQuery UI».Поэтому я рискнул посмотреть на сортируемую документацию по jQuery UI и обнаружил:

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

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

Приведенный выше код просто отключает строки.Поэтому я перешел к методу destroy:

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

, но это ничего не дает.Основываясь на документации, метод destroy кажется именно тем, что мне нужно, поэтому, возможно, мой синтаксис неправильный, но я не могу заставить его работать.

Есть ли у кого-нибудь опыт с этой же проблемой?

Ответы [ 3 ]

8 голосов
/ 06 мая 2010

Мне потребовалось некоторое время, чтобы понять это, но я понял, и это довольно просто. Это все, что вам нужно сделать:

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

Мои первоначальные инстинкты обращения к пользовательскому интерфейсу jQuery Сортируемая документация была правильной. Мой синтаксис не был. Я копался в JS-файле jqgrid и нашел это:

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

Который затем указал мне правильное направление. Похоже, что это стержень шарнира для всего беспорядка.

Не то, чтобы кого-то это волновало, но я подумал, что должен поделиться, если у кого-то есть похожая проблема, и мое решение не подходит для них на 100%.

В любом случае, спасибо за помощь, вы все. Миссия выполнена.

3 голосов
/ 05 мая 2010

Вы должны определить фиктивный класс CSS, например

.unsortable{}

, затем вызовите sortableRows метод jqGrid, заменив параметр по умолчанию items: '.jqgrow' на

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

Теперь вам нужно только добавить класс "unsortable" в строки, которые вы не хотите, чтобы они сортировались. Допустим, мы имеем в строках сетки идентификаторы «C28011» и «C28015». Затем для этого вы можете использовать setRowData метод jqGrid или вызвать addClass метод jQuery напрямую:

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

ОБНОВЛЕНО (добавьте пример кода): После прочтения вашего комментария я думаю, что было бы лучше, если я опубликую здесь пример кода:

<!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>

В этом коде я использую в начале стандартную сортируемую функциональность jQuery, позволяющую сортировать только выбранные элементы. Чем я делаю то же самое внутри jqGrid. Вы можете увидеть этот пример здесь http://www.ok -soft-gmbh.com / jqGrid / sortableRows.htm . Поэтому добавление фиктивного класса «unsortable» в строку следует за отключением «сортируемой» функциональности. Снятие этого класса переключателем «сортируемый» включен. Вы можете сделать это в любое время для выбранных строк сетки или для всех (jQuery("tr",jQuery("#list")[0]).addClass('unsortable');).

Единственное, о чем вы не должны забывать: вы должны вызывать setRowData или addClass после добавления данных в сетку, например, внутри loadComplete функции jqGrid.

ОБНОВЛЕНО 2 : См. ответ , в котором описано, как отключить сортировку для определенных строк сетки. Он использует возможности, существующие в более поздних версиях jqGrid и jQuery UI.

2 голосов
/ 27 июня 2011

Как писал гуру8:

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

Это прекрасно работает. Но, если вы используете встроенное редактирование, вы можете сделать

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

jqGrid sortableRows вызывает функцию disableSelection (), которая запрещает выбор любого элемента формы в пределах тела сетки, тем самым предотвращая правильное редактирование в строке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...