0

colModel の 1 列目を delOptions に沿って「アクション」(削除アクション) として追加すると、jqGrid グリッド (スプレッドシート) のすべての行が 1 列左に移動し、列ヘッダーと一致しないことに気付きました。colModel の 1 列目を取り出すと、グリッド内のすべての行が正常に戻りました。 頭を掻く

次の操作を行ったときの前後の効果を確認してください...

1) colNames 配列内 - 「Actions」値を削除します。2) colModel 配列内 - 「actDelete」を含む最初の配列 {} セクションを削除します

基本的には、14 列ではなく 13 列のグリッドにします。

ありがとう...

<html>
<head>
<title>Testcase</title>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-v1.10.3.themes/base/minified/jquery-ui.min.css" />  <!-- JQuery UI Plugin -->
<link rel="stylesheet" type="text/css" href="../css/jqgrid-v4.5.0/ui.multiselect.css" />  <!-- Column Chooser for jqGrid Plugin -->
<link rel="stylesheet" type="text/css" href="../css/jqgrid-v4.5.0/ui.jqgrid.css" />  <!-- jqGrid Plugin -->
<style type="text/css">
    /* 05/13/2013 - (Override CSS properties to make Column header be text-wrapped & vertical-aligned */
    th.ui-th-column div {white-space:normal !important; height:auto !important; padding:2px;}
    .ui-jqgrid .ui-jqgrid-resize {height: 100% !important;}
    /* 05/13/2013 - (Override CSS properties to make Column header be text-wrapped & vertical-aligned */
    .ui-jqgrid tr.jqgrow td {white-space:normal;}
</style>
<script type="text/javascript" src="../scripts/jquery-v2.0.0.min.js"></script>
<script src="../scripts/jquery-ui-v1.10.3/minified/jquery-ui.min.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/ui.multiselect.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../scripts/jqgrid-v4.5.0/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var jsonData = {"page":"1","total":"4","records":"35","rows":[{"id":1,"cell":["58456076","100429","1D4GP24R45B190639","2005","Dodge","Grand Caravan Passenger","Minivan 4D","110544","5040.00","2010-10-21","2178.60","7218.60","945"]}]};            var jqgridSpreadsheetId = 'MyInventoryJqgrid_Spreadsheet';
        var jqgridPagerId = 'MyInventoryJqgrid_Pager';

        $('#' + jqgridSpreadsheetId).jqGrid({
            datatype: 'jsonstring', 
            datastr: jsonData,
            colNames: ['Actions', 'Id', 'Stock Number', 'VIN', 'Year', 'Make', 'Model', 'Trim', 'Mileage', 'Purchase Price', 'Stock Date', 'Repair Cost', 'Total Cost', 'Days In Inventory'],
            colModel: [
                       //http://stackoverflow.com/questions/14732234/how-to-delete-row-in-jqgrid...
                       { name: 'actDelete', index: 'actDelete', width: 50, align: 'center', sortable: false, formatter: 'actions', formatoptions: { keys: false, editbutton: false, delOptions: { url: '' } } },
                       { name: 'Id', index: 'Id', sorttype: 'int', width: 0, align: 'left', hidden: true, },
                       { name: 'StockNumber', index: 'StockNumber', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Vin', index: 'Vin', sorttype: 'text', width: 140, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Year', index: 'Year', sorttype: 'int', width: 50, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Make', index: 'Make', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Model', index: 'Model', sorttype: 'text', width: 80, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Trim', index: 'Trim', sorttype: 'text', width: 100, align: 'center', searchoptions: { sopt: ['eq', 'ne'] } },
                       { name: 'Mileage', index: 'Mileage', sorttype: 'int', width: 60, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '0' } },
                       { name: 'PurchasePrice', index: 'PurchasePrice', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'StockDate', index: 'StockDate', sorttype: 'date', width: 90, align: 'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
                       { name: 'RepairCost', index: 'RepairCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'TotalCost', index: 'TotalCost', sorttype: 'currency', width: 80, align: 'center', formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '0.00', prefix: '$', suffix: '' } },
                       { name: 'DaysInInventory', index: 'DaysInInventory', sorttype: 'int', width: 65, align: 'center', formatter: 'number', formatoptions: { decimalSeparator: '', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '1' } }
            ],
            localReader: { page: function (object) { return object.page !== undefined ? obj.page : "0"; } },
            pager: '#' + jqgridPagerId,
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'StockDate', sortorder: 'desc',
            viewrecords: true,
            //gridview: true,
            caption: 'Inventory',
            width: 1022,
            shrinkToFit: false,
            height: 400,
            sortable: true,
            grouping: true,
            loadonce: true,
            loadError: function (xhr, st, err) { alert("An error had occurred, please try again or notify webmaster of this error"); },
        });
    });
</script>  
</head>
<body>
<div id="divWebLayout1">
    <table id="MyInventoryJqgrid_Spreadsheet"></table>
    <div id="MyInventoryJqgrid_Pager" style="text-align:center;"></div>
</div>
</body>
</html>
4

1 に答える 1

1

jqGrid のすべての列は単なる列です。列が非表示になっているか、または に使用されているかは重要ではありませんformatter: 'actions'。標準の JSON 形式 ( repeatitems: trueinを使用) を使用する場合、読み取り中に配列jsonReaderの項目が"cell":[...]列にマップされるだけです。colModel

問題を解決するにはいくつかの方法があります。サーバー部分を変更して、アイテムを

"cell":["58456076","100429","1D4GP24R45B190639","2005","Dodge", ...]

に変更されます

"cell":["","58456076","100429","1D4GP24R45B190639","2005","Dodge", ...]

formatter: 'actions'他の列とはまったく別の意味を持っているため、そのような変更があまり良くないことは明らかです。

を使用してサーバーからデータをロードするdatatype:'json'とurl:'../websrvc/jqGrid.ashx'、 を使用して、サーバー コードを変更せずbeforeProcessingに同じ変更を行うことができます。たとえば、unshiftメソッドを使用できます。コードは次のようになります

beforeProcessing: function (data) {
    var rows = data.rows,
        l = rows ? rows.length : 0,
        i;

    for (i = 0; i < l; i++) {
        rows[i].cell.unshift(""); // insert empty string as the first element
    }
}

サーバーから元の JSON データを読み取るもう 1 つの方法は、内のjsonReader: {repeatitems: true}およびjsonmapプロパティを使用することですcolModel。jsonmap: "cells.0"列に追加したり、列"Id"に追加jsonmap: "cells.1"したりする必要があります"StockNumber"。jsonmap同じように、関数として定義されたものを使用できます。コード例については、回答を参照してください。

追加のプロパティkey: trueを'Id'列に含め、プロパティをに追加することをお勧めします。値がグリッドのすべての行で一意であることを願っています。この場合、列の値が行 ID として使用されます。この場合、値は無視されます。あなたもコメントを外すべきです。id: "Id"jsonReader"id":1gridview: true

于 2013-05-24T20:25:48.200 に答える