Fatal编程技术网
  • jqgrid/
  • jqGrid'；当第一个colModel具有时，s列/行数据偏移了1列（formatoptions:{delOptions:…}）

jqGrid'；当第一个colModel具有时，s列/行数据偏移了1列（formatoptions:{delOptions:…}）

jqgrid

jqGrid'；当第一个colModel具有时，s列/行数据偏移了1列（formatoptions:{delOptions:…}）,jqgrid,jqgrid-formatter,Jqgrid,Jqgrid Formatter,我注意到，当我在colModel中沿w/delOptions添加第一列作为“action”（删除操作）时，jqGrid网格（电子表格）中的所有行都向左移动了1列，并且与列标题不匹配。当我取出colModel中的第一列时，网格中的所有行都恢复正常搔头 执行以下操作时，请查看前后效果 1） 在colNames数组中-删除“Actions”值。 2） 在colModel数组中-删除包含“actDelete”的第一个数组{}部分 基本上，将其设置为13列网格，而不是14列网格 谢谢 <html&g

我注意到，当我在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>


测试向量
/*2013年5月13日-（覆盖CSS属性以使列标题文本环绕并垂直对齐*/
th.ui-th列div{空白：正常！重要；高度：自动！重要；填充：2px；}
.ui jqgrid.ui jqgrid调整大小{高度：100%！重要；}
/*2013年5月13日-（覆盖CSS属性以使列标题文本环绕并垂直对齐*/
.ui jqgrid tr.jqgrow td{空白：正常；}
$（文档）.ready（函数（）{
var jsonData={“第页”：“1”，“总计”：“4”，“记录”：“35”，“行”：[{“id”：1，“单元格”：[“58456076”，“100429”，“1D4GP24R45B190639”，“2005”，“道奇”，“大篷车乘客”，“小型货车4D”，“110544”，“5040.00”，“2010-10-21”，“2178.60”，“7218.60”，“945”}]}]}；var jqgridSpreadsheetId='MyInventoryJqgrid\电子表格'；
var jqgridPagerId='MyInventoryJqgrid_Pager'；
$（'#'+jqgridSpreadsheetId）.jqGrid({
数据类型：“jsonstring”，
datastr:jsonData，
ColName:[“操作”、“Id”、“库存编号”、“VIN”、“年份”、“品牌”、“型号”、“修剪”、“里程数”、“采购价格”、“库存日期”、“维修成本”、“总成本”、“库存天数”]，
colModel：[
//http://stackoverflow.com/questions/14732234/how-to-delete-row-in-jqgrid...
{name:'actDelete'，index:'actDelete'，width:50，align:'center'，sortable:false，formatter:'actions'，formattoptions:{keys:false，editbutton:false，delOptions:{url:'}}，
{name:'Id'，index:'Id'，sorttype:'int'，宽度：0，align:'left'，hidden:true，}，
{name:'StockNumber'，index:'StockNumber'，sorttype:'text'，宽度：100，对齐：'center'，搜索选项：{sopt:['eq'，ne']}，
{名称：'Vin'，索引：'Vin'，排序类型：'text'，宽度：140，对齐：'center'，搜索选项：{sopt:['eq'，'ne']}，
{名称：'Year'，索引：'Year'，排序类型：'int'，宽度：50，对齐：'center'，搜索选项：{sopt:['eq'，'ne']}，
{name:'Make'，index:'Make'，sorttype:'text'，宽度：80，对齐：'center'，搜索选项：{sopt:['eq'，ne']}，
{名称：'Model'，索引：'Model'，排序类型：'text'，宽度：80，对齐：'center'，搜索选项：{sopt:['eq'，'ne']}，
{name:'Trim'，index:'Trim'，sorttype:'text'，width:100，align:'center'，searchoptions:{sopt:['eq'，ne']}，
{name:'miliness'，index:'miliness'，sorttype:'int'，width:60，align:'center'，formatter:'number'，formattoptions:{decimalSeparator:'，'，decimalPlaces:0，defaultValue:'0'}，
{name:'PurchasePrice'，index:'PurchasePrice'，sorttype:'currency'，width:80，align:'center'，formatter:'currency'，formattoptions:{decimalSeparator:'，'千分位分隔符：'，'，decimalPlaces:2，defaultValue:'0.00'，前缀：'$'，后缀：'}，
{name:'StockDate'，index:'StockDate'，sorttype:'date'，width:90，align:'center'，formatter:'date'，formattoptions:{newformat:'m/d/Y'}，
{name:'RepairCost'，index:'RepairCost'，sorttype:'currency'，width:80，align:'center'，formatter:'currency'，formattoptions:{decimalSeparator:'，'千分位分隔符：'，'，'小数位数：2，默认值：'0.00'，前缀：'$'，后缀：'}，
{name:'TotalCost'，index:'TotalCost'，sorttype:'currency'，width:80，align:'center'，formatter:'currency'，formattoptions:{decimalSeparator:'，'千分位分隔符：'，'小数点：2，defaultValue:'0.00'，前缀：'$'，后缀：'}，
{name:'DaysInInventory'，index:'DaysInInventory'，sorttype:'int'，width:65，align:'center'，formatter:'number'，formattoptions:{decimalSeparator:''，thousandsSeparator:'，'，decimalPlaces:0，defaultValue:'1'}
],
localReader:{page:function（object）{return object.page！==未定义的？obj.page:“0”；}，
寻呼机：“#”+jqgridPagerId，
rowNum:10，
行列表：[5,10,20,50]，
sortname:'StockDate'，sortorder:'desc'，
viewrecords：是的，
//gridview：没错，
标题：“库存”，
宽度：1022，
shrinkToFit：错，
身高：400，
可排序：是的，
分组：对，
有一次：是的，
loadError:function（xhr，st，err）{alert（“发生错误，请重试或将此错误通知网站管理员”）；}，
});
});
jqGrid的所有列都只是列。隐藏中的列是否用于
格式化程序：“操作”
并不重要。如果使用标准JSON格式（在
jsonReader
中使用
repeatitems:true
），则可以从
的“单元格”[…]
数组在读取过程中将仅映射到
colModel
中的列

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

“单元格”：[“58456076”、“100429”、“1D4GP24R45B190639”、“2005”、“道奇”、…]
将更改为

“单元格”：[“”、“58456076”、“100429”、“1D4GP24R”