체크 박스가 true 일 때 행을 강조 표시하십시오.

체크 박스가 true 일 때 행을 강조 표시하십시오.

어떤 사람이 나를 도울 수 있습니까? 저는 jqgrid가 있습니다. 확인란이 사실이라면 행을 강조하고 싶습니다. 감사합니다!

이것은 내가이 프로젝트에서 만들고 싶은 것입니다 ...

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'
    }); 
}

내가 어떻게 할 수 있니? 누군가 나를 도울 수 있습니까?

해결법

1. ==============================

   1.나는 하이라이팅을 어떻게 구현할 수 있는지에 대한 해답을 하나 설명했다.

   나는 하이라이팅을 어떻게 구현할 수 있는지에 대한 해답을 하나 설명했다.

   jqGrid 버전 4.3.2에는 새로운 기능인 rowattr 콜백이 있습니다 (내 원래 제안 참조). 특히 여러분의 경우에 도입되었습니다. 그리드를 채우는 동안 그리드의 일부 행을 강조 표시 할 수 있습니다. 최고의 성능 이점을 얻으려면 gridview : true를 추가로 사용해야합니다. 그런데 나는 모든 jqGrid에서 true를 사용하도록 권장한다.

   rowattr 콜백의 사용법은 매우 쉽습니다.

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

   CSS 클래스 myAltRowClass는 강조 표시된 행의 배경색을 정의해야합니다.

   해당 데모는 다음에서 찾을 수 있습니다.

   데모에서는 강조 표시 만하고 행을 선택하지 않아야하기 때문에 다중 선택을 사용하지 않았습니다. 데모에서 사실입니다. 다중 선택의 경우 : 똑같은 방식으로 정확하게 작동합니다.

   내 답변 끝에서 열 템플릿을 사용하는 것이 좋습니다. 이 기능을 사용하면 코드를 더 짧고, 읽기 쉽고 유지하기 쉽습니다. 당신이해야 할 일은 다음과 같습니다 :

   cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}
   

   var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
           editoptions: {value: "1:0"}},
       myTextareaTemplate = {edittype: "textarea",
           editoptions: {size: "30", maxlength: "30"}};
   

   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},
   

from https://stackoverflow.com/questions/10529955/highlight-row-when-the-checkbox-is-true by cc-by-sa and MIT license