[英]jqGrid - Row Span in Add/Edit Modal
In one of my jqGrid Add/Edit Modal I want to arrange the fields in that way like on the picture below: 在我的jqGrid添加/编辑模态之一中,我想像下面的图片那样安排字段:
Thanks to Oleg that I have already know from his post , how to arrange the fields in multiple column. 多亏了Oleg,我已经从他的帖子中知道了如何在多列中排列字段。 But I want to do rowspan in the Add/Edit modal like on the picture below 但是我想像下面的图片一样在“添加/编辑”模式中进行行跨
I created for you small demo based on the demo from the answer . 我根据答案中的演示为您创建了一个小演示 。 The demo have hidden column flag
which provides the information to the URLs to the pictures. 该演示具有隐藏的列flag
,该flag
提供了有关图片URL的信息。 I defined the column like below 我定义了如下列
{ name: "flag", index: "flag", width: 55, hidden: true,
edittype: "image", editrules: { edithidden: true },
editoptions: { src: "", style: "margin-left: 20px" },
formoptions: { label: "", rowpos: 1, colpos: 2}}
The Edit form use beforeInitData
which set src
attribute based on the value of flag
and then one set all required properties of the Edit form inside of beforeShowForm
. 编辑表单使用beforeInitData
,它根据flag
的值设置src
属性,然后在beforeShowForm
内部设置编辑表单的所有必需属性。 If one need to support Next/Prev buttons of the edit form then one should use afterclickPgButtons
callback too. 如果需要支持编辑表单的“下一个/上一个”按钮,则也应使用afterclickPgButtons
回调。 The final code is the following 最终代码如下
$grid.jqGrid("navGrid", "#pager", {add: false, del: false, search: false}, {
recreateForm: true,
width: 450,
beforeInitData: function () {
var $self = $(this),
cm = $self.jqGrid("getColProp", "flag"),
selRowId = $self.jqGrid("getGridParam", "selrow"),
lang = $self.jqGrid("getCell", selRowId, "flag");
cm.editoptions.src = "http://www.ok-soft-gmbh.com/img/flag_" + lang + ".gif";
},
beforeShowForm: function ($form) {
var $formRows = $form.find(".FormData");
$formRows.eq(0).children("td.DataTD").eq(1).attr("rowspan", "3"); //.css("text-align", "center");
$formRows.eq(1).children("td.DataTD").eq(1).hide();
$formRows.eq(2).children("td.DataTD").eq(1).hide();
},
afterclickPgButtons: function () {
var $self = $(this),
selRowId = $self.jqGrid("getGridParam", "selrow"),
lang = $self.jqGrid("getCell", selRowId, "flag");
$("#flag").attr("src", "http://www.ok-soft-gmbh.com/img/flag_" + lang + ".gif");
}
});
It displays the results like 它显示结果如
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.