Question

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

Answer 1

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

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

在jquery对话框中

2打开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对话框按钮保存。希望这会对你有所帮助。

Answer 2

我建议您首先阅读（或至少看一下）the code of form editing module，以实现您要替换的部分。您将看到它包含更多2000行代码。如果您写“我想......”，您应该了解实施您所要求的工作量。如果你能够理解代码，并且你能够编写修改代码，即使使用像jQuery UI这样的库，那么你可以决定是否值得投资你的是时候做这项工作了。使用现有解决方案的主要优点是节省时间。您所遇到的问题并不完美，但使用现有产品，您可以快速和以可接受的质量创建自己的解决方案。研究现有产品的方法可以免费使用，这对于重新发明轮子的大量投资来说更有效。

Answer 3

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

在表单编辑中使用模板

从版本4.8开始，我们在表单编辑中支持模板。这允许以开发人员想要的方式自定义编辑表单。要使用模板，需要在编辑添加/或添加导航器选项中设置参数模板。这可以在导航器或编辑方法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的名称

Answer 4

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

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

例如

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

这不是花哨但它对我有用。也许有一种更优雅的方式来做同样的事情。我可以将这些字段安排在几个列中，而不必将表格格式化为全范围。

Answer 5

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

Creating a link in JQGrid的上一个答案解决了您的问题。

jqGrid：创建自定义编辑表单

5 个答案: