Вы должны определить фиктивный класс 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.