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，所以如果按“删除”按钮，将显示错误。此外，您尝试放入“行为”列的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;} 这完全符合我的要求。谢谢

JqGrid，如何中心删除框？

2 个答案:

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

2 个答案:

JqGrid，如何中心删除框？