JqG​​rid，如何居中删除框？

Question

在我的 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";
          }};

Answer 1

您已经设置了delGridRow 方法的一些参数（参见代码中的{reloadAfterSubmit:false, url:...）。

我的建议是在delGridRow 参数列表中使用afterShowForm。 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，所以如果你按下“删除”按钮，就会显示错误。此外，您尝试放置在“act”列中的 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>

Answer 2

用于使 jqdialog 居中并显示在所选行附近
.ui-jqdialog{位置：固定；左：415px;} 这非常适合我的要求。 谢谢你