在我的 Jqgrid 中，我有一个包含删除链接的列，一切正常，除了左上角一直弹出删除确认框。我想让确认框位于 jqgrid 的中心，而不是在左上角。

{ name: 'act', index: 'act', width: 150, align: 'center', sortable: false}],

          gridComplete: function () {

              var rows = jQuery("#list").jqGrid('getGridParam','selrow');
              var ids = jQuery("#list").jqGrid('getDataIDs');
              var gr = jQuery('#list'); gr.setGridHeight("auto", true);
              for (var i = 0; i < ids.length; i++) {
                  var cl = ids[i];
                  be = "<a href='#' style='height:25px;width:120px;' type='button' value='Slet' onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',{reloadAfterSubmit:false, url:'@Url.Action("deleteRow")'}); return false;\">Slet </>";
                  jQuery("#list").jqGrid('setRowData', ids[i], { act: be });   
              }
          },

更新

be = "<a href='#' style='height:25px;width:120px;' type='button' value='Slet' onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "', myDelParameters); return false;\">Slet </>";

我的全局变量的代码:

myDelParameters = {reloadAfterSubmit:false, url:'@Url.Action("deleteRow")',  beforeShowForm: function(form) {
              // "editmodlist"
      var dlgDiv = jQuery("#list").jqGrid("#delmodlist" + grid[0].id);
              var parentDiv = dlgDiv.parent(); // div#gbox_list
              var dlgWidth = dlgDiv.width();
              var parentWidth = parentDiv.width();
              var dlgHeight = dlgDiv.height();
              var parentHeight = parentDiv.height();
              // TODO: change parentWidth and parentHeight in case of the grid
              //       is larger as the browser window
              dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
              dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
          }};

最佳答案

您已经设置了 delGridRow 的一些参数方法(请参阅代码中的 {reloadAfterSubmit:false, url:...)。

我建议你使用 afterShowForm在 delGridRow 的列表中参数。 afterShowForm的实现可能就像 the old answer , 但使用 "#delmodlist" ( "#delmod" + grid[0].id ，其中 var grid = $("#list") )而不是 $("#editmod" + grid[0].id) .

另一个更简短的实现形式可能是关于 jQuery UI Position :

afterShowForm = function ($form) {
    $form.closest('div.ui-jqdialog').position({
        my: "center",
        of: $("#list").closest('div.ui-jqgrid')
    });
}

在the demo我将此类功能用于所有添加/编辑和删除表单。

已更新:在我看来，您遇到了实现问题。我做了 one more demo您可以轻松修改为您想要的内容。我没有设置任何 editurl ，因此如果您按“删除”按钮，将显示错误。此外，您尝试放置在“行为”列中的 HTML 片段是 <a> 的组合和 <button>设置。因为我不知道你想要什么，所以我只放了 <a>在“行为”栏中。我希望现在您可以轻松修改我的演示，使您的程序正常运行。

这是来自 my demo 的代码架构你可以使用:

<script type="text/javascript">
//<![CDATA[
    var myDelParameters = {
        reloadAfterSubmit: false,
        //url:'@Url.Action("deleteRow")',
        afterShowForm: function ($form) {
            'use strict';
            $form.closest('div.ui-jqdialog').position({
                my: "center",
                of: $("#list").closest('div.ui-jqgrid')
            });
        }
    };
    $(document).ready(function () {
        var grid = $("#list"),
            centerForm = function ($form) {
                $form.closest('div.ui-jqdialog').position({
                    my: "center",
                    of: grid.closest('div.ui-jqgrid')
                });
            },
            getColumnIndexByName = function (mygrid, columnName) {
                var cm = mygrid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
                for (; i < l; i += 1) {
                    if (cm[i].name === columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

        grid.jqGrid({
            colModel: [
                ...
                {name: 'action', index: 'action', width: 70, align: 'center', sortable: false},
                ...
            ],
            ...
            loadComplete: function () {
                var iCol = getColumnIndexByName($(this), 'action'), iRow, row,
                    rows = this.rows,
                    cRows = rows.length;

                for (iRow = 0; iRow < cRows; iRow += 1) {
                    row = rows[iRow];
                    if ($.inArray('jqgrow', row.className.split(' ')) > 0) {
                        $(row.cells[iCol]).html("<a href='#' style='height:25px;width:120px;' onclick=\"jQuery('#list').jqGrid('delGridRow','" +
                            row.id + "',myDelParameters); return false;\">Del</>");
                    }
                }
            });
    });
//]]>
</script>

关于javascript - JqG​​rid，如何居中删除框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7230059/