4

我想在 jqGrid 中自定义编辑表单，这样我就不想使用提供的表格结构化布局，而是对表单元素使用我自己的自定义 css 结构化布局。我应该如何修改编辑表单以允许我使用自己的自定义外观？

4

5 回答 5

6

您绝对可以通过 jquery ui 对话框来实现这一点。但是，我不能为您提供完整的代码，但可以帮助您完成必须执行的步骤。1 设计您想要应用的任何 CSS 和样式的自定义表单。假设这是你的客户表格

<div id="dialog-div">
    <input type="text">
</div>

2 在 jquery 对话框上打开你的 jqgrid 上的对话框编辑按钮单击

$("#edit").click(function(){
            var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
            if(rowdata){
                $("#dialog-div").dialog('open');
                var data = $("#coolGrid").jqGrid('getRowData',rowdata);
                alert(data);
            }
});

默认情况下，它将关闭为-

$("#dialog-div").dialog({
            autoOpen: false,
});

现在，当您在变量中获取数据时，您可以放入您的编辑表单和 jquery 对话框按钮，根据您的逻辑保存它。希望这对您有所帮助。

于 2013-05-06T13:29:03.910 回答
2

我建议您首先阅读（或至少看透）表单编辑模块的代码，该代码实现了您要替换的部分。您将看到它由多达 2000 行代码组成。如果您写“我想……”，您应该了解实现您所要求的工作量。如果您能够理解代码，并且即使使用 jQuery UI 之类的库也能够编写代码修改，那么您可以决定是否值得投入时间来完成这项工作。使用现有解决方案的主要优点是节省时间。您遇到的问题并不完美，但使用现有产品您可以快速创建自己的解决方案并具有可接受的质量。研究可以免费使用的现有产品的方法似乎更有效，因为我对重新发明轮子进行了大量投资。

于 2013-05-03T14:55:24.273 回答
1

http://guriddo.net/?kbe_knowledgebase=using-templates-in-form-editing

在表单编辑中使用模板

从 4.8 版开始，我们支持表单编辑中的模板。这允许以开发人员想要的方式自定义编辑表单。要使用模板，需要在导航器的编辑添加/添加选项中设置参数模板。这可以在 navigator 或编辑方法 editGridRow 中完成：

$("#grid").jqGrid("navGrid",
    {add:true, edit:true,...},
    {template: "template string for edit",...}
    {template: "template string for add",...},
...
);

并在 editGridRow 方法中：

$("#grid").jqGrid("editGridRow",
   rowid,
   {template: "template string",...}
);

要将 CustomerID 字段放在模板中，应在模板字符串中插入以下代码字符串

{CustomerID}

换句话说，这是 colModel 中放入 { } 的名称

于 2017-06-24T14:13:42.607 回答
0

表格布局的常见问题是当您有不同宽度的列时，尤其是那些非常宽的列。

我解决了在 beforeShowForm 事件中将 attr colspan 添加到宽列的问题。

例如

"beforeShowForm":function() {
    $('#tr_fieldnameasinColModel > td.DataTD').attr('colspan',5);
}

这并不花哨，但它对我有用。也许有一种更优雅的方式来做同样的事情。我可以将字段排列在几列中，而不必使表单变得特别宽。

于 2013-07-07T21:08:44.643 回答
0

当用户单击编辑按钮时，页面导航到另一个页面，基于 Id 获取行的详细信息，您可以显示值..

在 JQGrid 中创建链接的先前答案可以解决您的问题。

于 2014-02-19T12:57:22.103 回答