2010-04-30 22 views
5

Sto provando a disabilitare la funzionalità di alcuni tipi da una griglia. Mi piacerebbe avere la possibilità di attivare/disattivare la funzionalità dei dischi singoli. Abilitare la funzione è piuttosto semplice:jqGrid disable kindblerows

jQuery("#list").jqGrid('sortableRows', { 
    update: function(event, ui) { updateOrder() } 
}); 

Ma la disattivazione della funzione si è dimostrata un po 'più difficile. Ho consultato le Integrazioni utente in cui sortableRows è documentato nella jqGrid Wiki:

www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods

e ha scoperto che "Il metodo è pienamente compatibile con il widget ordinabile di jQuery UI. " Così mi sono avventurato fuori alla documentazione ordinabili jQuery UI e trovato questo:

http://jqueryui.com/demos/sortable/

jQuery("#list").jqGrid('sortableRows', {disabled: true}); 

Il codice sopra disabilita semplicemente le righe. Così ho spostato sul metodo di destroy:

jQuery("#list").jqGrid('sortableRows', {destroy: true}); 

ma che non fa nulla. Sulla base della documentazione il metodo destroy sembra essere esattamente ciò di cui ho bisogno, quindi forse la mia sintassi è sbagliata ma non riesco a farlo funzionare.

Qualcuno ha esperienza con questo stesso problema?

risposta

8

Mi ci è voluto un po 'per capire questo, ma ho capito ed è piuttosto semplice. Questo è tutto quello che dovete fare:

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

mio istinto iniziale a cui rivolgersi documentazione jQuery UI ordinabili erano proprio su. La mia sintassi no. Ho scavato attraverso il file jqGrid JS ed ho trovato questo:

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

Che poi mi ha segnalato nella giusta direzione. Sembra che il torso sia il cardine dell'intero pasticcio.

Non che qualcuno se ne frega, ma ho pensato che dovrei condividere nel caso in cui qualcun altro ha un problema simile e la mia soluzione non è al 100% adatta per loro.

Chiunque, grazie per l'aiuto. Missione compiuta.

+0

Grazie. Mi piace il tuo approccio poiché fa tutto con una sola riga di codice, ma sacrifica la granularità delle righe indipendenti di Oleg. –

3

Si dovrebbe definire una classe CSS manichino come

.unsortable{} 

quindi chiamare sortableRows metodo jqGrid sostituzione di default items: '.jqgrow' parametro con

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

Ora si deve solo aggiungere la classe "non ordinabile" per le righe , che non vuoi permettere di essere ordinabile. Lasciateci avere nelle righe della griglia con id 'C28011' e 'C28015'. Poi per farlo è possibile utilizzare setRowData metodo jqGrid oppure chiamare addClass metodo jQuery direttamente:

jQuery("#list").setRowData ('C28011', false, 'unsortable'); 
jQuery("#C28015",jQuery("#list")[0]).addClass('unsortable'); 

AGGIORNATO (aggiungere un esempio di codice): Dopo aver letto del tuo commento Penso che sarebbe meglio se io postare qui un esempio di codice:

<!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> 

In questo codice che uso al dall'inizio funzionalità ordinabile standard di jQuery per consentire gli elementi sorta solo selezionati. Di quanto faccia lo stesso all'interno di jqGrid. Puoi vedere questo esempio lavorando qui http://www.ok-soft-gmbh.com/jqGrid/sortableRows.htm. Quindi, l'aggiunta di una classe fittizia "unsortable" a una riga segue la disattivazione della funzionalità "ordinabile". Rimozione di questo interruttore di classe "ordinabile" su. Puoi farlo in qualsiasi momento per righe di griglia selezionate o per tutti (jQuery("tr",jQuery("#list")[0]).addClass('unsortable');).

L'unica cosa che non si dovrebbe dimenticare: si dovrebbe chiamare setRowData o addClass dopo che i dati aggiunti nella griglia, ad esempio, all'interno di loadComplete funzione del jqGrid.

AGGIORNATO 2: Vedere the answer che descrive come disattivare l'ordinamento per righe specifiche della griglia.Usa possibilità esistenti nelle versioni più recenti di jqGrid e jQuery UI.

+0

Farò un vortice. Non seguo esattamente la logica, specialmente la parte # C28015, ma qualsiasi cosa vale la pena provare. – gurun8

+0

ogni '' ha lo stesso 'id' che si definisce nella riga dei dati. Per trovare '' con 'id = 'C28015'' dovresti usare il selettore'' # C28015''. Per cercare non in tutto il documento, puoi cercare solo nel corpo della tabella. 'jQuery (" # lista ")' punta al corpo della tabella 'jQuery (" # elenco ") [0]' è lo stesso, ma come elemento DOM e non oggetto jQuery. Quindi 'jQuery (" # C28015 ", jQuery (" # elenco ") [0]). AddClass ('unsortable')' aggiunge la classe ''unsortable'' allo' 'con' id =' C28015''. – Oleg

+0

@Joper: Potresti spiegare il contesto della tua domanda? E 'la domanda per la mia questa risposta? Dove ho usato questa affermazione? – Oleg

2

Come gurun8 ha scritto:

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

Questa grande opera. Ma, se si utilizza la modifica in linea, si potrebbe desiderare di fare

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

jqGrid sortableRows chiama la funzione disableSelection(), che non consente la selezione di qualsiasi elemento del modulo all'interno tbody della griglia, impedendo così una corretta modifica in linea.