jqGrid отключают sortablerows
Я пытаюсь отключить sortablerows функциональность от сетки. Я хотел бы иметь способность переключить вкл\выкл sortablerows функциональность. Активация опции довольно проста:
jQuery("#list").jqGrid('sortableRows', {
update: function(event, ui) { updateOrder() }
});
Но отключение опции, оказалось, было немного более трудным. Я консультировался с Интеграцией UI где sortableRows документируется в jqGrid Wiki:
www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods
И найденный, что "Метод полностью совместим с jQuery UI поддающийся сортировке виджет". Таким образом, я рисковал прочь к UI jQuery поддающаяся сортировке документация и нашел это:
http://jqueryui.com/demos/sortable/
jQuery("#list").jqGrid('sortableRows', {disabled: true});
Код выше просто отключает строки. Таким образом, я переместился на destroy метод:
jQuery("#list").jqGrid('sortableRows', {destroy: true});
но это ничего не делает. Основанный на документации destroy метод, кажется, точно, в чем я нуждаюсь, поэтому возможно, мой синтаксис является неправильным, но я, может казаться, не заставляю его работать.
У кого-либо есть опыт с этой той же проблемой?
2 ответа
Мне потребовалось некоторое время, чтобы разобраться в этом, но я разобрался, и это довольно просто. Вот все, что вам нужно сделать:
$("#list tbody").sortable("destroy");
Мой первоначальный инстинкт обратиться к документации по jQuery UI Sortable был верен. А вот синтаксис - нет. Я покопался в JS-файле jqgrid и нашел вот это:
a("tbody:first", i).sortable(b)
Что затем направило меня в правильном направлении. Оказалось, что tbody - это шарнирный стержень всего этого беспорядка.
Не то чтобы это кого-то волновало, но я подумал, что должен поделиться на случай, если у кого-то еще возникнет подобная проблема и мое решение не подойдет им на 100%.
В любом случае, спасибо за помощь. Миссия выполнена.
Вы должны определить фиктивный класс CSS, например
.unsortable{}
, затем вызвать метод sortableRows jqGrid, заменив элементы по умолчанию : '. jqgrow ' параметр с
jQuery("#list").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});
Теперь вам нужно только добавить класс «несортированный» к строкам, которые вы не хотите разрешать сортировать. Пусть у нас в сетке есть строки с идентификаторами «C28011» и «C28015». Затем для этого вы можете использовать метод setRowData из jqGrid или напрямую вызвать метод addClass из jQuery :
jQuery("#list").setRowData ('C28011', false, 'unsortable');
jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable');
UPDATED ] (добавьте пример кода): После прочтения вашего комментария я думаю, было бы лучше, если бы я разместил здесь пример кода:
<!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 . Таким образом, добавление фиктивного класса «несортированный» в строку следует за отключением «сортируемой» функциональности. Снятие этого класса включите "сортируемый". Вы можете сделать это в любое время для выбранных строк сетки или для всех ( jQuery ("tr", jQuery ("# list") [0]). AddClass ('unsortable'); ).
Единственное, о чем не стоит забывать: вы должны вызвать setRowData или addClass после данных, добавленных в сетку, например, внутри loadComplete функция jqGrid.
ОБНОВЛЕНО 2 : см. ответ , в котором описано, как отключить сортировку для определенных строк сетки. Он использует возможности, существующие в более поздних версиях jqGrid и jQuery UI.