我正在尝试从网格中禁用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可排序小部件完全兼容。”所以我冒险尝试了jQuery UI可排序文档,发现了这个:
http://jqueryui.com/demos/sortable/
jQuery("#list").jqGrid('sortableRows', {disabled: true});
上面的代码只是禁用行。所以我转到了destroy
方法:
jQuery("#list").jqGrid('sortableRows', {destroy: true});
但这没有做任何事情。根据文档,destroy
方法似乎正是我所需要的,所以也许我的语法错了,但我似乎无法让它工作。
有没有人有同样问题的经验?
答案 0 :(得分:8)
我花了一段时间才想出这个,但我明白了,这很简单。这就是你需要做的所有事情:
$("#list tbody").sortable("destroy");
我最初转向jQuery UI可排序文档的直觉是正确的。我的语法不是。我挖掘了jqgrid JS文件,发现了这个:
a("tbody:first", i).sortable(b)
然后我指出了正确的方向。似乎tbody是整个混乱的铰链销。
并非所有人都在乎,但我认为我应该分享,以防其他人有类似的问题,我的解决方案不是100%适合他们。
Anywho,谢谢你的帮助。完成任务。
答案 1 :(得分:3)
您应该定义一个类似
的虚拟CSS类.unsortable{}
然后使用
调用jqGrid的sortableRows
方法替换默认的items: '.jqgrow'
参数
jQuery("#list").jqGrid('sortableRows', { items: '.jqgrow:not(.unsortable)'});
现在,您应该只将“unsortable”类添加到您不希望可以排序的行中。让我们在网格行中使用ID“C28011”和“C28015”。然后,您可以使用setRowData
的{{1}}方法或直接调用jqGrid
addClass
方法:
jQuery
更新(添加代码示例):在阅读您的评论后,我认为如果我在此处发布代码示例会更好:
jQuery("#list").setRowData ('C28011', false, 'unsortable');
jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable');
在这段代码中,我在开始时使用标准的jQuery可排序功能,只允许对所选项进行排序。比我在jqGrid里做的一样。您可以在此处查看此示例http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm。因此,在行中添加一个虚拟类'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("tr",jQuery("#list")[0]).addClass('unsortable');
或setRowData
,例如,在jqGrid的addClass
函数内部。
更新2 :请参阅the answer,其中介绍了如何禁用网格特定行的排序。它使用了更新版本的jqGrid和jQuery UI中存在的可能性。
答案 2 :(得分:2)
正如gurun8所写:
$("#list tbody").sortable("destroy");
这很有效。 但是,如果您使用内联编辑,则可能需要执行
$("tbody:first","#list").enableSelection();
jqGrid sortableRows调用disableSelection()函数,该函数不允许选择网格tbody中的任何表单元素,从而阻止正确的内联编辑。