Fatal编程技术网
  • javascript/
  • Javascript jqgrid+；MVC：如何在jqgrid中打开对话框？您建议使用哪些方法打开对话框？

Javascript jqgrid+；MVC：如何在jqgrid中打开对话框？您建议使用哪些方法打开对话框？

javascript jquery asp.net-mvc jqgrid

Javascript jqgrid+；MVC：如何在jqgrid中打开对话框？您建议使用哪些方法打开对话框？,javascript,jquery,asp.net-mvc,jqgrid,dialog,Javascript,Jquery,Asp.net Mvc,Jqgrid,Dialog,我正在使用MVC4+EF4.1和jqgrid。 我是HTML和Javascript新手，我尝试在jqgrid中打开自定义编辑jquery对话框，但没有成功。如果你有更好的方法来实现我想要的行为，他们将是受欢迎的 我有下面的jquery对话框脚本，附加到class='openDialog”，它在其他方面已经可以正常工作了： $.ajaxSetup({ cache: false }); $(document).ready(function () { $(".openDialog").l

我正在使用MVC4+EF4.1和jqgrid。 我是HTML和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");
    });
});

$.ajaxSetup（{cache:false}）；
$（文档）.ready（函数（）{
$（“.openDialog”）.live（“单击”，函数（e）{
e、 预防默认值（）；
$("")
.addClass（“对话框”）
.attr（“id”，$（此）.attr（“数据对话框id”））
.附件（“正文”）
.对话({
高度：$（this）.attr（“数据对话框alt”），
宽度：$（this.attr（“数据对话框放大”），
自动调整大小：$（this）.attr（“数据对话框自动调整大小”），
位置：'顶部'，
标题：$（this.attr（“数据对话框标题”），
关闭：函数（）{$（this）.remove（）}，
莫代尔：是的，
按钮：{“确定”：函数（）{$（this）.dialog（“close”）；}
})
.load（this.href）；
});
$（“.close”）.live（“单击”），函数（e）{
e、 预防默认值（）；
$（此）.close（.dialog”）.dialog（“关闭”）；
});
});
这就是我想做的。这只是一个带有双击事件的测试，如果它起作用，我将把代码放在一个特定的按钮中

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',
       ....

。。。。。。。。。。
{name:'act'，index:'act'，宽度：75，可排序：false，搜索：false}
],
ondblClickRow:函数（id）{
如果（id！=null）{
//在这里，我想用类似的代码启动“打开”对话框：
// ""
}
},
传呼机：“#jqpage”，
....
更多详细信息

基本上，现在我使用的是一个定制的格式化程序，在这里我为我需要的每个按钮/动作放置了一个按钮样式的锚；例如：

         .....
         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 });
            }
        },
        .....

。。。。。
gridComplete:函数（）{
applyZebra（“mygrid”）；
var id=grid.jqGrid（'getdataid'）；
var rows=grid.jqGrid（'getRowData'）；
对于（变量i=0；i
mybuttonclass将锚点设置为按钮样式

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

我不确定我是否理解您的要求。我建议您使用我在中介绍的
jQuery.jqGrid.dynamicLink.js
，您可以从中下载，也可以从中下载最新版本。
formatter:'dynamicLink'
的使用非常简单，您几乎可以实现jqGrid中的每个链接。您可以使用
onClick
callback来创建所需的对话框

对代码再加一句话。每次单击都会创建代表对话框的
，并将其放置在页面的
中。
close
事件仅隐藏div，而不将其从主体中删除。所以第一个问题是：每次点击你的页面都会越来越长。第二个问题是可能会获得HTML中不允许的id副本，如果添加具有相同id的不同元素，可能会产生许多非常奇怪的效果。因此，在使用当前代码中的
数据对话框id
属性时应该非常小心

更新：我想对您发布的
gridComplete
中的代码进行注释。这是无效的，您可以使用自定义格式化程序来获得更清晰有效的代码。您没有发布您使用的jqGrid的完整代码，但是我假设您在
colModel
中至少有两列：'act'和'myrow'。您不能将
放在“act”列中。在这种情况下，您可以在
colModel
中的
'act'
中包含一个附加属性：


{ 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>';
    }}


在我看来，上述代码将清晰易懂。
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);
    }



//首先定义我们稍后将使用的回调函数
var myClickHandle=函数（rowid）{
var myrow=$（this.jqGrid（'getCell'，rowid，'myrow'）；
$（“”，{id:“tckDetDlg”}）
.addClass（“对话框”）
.附件（“正文”）
.对话({
身高：580，
宽度：740，
自动调整大小：false，
位置：'顶部'，
标题：“测试对话框”，
关闭：函数（）{$（this）.remove（）}，
莫代尔：是的，
按钮：{“确定”：函数（）{$（this）.dialog（“close”）；}
})
.load（'/mycontroller/testDlg/'+myrow）；
};
...
//定义网格
$（“#jqTicketgrid”）.jqGrid({
...
colModel：[
...
{name:'act'，index:'act'，宽度：75，可排序：false，搜索：false，
格式化程序：“DynamicClink”，格式化选项：{onClick:myClickHandle}
...
],
ondblClickRow:函数（rowid）{
myClickHandle.call（this，rowid）；
}

你能更清楚地描述一下你所做的步骤的逻辑吗？例如1）你用一些数据填充网格。“act”列是否包含你在注释中显示的
？你真的需要所有// 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);
    }