Question

我正在使用带有jqgrid的MVC 4 + EF 4.1。我是HTML＆amp; Javascript和我正在努力尝试在jqgrid中打开自定义编辑jquery对话框。如果你有更好的方法来实现我想要的行为，那么欢迎他们。

我有以下jquery对话框脚本，附加到class ='openDialog'，已经可以正常用于其他目的：

  $.ajaxSetup({ cache: false });

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("<div></div>")
            .addClass("dialog")
            .attr("id", $(this).attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                height: $(this).attr("data-dialog-alt"),
                width: $(this).attr("data-dialog-larg"),
                autoResize: $(this).attr("data-dialog-autosize"),
                position: 'top',
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                modal: true,
                buttons: { "Ok": function () { $(this).dialog("close"); } }
            })
            .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

这就是我想要做的。这只是一个双击事件的测试，如果它工作，我会把代码放在一个特定的按钮。

的jqGrid

    ..........
    { name: 'act', index: 'act', width: 75, sortable: false, search: false }
        ],
        ondblClickRow: function (id) {
            if (id != null) {
               // here I would like to launch the open dialog with a similar code: 
               // "<a class='openDialog' data-dialog-id='myEditDlg' data-dialog-autosize='false' data-dialog-alt='580' data-dialog-larg='740' data-dialog-title='test dialog' href='/mycontroller/EditDlg/myid'>test</a>"
            }
        },
        pager: '#jqpager',
       ....

更多详情

基本上，现在我正在使用自定义格式化程序，我为每个按钮/操作我需要按钮样式的锚点;例如：

         .....
         gridComplete: function () {
            applyZebra("mygrid");
            var ids = grid.jqGrid('getDataIDs');
            var rows = grid.jqGrid('getRowData');
            for (var i = 0; i < ids.length; i++) {

                var row = rows[i];
                var t = row['myrow'];
                var cl = ids[i];

                tst = '<a class="mybuttonclass openDialog" data-dialog-id="tckDetDlg" data-dialog-autosize="false" data-dialog-alt="580" data-dialog-larg="740" data-dialog-title="test dialog" href="/mycontrolller/testDlg/' + t + '"></a>';

                $("#jqTicketgrid").jqGrid('setRowData', ids[i], { act: tst });
            }
        },
        .....

mybuttonclass将锚点设置为按钮...

非常感谢你的帮助！最诚挚的问候

Answer 1

我不确定我是否理解您的要求。我建议您使用我在the answer中描述的jQuery.jqGrid.dynamicLink.js，您可以从here或here的最新版本下载（并下载here）。 formatter: 'dynamicLink'的使用非常简单，您几乎可以实现jqGrid中的每个链接。您可以使用onClick回调来创建所需的对话框。

您的代码还有一句话。在每次点击时，您都会创建代表对话框的<div>并将其放在页面的<body>中。 close事件仅隐藏div，但不会将其从正文中删除。所以第一个问题是：每次点击您的页面都会越来越长。第二个问题是获取HTML中不允许的id重复的可能性，如果你添加具有相同id的不同元素，你可以有许多非常奇怪的效果。因此，您应该非常小心地使用当前代码中的data-dialog-id属性。

更新：我想评论您发布的gridComplete代码。它没有效果，您可以使用自定义格式化程序来获得更清晰有效的代码。你没有发布你使用的jqGrid的完整代码，但我想你colModel中至少有两列：'act'和'myrow'。您无法在“行为”列中放置<a>元素href，这些元素是根据“myrow”列中的值构建的。

当前代码的作用。 1）网格将被构建并放置在 empty 'act'列的页面上。然后在gridComplete内执行以下操作：a）调用getDataIDs 遍历整个网格并从数组ids中的每一行收集ID。 b）调用通过完整网格的getRowData并从对象中的所有列收集所有数据，并将对象放在数组rows中。 c）获取'myrow'列的内容，构建<a>并将其放在网格的每一行的'act'列*中。您还应该了解，更改页面上的一个元素后，网页浏览器重新计算页面上每个元素的位置。

因此，为了提高页面的性能，首先应该减少页面上元素的修改。重写代码并获得相同结果的最有效方法是使用custom formatter。在您的情况下，您可以在'act' colModel附加一个属性：

{ name: 'act', index: 'act', width: 75, sortable: false, search: false,
    formatter: function (cellvalue, options, rowObject) {
        return '<a class="mybuttonclass openDialog" data-dialog-id="tckDetDlg" data-dialog-autosize="false" data-dialog-alt="580" data-dialog-larg="740" data-dialog-title="test dialog" href="/mycontrolller/testDlg/' +
            rowObject.myrow + '"></a>';
    }}

您还应验证是否使用了jqGrid的gridview: true选项。修改后的代码将执行以下操作。在构建网格主体的HTML片段期间，完整的HTML片段将构建为一个字符串，将在一次操作中放置到HTML页面。目前，Web浏览器将重新计算页面上其他元素的位置，并且所有元素都将完成。因此代码将是相同的，它将更短，易于阅读，并且它将更有效，特别是在网格的许多行的情况下。

如果您使用我建议您使用的dynamicLink格式化程序，则代码可能如下所示：

{ name: 'act', index: 'act', width: 75, sortable: false, search: false,
    formatter: 'dynamicLink', formatoptions: {
        onClick: function (rowid, iRow, iCol, cellValue, e) {
            var myrow = $(this).jqGrid('getCell', rowid, 'myrow');
            $("<div>", {id: "tckDetDlg"})
                .addClass("dialog")
                .appendTo("body")
                .dialog({
                    height: 580,
                    width: 740,
                    autoResize: false,
                    position: 'top',
                    title: 'test dialog',
                    close: function () { $(this).remove() },
                    modal: true,
                    buttons: { "Ok": function () { $(this).dialog("close"); } }
                })
                .load('/mycontrolller/testDlg/' + myrow);
        }
    }}

在我看来，上述代码将清楚易读和理解。 onClick中的代码与您在ondblClickRow内使用的代码相同。在这两种情况下，您只需要知道rowid。因此，您可以将onClick的代码放在函数中而不是使用匿名函数，并在两种情况下调用函数：

// first define the callback function which we will use later
var myClickHandle = function (rowid) {
        var myrow = $(this).jqGrid('getCell', rowid, 'myrow');
        $("<div>", {id: "tckDetDlg"})
            .addClass("dialog")
            .appendTo("body")
            .dialog({
                height: 580,
                width: 740,
                autoResize: false,
                position: 'top',
                title: 'test dialog',
                close: function () { $(this).remove() },
                modal: true,
                buttons: { "Ok": function () { $(this).dialog("close"); } }
            })
            .load('/mycontrolller/testDlg/' + myrow);
    };

...
// define the grid
$("#jqTicketgrid").jqGrid({
    ...
    colModel: [
        ...
        { name: 'act', index: 'act', width: 75, sortable: false, search: false,
            formatter: 'dynamicLink', formatoptions: { onClick: myClickHandle } }
        ...
    ],
    ondblClickRow: function (rowid) {
        myClickHandle.call(this, rowid);
    }

jqgrid + MVC：如何在jqgrid中打开一个对话框？您建议使用哪种方法打开对话框？

1 个答案: