jqGrid禁用sortablerows

时间:2010-04-30 19:55:52

标签: jquery-ui jqgrid

我正在尝试从网格中禁用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方法似乎正是我所需要的,所以也许我的语法错了,但我似乎无法让它工作。

有没有人有同样问题的经验?

3 个答案:

答案 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中的任何表单元素,从而阻止正确的内联编辑。