Javascript JqGrid，如何将删除框居中？

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

---

您已经设置了该方法的一些参数（请参见代码中的

{reloadeaftersubmit:false，url:…

）

我建议您在参数列表中使用

afterShowForm

。

afterShowForm

的实现可能与中类似，但使用

“#delmodlist”

（

“#delmod”+grid[0].id

，其中

var grid=$（“#list”）

）而不是

$（“#editmod”+grid[0]/code>

另一种更简短的实施形式可以是：

在中，我将此功能用于所有添加/编辑和删除表单

已更新：在我看来，您的实现存在问题。我制作了一个可以轻松修改为所需内容的工具。我没有设置任何
editurl
，因此如果您按“删除”按钮将显示错误。此外，您尝试放置在“act”列中的HTML片段是
的组合，您可以使用：

<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>


// 0) {
$（row.cells[iCol]）.html（“Del”）；
}
}
});
});
//]]>
用于将jqdialog居中并在选定行附近显示

.ui jqdialog{位置：固定；左：415px；}
这对我的要求来说是完美的。
谢谢你
我就是穿不合身。。。。它应该如何在jQuery（“#list”）.jqGrid（'navGrid'，“#page“，{edit:false，add:false，del:false}，{beforeShowForm:function（form）{}}中查看@Timsen：是的，您可以使用内联函数定义，但是在
reloadeAfterSubmit:false
附近的某个地方：例如
{reloadeAfterSubmit:false，url:'@url.Action（“deleteRow”），beforeShowForm:function（$form）{…}
。还有一种可能性是您定义了全局函数（在顶层定义）您还可以定义全局对象
var myDelParameters={reloadAfterSubmit:false，url:'@url.Action（“deleteRow”）'，beforeShowForm:function（$form）{…}；
并使用
…cl+“，myDelParameters）；return false；
不起作用，当我创建全局变量并将其放入我的链接中时，根本不调用操作。我在main中更新了代码，您可以看到我的全局变量和新链接代码您有剪切粘贴错误。语句
var dlgDiv=jQuery（#list”）.jqGrid（#delmodlist“+grid[0].id）
是错误的。它应该是
var-dlgDiv=$（“#delmodlist”）；
或
var-grid=$（“#list”），dlgDiv=$（“#delmod”+grid[0].id）；
。我修改了答案的文本以更清楚地描述。它现在移动了，但移到了最上面的中心：D
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";
          }};

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

<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>