0

我注意到，当我沿 w/delOptions 在 colModel 中添加第一列作为“操作”（删除操作）时，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>
4

1 回答 1

1

jqGrid 的所有列都只是列。列是隐藏还是用于 并不重要formatter: 'actions'。如果使用标准 JSON 格式（带有repeatitems: truein jsonReader），则"cell":[...]数组中的项目将colModel在读取期间仅映射到 in 列。

有一些方法可以解决这个问题。您可以修改您的服务器部分，以便该项目

"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数据的jsonReader: {repeatitems: true}另一种方法是使用. 您需要添加到列，添加到列等等。以同样的方式，您可以使用定义为函数。请参阅代码示例的答案。jsonmapcolModeljsonmap: "cells.0""Id"jsonmap: "cells.1""StockNumber"jsonmap

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

于 2013-05-24T20:25:48.200 回答