Zeile hervorheben, wenn das Kontrollkästchen wahr ist

Lesezeit: 4 Minuten

Zeile hervorheben wenn das Kontrollkastchen wahr ist
Jacx Toi

Kann mir jemand helfen, ich habe ein jqgrid und möchte die Zeile hervorheben, wenn das Kontrollkästchen wahr ist, danke !!

Geben Sie hier die Bildbeschreibung ein

das ist, was ich in diesem Projekt machen möchte …

function loadjqGrid(jsonGridData){
    var xaxis=1300
    var yaxis = $(document).height();
    yaxis = yaxis-500;
    getGrids();     
    $("#maingrid").jqGrid({
        url:'models/mod.quoservicetypedetails.php?ACTION=view',
        mtype: 'POST',
        datatype: 'xml',
        colNames:getColumnNames(jsonGridData),
        colModel :[ 
            {name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true,
            edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}},  
            {name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                  
            {name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                      
            {name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true,
            edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                    
            {name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},                  
            {name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},  
            {name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},     
            {name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            //If the GroupHeader is true the row background is yellow
            {name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
            {name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
        ],
        viewrecords: true,  
        rowNum:20,
        sortname: 'id', 
        viewrecords: true, 
        sortorder: "desc",
        height: yaxis,
        pager : '#gridpager',
        recordtext: "View {0} - {1} of {2}",
        emptyrecords: "No records to view",
        loadtext: "Loading...",
        pgtext : "Page {0} of {1}",         
        height: yaxis,
        width: xaxis,
        shrinkToFit: false,
        multiselect: true,
        editurl:'models/mod.quoservicetypedetails.php?ACTION=edit'
    }); 
}

Wie könnte ich das tun? Kann mir jemand helfen?

1646266509 333 Zeile hervorheben wenn das Kontrollkastchen wahr ist
Oleg

Ich habe in der Antwort eine gute Möglichkeit beschrieben, wie Sie die Hervorhebung implementieren können.

Version 4.3.2 von jqGrid hat neue Funktion – rowattr Rückruf (vgl mein ursprünglicher Vorschlag), die speziell für Fälle wie Ihren eingeführt wurde. Es ermöglicht Ihnen, einige Rasterreihen hervorzuheben beim Befüllen des Rasters. Um den besten Leistungsvorteil zu erzielen, sollten Sie verwenden gridview: true zusätzlich. Übrigens Ich empfehle Ihnen zu verwenden gridview: true in allen jqGrids.

Die Verwendung von rowattr Rückruf ist ganz einfach:

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // verify that the testing is correct in your case
        return {"class": "myAltRowClass"};
    }
}

Die CSS-Klasse myAltRowClass sollte die Hintergrundfarbe der hervorgehobenen Zeilen definieren.

Die entsprechende Demo finden Sie Hier:

Geben Sie hier die Bildbeschreibung ein

Weil Sie in Ihrer Demo nur die Zeilen hervorheben und nicht auswählen müssen, die ich nicht verwendet habe multiselect: true in meiner Demo. Im Falle von multiselect: true es funktioniert genau so.

Am Ende meiner Antwort möchte ich Ihnen empfehlen, Spaltenvorlagen zu verwenden. Die Funktion macht Ihren Code kürzer, lesbarer und pflegeleichter. Was Sie tun müssen, ist Folgendes:

  • Sie können allgemeine oder am häufigsten verwendete Einstellungen aus Spaltendefinitionen einschließen cmTemplete. In Ihrem Fall könnte es sein
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}
  • dann können Sie einige Variablen definieren, die allgemeine Eigenschaften beschreiben, die Sie häufig in einigen Spalten verwenden. Zum Beispiel:
var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
        editoptions: {value: "1:0"}},
    myTextareaTemplate = {edittype: "textarea",
        editoptions: {size: "30", maxlength: "30"}};
  • Danach können Sie verwenden myCheckboxTemplate und myTextareaTemplate Innen colModel was sich in Ihrem Fall auf Folgendes reduziert
colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
        editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate},
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate},
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate},
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate},
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
    //If the GroupHeader is true the row background is yellow
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},

  • @JacxToi: Gern geschehen! Wenn das Problem gelöst ist, können Sie “annehmen” die Antwort.

    – Oleg

    12. Mai 2012 um 9:33 Uhr


  • Fantastisch! Nochmals vielen Dank für deine Hilfe Oleg! Ich habe eine “Unterfrage”, die meiner Meinung nach mit dieser Frage zusammenhängt. Kannst du bitte sieh es dir hier an?

    – Überholspur

    7. November 2013 um 16:41 Uhr


  • @FastTrack: Deine Frage ist sehr gut! Ich denke, der beste Weg wird sein, den Code von zu ändern groupingRender anrufen rowattr, aber ich werde versuchen, eine Lösung für die vorhandene Version von jqGrid vorzubereiten. Ich komme später (voraussichtlich am Wochenende) auf deine Frage zurück.

    – Oleg

    7. November 2013 um 22:15 Uhr

  • @ Oleg Ausgezeichnet! Danke!

    – Überholspur

    8. November 2013 um 13:05 Uhr

917620cookie-checkZeile hervorheben, wenn das Kontrollkästchen wahr ist

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy