Question

当前要求是按钮单击我通过ajax获取json数据，其中包含有关表头和数据的信息。我想使用jqgrid显示表数据，所以我正在使用以下代码准备jqgrid：

$("#fixedId").jqGrid({ 
        datatype: 'clientSide',
        colNames:colName,//from json response
        colModel :colModels,//from json response
                   pager: '',
                   shrinkToFit:true,
                   autowidth:true,
                   rowNum:10,
                   rowList:[10,20,30],
                   emptyrecords: "Empty records",
                   viewrecords: true,
                   width: '100%',
                   height: '100%',
                   altRows:true,
                   scrollOffset: 0,
                   gridview: true,
                   rownumbers:false,
                   multiselect:false,
                   multiboxonly:false,
                   caption: ''         
    }); 

    $("#"+tableId).jqGrid('gridResize', { minWidth: 450, minHeight: 200 });

我正在使用jqgrid addRowData函数向这个新创建的表添加数据。

所以第一次工作正常。现在当我得到一个新的json响应通过ajax绘制这个新表的详细信息时，我必须删除旧表，所以删除我试过的旧表数据

1）$("#fixedId").remove(); 使用..重新创建表标签。

$("#tableParent").append('<table id=fixedId><tr><td /></tr></table>');

然后重新调用前面的代码来创建带有新标题和数据的新表，但是这个新标题，数据表没有在屏幕上绘制。屏幕仍然是空的，我无法在屏幕上看到任何表格。

2）我试过

$("#gbox_fixedId").remove();

重复步骤1以生成新表并添加数据..同样的结果......我在屏幕上看不到任何表格。

3）我试过

$("#gbox_fixedId").find(".ui-jqgrid-htable").remove();

这个选项正在运行，但是经过3-4次重新绘制新表后，我可以看到每个被绘制的表看起来有点失真，经过一些更多的重绘后，它变得难以使用。

任何解决方案如何删除旧的jqgrid并创建新的/干净的jqgrid以使其顺利运行？

Answer 1

在致电$("#fixedId").jqGrid();之前，我假设你有这个结构：

<div id="tableParent">
    <table id="fixedId"></table>
</div>

然后，如果你在调用jqGrid后检查你的dom，你会注意到 fixedId 不再是 tableParent 的直接子节点，因为jqGrid将它转换为其他元素，所以要删除你的网格，你需要打电话：

$("#tableParent").empty();

Answer 2

jqGrid创建一些元素（div）并将表包装在这些div中。调用$("#fixedId").remove();不会破坏那些额外的元素。你应该使用

$("#tableParent").children().remove()

这将完全破坏jqGrid，因此您可以创建一个新的jqGrid。确保#tableParent中没有任何其他元素，否则它也会消失

如何动态生成jquery jqgrid？

2 个答案: