web-dev-qa-db-ja.com

チェックボックスがtrueの場合、行を強調表示します

誰かが私を助けることができますか、私はjqgridを持っています、そしてチェックボックスが真の場合に行を強調表示したいので、ありがとう!!

enter image description here

これが私がこのプロジェクトで作りたいものです...

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

どうすればこれを行うことができますか？誰かが私を助けることができますか？

phpjavascriptjqgridjqgrid-php
19
Jacx Toi

答え ハイライトを実装する良い方法の1つで説明しました。

JqGridのバージョン4.3.2には、新しい機能--rowattrコールバック（ 私の元の提案 を参照）があります。これは、特にあなたのような場合に導入されました。グリッドのいくつかの行を強調表示できます塗りつぶし中グリッドの。最高のパフォーマンス上の利点を得るには、さらにgridview: trueを使用する必要があります。ちなみにすべてのjqGridsでgridview: 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は、強調表示された行の背景色を定義する必要があります。

あなたが見つけることができる対応するデモ ここ ：

enter image description here

デモでは、デモでmultiselect: trueを使用しなかった行を強調表示し、選択する必要がないためです。 multiselect: trueの場合、まったく同じように機能します。

私の回答の最後に、 column templates を使用することをお勧めします。この機能により、コードが短くなり、読みやすくなり、保守が容易になります。あなたがする必要があることは次のとおりです：

  • cmTempleteには、列定義の一般的な設定または最も頻繁に使用される設定を含めることができます。あなたの場合、それは
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"}};
  • その後、myCheckboxTemplate内でmyTextareaTemplateとcolModelを使用できます。これにより、次のようになります。
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},
43
Oleg