需要改变jqgrid的位置答案

【问题标题】：Need to change the position of jqgrid需要改变jqgrid的位置
【发布时间】：2012-11-14 21:44:54
【问题描述】：

我必须将 jqgrid 放置在不同的位置，而不是默认的左上角位置。我尝试了一些方法，但它不起作用。我在这里包含了我的代码.. 请检查一下并给我一个解决方案..

这是html代码：

<div>
    <table id="table" style="border-spacing: 7px 7px; margin-left: 5px">
        <tr>
            <td>
                <input style="margin-left: 10px;" type="button" value="Add" id="btn_addusers" />
            </td>
        </tr>
    </table>
    <table id="users_grid" style="left: 300px">
    </table>
</div>

这是我的 js 代码：

$(document).ready(function() {
    $("#btn_addusers").click(function() {
        $("#users_grid").clearGridData(true).trigger("reloadGrid");
        $("#users_grid").jqGrid({
            datatype: "local",
            height: 'auto',
            width: 'auto',
            colNames: ['User ID', 'User Name'],
            colModel: [
        { name: 'userid', width: 60 },
        { name: 'username', width: 120 }

    ],

            caption: "Users in Private space"
        });
        var mydata = [
        { userid: "312171", username: "D, Gnana Xavier" },
        { userid: "311763", username: "Sangeetha" },
        { userid: "312185", username: "Amrutha" },
        { userid: "312186", username: "Ramesh" }
        ];
        for (var i = 0; i <= mydata.length; i++)
            $("#users_grid").jqGrid('addRowData', i + 1, mydata[i]);

    });
});

【问题讨论】：

我不建议你使用addRowData。这是填充网格的最慢方法。而不是你应该移动mydata数组的定义在创建网格并将data: mydata和gridview: true添加到jqGrid选项。此外，我建议您将id 属性添加到mydata 的每个项目中。 id 属性将用作网格的<tr> 元素（行）的id。
@Oleg 感谢您的建议..这确实是一个有用的信息..将来会避免这种情况..
@Oleg 我需要另一个与 jqgrid 相关的帮助.. 你能看看这个stackoverflow.com/questions/13411956/…
抱歉，我不太明白你想做什么。例如，您可以使用addRowData 将行添加到网格。或者，您可以使用navGrid 和inlineNav 将导航器添加到网格。在这种情况下，您可以实现 jqGrid 中集成的“添加”按钮。
@Oleg 正如你在之前的 cmets 中提到的那样避免使用 addRowData.. 那就是我尝试过的那样

标签： jquery asp.net css jqgrid

【解决方案1】：

jqGrid 在表格元素上创建许多额外的外部 div。所以你应该把<table>元素放在<div>里面，你可以使用外部div的样式来改变表格的位置。例如

<div style="margin-left: 300px">
    <table id="users_grid"></table>
</div>

【讨论】：

我需要另一个与 jqgrid 相关的帮助.. 你能看看这个stackoverflow.com/questions/13411956/add-new-row-to-a-jqgrid

【解决方案2】：

好的，正如@aristos 建议的那样。我试图解释我的答案。
用户在div中的position=relative如下

<div style="position:relative;">
    <table id="table" style="border-spacing: 7px 7px; margin-left: 5px">
       <tr>
          <td>
            <input style="margin-left: 10px;" type="button" value="Add" id="btn_addusers" />
          </td>
       </tr>
     </table>
    <table id="users_grid" style="left: 300px;position:absolute!important;">
    </table>
</div>

注意

如果父容器的位置是相对的position:relative
并且内容的位置是绝对，那么它可以在容器中移动。
现在您可以使用 left 和 top 属性来移动表格。
但它不会超出 div。

【讨论】：

@ShekharKumar：您的建议适用于常见的<table> 元素，但jqGrid 修改并将<table> 作为另一个具有@ 的外部div 的子元素987654324@。因此，position:absolute 的使用将导致根本看不到表格的内容（主体）。因此，您的建议不适用于 jqGrid 的使用情况。