Question

我正在处理一个需要更新jqgrid中的整个行数据的任务。

以下是一个示例小提琴手：https://jsfiddle.net/99x50s2s/47/

在上面的小提琴手中，请更新一行，然后尝试向右滚动。

代码：

var $thisGrid = jQuery("#sg1");
$thisGrid.jqGrid({
    datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    height: 'auto',
    width: 400,
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
    colNames:["", 'Inv No', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {
            name: "Symbol", index: "Symbol", width: 70, align: 'center', frozen: true,
                formatter: function (cellValue, options, rowObject) {
                    return '<button class="btn btn-info btn-xs update" type="button" title="Update" >' +
                            '<span class="glyphicon glyphicon-remove-circle"></span> Update</button>';
                }
            },
        {name:'id',width:60, sorttype:"int"},   
        {name:'name', width:100},
        {name:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total', width:80,align:"right",sorttype:"float"},        
        {name:'note', width:150}        
    ],
    caption: "Test Data",
        onCellSelect: function (rowid,
        iCol,
        cellcontent,
        e) {
            if (iCol == 0) {
                var newdata = [
                {id:"1",name:"new test1 name for testing purpose",note:"new note1",amount:"500.00",tax:"50.00",total:"510.00"},    
                ];
                $thisGrid.jqGrid('setRowData', rowid, newdata[0]);
            }               
        }
}).jqGrid('setFrozenColumns');

var mydata = [
    {id:"1",name:"test1",note:"note1",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"2",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",name:"test3",note:"note3",amount:"400.00",tax:"25.00",total:"360.00"},
    {id:"4",name:"test4",note:"note4",amount:"500.00",tax:"60.00",total:"350.00"},
    {id:"5",name:"test5",note:"note5",amount:"600.00",tax:"70.00",total:"340.00"}
        ];

for(var i=0;i<=mydata.length;i++)
    $thisGrid.jqGrid('addRowData',i+1,mydata[i]);

enter image description here

我想知道如何解决这个问题？任何帮助表示赞赏。

注意：

jqGrid版本：4.6.0 应用：冷冻柱和细胞文本包装。

修改

带有解决方案的小提琴快照：

enter image description here

Answer 1

我过去曾写过你的版本4.6.0不支持使用冻结列编辑网格。

要使代码正常工作，每次更改网格内容后都必须执行许多操作。必须调整冻结div的位置并明确设置冻结div中每行的高度和宽度。您可以在代码中找到必须使用here和here。

的示例

现在有更简单的解决方案。如果你只是将版本jqGrid 4.6从github替换为当前的一个免费jqGrid代码

<link href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

然后您的代码按预期开始工作：https://jsfiddle.net/OlegKi/99x50s2s/48/

因此，您可以自己做很多事情，也可以获取已经执行此操作的代码。

尝试setRowData时jqGrid中出现意外行为

1 个答案: