2016-05-06 7 views
0

Ich verwende jqGrid v 5.1.0 im Bootstrap-Stil. Wenn ich die Klasse "ui-state-disabled" auf einen Pager-Button (add) anwende, sieht die Schaltfläche deaktiviert aus, aber wenn sie angeklickt wird, wird das Ereignis noch verarbeitet. In früheren Versionen wird damit auch das Ereignis deaktiviert. Verwenden der neuesten FF und IE. Irgendwelche Ideen? Vielen Dank.jqGrid Klasse hinzufügen ui-state-disabled deaktiviert die Aktion nicht

Bearbeiten - Code-Snippet hinzufügen, das das Raster (untergeordnete Elemente) initialisiert. Beachten Sie die zweite Zeile vom Ende, wo die Schaltfläche zum Hinzufügen deaktiviert ist. Die Schaltfläche wird deaktiviert, aber wenn sie angeklickt wird, wird das Ereignis ausgeführt.

Edit 2 - Nach viel Schmerz und Tränen erstelle ich zwei Geigen. One zeigt die ordnungsgemäße Deaktivierung der Bearbeitungsschaltfläche und Two ist der gleiche Code, aber mit Bootstrap. Die Bearbeitungsschaltfläche ist nicht deaktiviert.

 // Water Source grid options... 
     var source_gridOptions = { 
       caption: 'Associated Water Source(s)', 
       data: sourceData, 
       datatype: 'local', 
       //url: "", // updated dynamically 
       //mtype: "GET", 
       styleUI : 'Bootstrap', 
       colModel: [ 
          { label: 'Source ID', name: 'ID', key: true, width: 28 }, 
          { label: 'Case ID', name: 'WATER_CASE_ID', width: 28, hidden: true }, 
          { label: 'Intake Name', name: 'INTAKE_SOURCE_NAME', width: 50 }, 
          { label: 'Intake Type', name: 'INTAKE_SOURCE_TYPE', width: 30 }, 
          { label: 'Source Type', name: 'SOURCE_TYPE', width: 20 }, 
          { label: 'Water Type', name: 'WATER_TYPE', width: 20 }, 
          { label: 'Notes', name: 'NOTES', width: 50 }, 
          { label: 'Verified', name: 'VERIFIED', width: 25 }, 
       ], 
       viewrecords: true, 
       height: 'auto', 
       width: initTabWidth, //dynamically set... 
       rowNum: 5, 
       pager: "#sourcePager", 
       gridComplete: function() { 

       } // end grid complete event 
     }; 
     // define CRUD options... 
     var source_editOptions = {}; 
     var source_addOptions = {}; 
     var source_deleteOptions = {}; 
     // init Water Source grid... 
     $("#sourceGrid").jqGrid(source_gridOptions).navGrid("#sourcePager",{edit:true,add:true,del:true,search:false},source_editOptions,source_addOptions,source_deleteOptions); 
     $("#add_sourceGrid").addClass('ui-state-disabled'); // <-- disable button 
    }); // end grid 
+0

Vielleicht könnten Sie ein jsfiddle/jsbin-Snippet zusammenstellen, um Ihr echtes Problem zu zeigen? (d. h. Abhängigkeiten, Markup und wie Sie eine Klasse auf eine Pager-Schaltfläche anwenden?) – miha

+0

@miha Ich habe das Code-Snippet pro Anfrage hinzugefügt. – spiderman

+1

Es ist immer noch sehr schwer zu wissen, was mit deinem Code los ist, da viel fehlt. Versuchen Sie etwas wie das [jsfiddle] (http://jsfiddle.net/amorris/ynw3c/) oder geben Sie dieses ein ... Vielleicht können Sie die Dokumentation zu [wie man eine Frage vorbereitet] (http://stackoverflow.com) konsultieren/hilfe/mcve). – miha

Antwort

1

Angesichts Ihrer Demo konnte ich es herausfinden. Sie müssen tatsächlich die Klasse ui-disabled hinzufügen, um zu arbeiten, nicht nur disabled, die Sie hinzugefügt haben.

Ich habe Ihre Geige hier geändert: http://jsfiddle.net/c6860ev8/16/

Sie in der Datei jqGrid Quelle sehen können, welche Klassen für Bootstrap-Integration hier erforderlich sind: https://github.com/tonytomov/jqGrid/blob/7901d7b7da969de1ca98282c60e335e013dc31ee/js/grid.base.js#L1035

hoffe, das hilft!

+0

Mit "ui-disabled" hinzufügen, das hat das Problem sicherlich behoben. Danke, dass du dir Zeit genommen hast, es herauszufinden. – spiderman

Verwandte Themen