2010-04-30 34 views
5

我试图从网格禁用sortablerows功能。我希望能够打开/关闭sortablerows功能。启用该功能非常简单:jqGrid禁用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方法似乎正是我需要的,所以也许我的语法是错误的,但我似乎无法让它工作。

有没有人有这个问题的经验?

回答

8

我花了一段时间来弄清楚这一点,但我明白了,这很简单。这是你需要做的全部事情:

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

我最初的直觉转向jQuery UI可排序文档是正确的。我的语法不是。我通过jqgrid JS文件挖掘,发现这个:

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

然后,然后指出我在正确的方向。看起来tbody是整个混乱的铰链销。

不是任何人都在乎,但我认为我应该分享以防别人有类似的问题,我的解决方案不是100%适合他们。

Anywho,谢谢你们的帮助。任务完成。

+0

谢谢。我喜欢你的方法,因为它用一行代码完成所有的事情,但是确实牺牲了Oleg的独立行的粒度。 – 2012-08-03 00:01:57

3

你应该定义一个虚拟的CSS类像

.unsortable{} 

然后调用的jqGrid替换默认items: '.jqgrow'参数与

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

现在你应该只添加类“不可排序”对行的sortableRows方法,你不希望被排序。让我们在网格行中输入ids'C28011'和'C28015'。然后,这样做既可以使用的jqGridsetRowData方法或调用jQueryaddClass方法直接:

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');)执行此操作。

,你应该不会忘记的唯一的事情:在网格中添加数据后,你应该叫setRowDataaddClass,例如,jqGrid的的loadComplete函数中。

UPDATED 2:请参阅the answer,其中描述了如何禁用网格特定行的排序。它使用更新版本的jqGrid和jQuery UI中存在的可能性。

+0

我会给这个旋转。我并不完全遵循逻辑,尤其是#C28015部分,但任何事情都值得一试。 – gurun8 2010-05-06 01:28:44

+0

每个''具有与您在数据行中定义的相同的'id'。要找到''并且'id ='C28015',你应该使用'#C28015'选择器。要不在整个文档中搜索,只能在表格中搜索。 'jQuery(“#list”)'指向表体'jQuery(“#list”)[0]'是相同的,但是作为DOM元素而不是jQuery对象。所以'jQuery(“#C28015”,jQuery(“#list”)[0]).addClass('unsortable')'将类'unsortable'添加到'',id ='C28015''。 – Oleg 2010-05-06 06:27:54

+0

@Joper:你能解释一下你的问题的背景吗?这是我的这个答案的问题吗?我在哪里使用这种说法? – Oleg 2011-08-22 12:42:35

2

由于gurun8写道:

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

这个伟大的工程。 但是,如果使用内联编辑,你可能想要做

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

的jqGrid sortableRows调用disableSelection()函数,它不允许网格的TBODY在任何形式的元素的选择,从而影响正常在线编辑。