关于javascript：jqgrid MVC：如何在jqgrid中打开对话框？您建议打开对话框的哪些方法？


jqgrid + MVC: How to open a dialog inside jqgrid? Which methods do you suggest to open a dialog?

我正在将MVC 4 EF 4.1与jqgrid一起使用。
我是HTML新手

相关讨论

我不确定我是否理解您的要求。我建议您使用答案中描述的jQuery.jqGrid.dynamicLink.js，您可以从此处下载，也可以从此处下载最新版本(并在此处下载)。 formatter: 'dynamicLink'的用法非常简单，您几乎可以在jqGrid内部实现每个链接。您可以使用onClick回调来创建所需的对话框。

对您的代码再说一遍。每次单击时，创建代表对话框的并将其放置在页面的<body>中。 close事件仅隐藏div，而不会将其从主体中删除。因此，第一个问题是：您的页面每次点击将越来越长。第二个问题是可能会获得HTML不允许的id重复项，如果您添加具有相同id的不同元素，则会产生很多非常奇怪的效果。因此，在当前代码中使用data-dialog-id属性时应格外小心。

已更新：我想评论您发布的gridComplete中的代码。它不是有效的，您可以使用自定义格式化程序来获取更清晰有效的代码。您没有发布使用的jqGrid的完整代码，但我想您在colModel中至少有两列：'act'和'myrow'。您不能将具有href的元素放置在'act'列中，这些元素是基于'myrow'列中的值构造的。

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

因此，要提高页面的性能，您首先应该减少页面上元素的修改。重写代码并获得相同结果的最有效方法是使用自定义格式化程序。在这种情况下，您可以仅在colModel中的'act'中包含附加属性：

1
2
3
4
5
{ 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 + '">';
    }}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{ 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');
            $("", {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的代码放在函数中，而不是使用匿名函数，然后在两种情况下都调用该函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// first define the callback function which we will use later
var myClickHandle = function (rowid) {
        var myrow = $(this).jqGrid('getCell', rowid, 'myrow');
        $("", {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);
    }
相关讨论