0

userDatajqGridにカスタム「フォーマッタ」を追加する回避策はありますか? 私はこの質問を見つけました、そしてそれは私を大いに助けます。以下は、jqGrid を設定するために使用するコードです。userDataにカスタムオブジェクトを入力し、jsonReaderそれをグリッドに設定することに注意してくださいloadComplete。合計列に個別の「フォーマッタ」を追加する必要があります。方法があれば教えてください。前もって感謝します。

var userDataTotals;
jq("#testGrid").jqGrid({
    url:'local',
    datatype: 'local',
    mtype: 'GET',
    colNames:[
              'rowId','unitId',
              '<fmt:message key="report.col1"/>',
              '<fmt:message key="report.col2"/>',
    ],
    colModel :[ 
        {name:'rowId', index:'rowId',hidden: true,sortable: true,key:true}, 
        {name:'unitId', index:'unitId',hidden: true,sortable: true,key:true}, 
        {name:'outboundReadyDate', index:'outboundReadyDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
        {name:'outboundDate', index:'outboundDate', width:80,align:"center",sorttype:'integer',formatter:dateOnlyFmatter,datefmt:'Y M d'},
    ],
    // this will enable the footer row to display totals
    footerrow : true,
    //userDataOnFooter : true,
    altRows : true,
    //to hide pager buttons
    pgbuttons:false,
    recordtext:'',
    pgtext:'',
    gridview: true,
    height:270,
    loadonce: true,
    sortname: 'rowId',
    sortorder: 'asc',
    viewrecords: true,
    rowNum:30000,
    loadComplete: function() {
        // This will increase the column header height ( to show two rows in the header)
        jq(".ui-jqgrid-sortable").css('white-space', 'normal');
        jq(".ui-jqgrid-sortable").css('height', 'auto');
        //Set the total values after load complete,otherwise
        // custom formatter will format the total value as well.

        jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false);

        //check the data type to avoid this code to  execute when the pageload
        var checkDatatype = myGrid.jqGrid("getGridParam","datatype");
        if(checkDatatype =='json' && myGrid.getGridParam('records') == 0){
            // when no records are displaying alert it to the user
            alert(noRecordsMsg);
        }

    },

    jsonReader : {
        root: "dtos",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "rowId",
        userdata :function(obj) {
            userDataTotals = {"outboundReadyDate":obj.totalOutBounded,
                "outboundDate":obj.totalOutBoundReady};
        }

    },


    //This will format the date of the grid (without displaying time)
    function dateOnlyFmatter (cellvalue, options, rowObject){
        var opts = options.colModel.formatoptions;
        if(cellvalue==null || cellvalue=='undefined'){
            return '-';
        }else{
            if(opts != undefined && rowObject.projectTypeName =='IOD'){
                return 'N/A';   
            }
            var now = new Date(cellvalue);
            return now.format('M j, Y');
        }
    }

カスタムdateFormat.jsを使用して日付をフォーマットします。

そしてjsonレスポンスは -

{
    "dtos": [
        {
            "unitId": 1068,
            "outboundDate": null,
            "outboundReadyDate": 1317619303000,
            "rowId": 13,
        },
        {
            "unitId": 1105,
            "outboundDate": 1317616970000,
            "outboundReadyDate": 1317617213000,
            "rowId": 14,
        }
    ],
    "totalOutBounded": 0,
    "totalOutBoundReady": 4,
    "rowTotal": 15,
    "returnCode": 0,
    "msg": ""
}

サーバーから「Java」オブジェクトをグリッドに直接渡しているため、私は使用sortTypeしました。並べ替えるには、に設定する必要がありますintegerDatesortTypeinteger

私が抱えている基本的な問題はIE8にあり、「userData」の合計値が表示されません。しかし、他のブラウザでは見ることができます。userData合計値を「ハイパーリンク」としてフォーマットする必要があります。

フォーマットせずuserDataにIE8で合計を見ることができます。そのため、列を使用せず'formatter'にカスタムフォーマッタを合計値に追加することを考えています( userData)。

4

1 に答える 1

2

多くの小さな構文エラーがあります：

  • 末尾のコンマ（'、}'など）の使用は構文エラーです。JSONデータとfromcolNamesおよびから末尾のコンマを削除する必要がありcolModelます。"rowId": 13,}とは"rowId": 14,}読めません。
  • を定義しますが、フッターを設定するjQuery("#testGrid")ために使用します。jQuery("#mainReportGrid")
  • のurl: 'local'場合、またはその他のurlパラメータは意味がありませんdatatype: 'local'。のurl場合、パラメータは無視されます（使用されません）datatype: 'local'。
  • myGrid投稿されたコードで定義していないものを使用します。var myGrid = jQuery("#testGrid");コードの最初のどこかで定義するか、イベントハンドラーvar myGrid = $(this);の最初で定義する必要があります。loadComplete
  • の拡張子メソッドを使用now.format('M j, Y')し、投稿しません。代わりにjqGridメソッドを使用できます。formatDatereturn $.fmatter.util.DateFormat(undefined, now, 'M j, Y', $.jgrid.formatter.date);
  • の代わりに、およびの代わりに、===常に厳密な等式を使用することをお勧めします。詳細については、たとえばここをお読みください。==!==!=
  • スクロールバーなしでjqGridを使用するheight: 'auto'か、使用することをお勧めします。scrollOffset: 0

  • 答えを読むことをお勧めします。説明されているバグ修正を使用する場合は、行jq("#mainReportGrid").jqGrid("footerData","set",userDataTotals,false);を行に変更できます

    myGrid.jqGrid("footerData", "set", myGrid.jqGrid('getGridParam', 'userData'), false);

    変数userDataTotalsは不要であり、userdataからのメソッドは次のuserdataように定義できます。

    userdata: function (obj) { return { outboundReadyDate: obj.totalOutBounded, outboundDate: obj.totalOutBoundReady }; }

あなたはここであなたのコードの修正されたバージョンを見ることができます。

于 2011-10-05T09:05:44.950 に答える