Question

我注意到当我在colModel中添加第一列作为沿着w / delOptions的“action”（删除操作）时，jqGrid网格（电子表格）中的所有行都向左移动了1列而不匹配列标题。当我在colModel中取出第一列时，网格中的所有行都恢复正常。 挠我的头

执行以下操作时，请参阅前后效果...

1）在colNames数组中 - 删除“Actions”值。 2）在colModel数组中 - 删除包含“actDelete”

的第一个数组{}部分

基本上，将它设为13列网格而不是14列。

...谢谢

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

Answer 1

jqGrid的所有列都只是列。隐藏的列是用于formatter: 'actions'还是用于repeatitems: true，这一点并不重要。如果使用标准JSON格式（在jsonReader中使用"cell":[...]），则colModel数组中的项目将在阅读期间仅映射到"cell":["58456076","100429","1D4GP24R45B190639","2005","Dodge", ...]中的列。

有一些方法可以解决问题。您可以修改服务器部件以便项目

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

将更改为

formatter: 'actions'

很明显，这些变化很好，因为datatype:'json'与其他列有其他意义。

如果您使用url:'../websrvc/jqGrid.ashx'和beforeProcessing从服务器加载数据，那么您可以使用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 } }进行相同的修改，而无需更改服务器代码。例如，您可以使用unshift方法。代码就像

jsonReader: {repeatitems: true}

从服务器读取原始JSON数据的另一种方法是在jsonmap内使用colModel和jsonmap: "cells.0"属性。您需要将"Id"添加到列jsonmap: "cells.1"，将"StockNumber"添加到列jsonmap，依此类推。以同样的方式，您可以使用key: true定义为函数。有关代码示例，请参阅the answer。

我建议您在'Id'列中添加id: "Id"属性，并将jsonReader属性添加到"id":1。我希望该值对于网格的所有行都是唯一的。在这种情况下，列中的值将用作rowid。在这种情况下，将忽略值gridview: true。您也应该取消注释{{1}}。

当第一个colModel具有（formatoptions：{delOptions：...}）时，jqGrid的列/行数据偏移了1列

1 个答案: