jqGrid:创建自定义编辑表单

Question

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

Answer 1

您绝对可以通过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对话框按钮。希望这对你有帮助。

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 put中的名称{}