2010-04-30 33 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在任何形式的元素的選擇,從而影響正常在線編輯。