我正在使用 MVC 4 + EF 4.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");
});
});
这就是我想要做的。这只是双击事件的测试，如果有效，我会将代码放在特定按钮中。
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',
....
更多详情
基本上，现在我正在使用自定义格式器，我在其中为我需要的每个按钮/操作放置了一个按钮样式的 anchor ；例如:
.....
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 将 anchor 样式设置为按钮...
非常感谢您的帮助! 最好的问候
最佳答案
我不确定我是否理解并纠正了您的要求。我建议您使用 jQuery.jqGrid.dynamicLink.js我在 the answer 中描述过您可以从 here 下载或来自 here 的最新版本(并下载 here )。 formatter: 'dynamicLink'的用法非常简单，您几乎可以在 jqGrid 中实现每个链接。您可以使用 onClick将创建您需要的对话框的回调。
对您的代码再多说一句。每次点击你创建<div>代表对话框并将其放置在 <body> 中页面的。 close事件仅隐藏 div，但不会将其从正文中移除。所以第一个问题:每次点击你的页面都会越来越长。第二个问题是可能会出现 id 重复，这在 HTML 中是不允许的，如果您确实添加了具有相同 id 的不同元素，您可能会产生许多非常奇怪的效果。所以你应该非常小心地使用data-dialog-id来自您当前代码的属性。
已更新:我想评论来自 gridComplete 的代码你张贴的。它不是有效的，您可以使用自定义格式化程序来获得更清晰有效的代码。您没有发布您使用的 jqGrid 的完整代码，但我想您在 colModel 中至少有两列。 :“行动”和“myrow”。您不能将 <a> 放在“行为”列中具有 href 的元素它们是根据“myrow”列中的值构建的。
当前代码的作用。 1) 将构建网格并将其放置在具有空 '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>';
}}
您还应该验证您使用的是 gridview: true jqGrid 的选项。修改后的代码将执行以下操作。在构建网格主体的 HTML 片段期间，完整的 HTML 片段将构建为一个字符串，并且将在一次操作中放置到 HTML 页面。此刻网络浏览器将重新计算页面上其他元素的位置，所有这些都将完成。所以代码将是相同的，它会更短、更易于阅读，并且会更有效，尤其是在网格有很多行的情况下。
如果您要使用 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);
}
关于javascript - jqgrid + MVC : How to open a dialog inside jqgrid? 你建议使用哪种方法打开对话框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9443958/