JqGrid 内联编辑
如何在 JqGrid 中执行内联编辑。
介绍
嗨朋友们，前些日子，我写了一篇关于JqGrid与Asp.net集成的文章。
我收到了很多评论，我的一位CP朋友希望我能写更多关于其功能的内容。受到他们的评论和支持的启发，我决定再写一篇关于JqGrid的文章。
在上一篇文章中，我演示了JqGrid的表单编辑功能，所以在这里我想演示内联编辑功能。我还想演示我们如何在JqGrid中使用不同的用户控件，如复选框和下拉列表。
希望这会有所帮助。
请求：-JqGrid新手最好阅读本文的第一部分。
基本网格创建
作为第一步，我想创建一个显示数据的纯网格，如下所示，并带有一个底部导航栏。
在上一篇文章中，如果您已经阅读过，您可能已经看到底部导航栏左侧（靠近刷新按钮）显示了一些添加/编辑和删除按钮。
这里所有这些都没有出现。
让我们看看我用于创建上述网格的脚本（不重复添加先决条件脚本和css文件等基本内容）。
开始内联编辑
我们已经准备好了基本的网格基础设施。
现在我们将在其之上构建。
所以像表单编辑一样，我们在这里要做的是...
- 在导航栏的左下方放置添加、编辑、取消和保存按钮
- 从网格中选择一行（选择时行会被高亮显示）
- 然后点击底部栏上的编辑按钮
- 该行变为可编辑，保存和取消按钮也变为可编辑
- 编辑行
- 点击保存
如果我们要完成所有这些操作，我们需要在底部栏上显示按钮。
因此，为了执行内联操作，我们有一个名为inlineNav的方法，类似于我们之前用于表单编辑的navGrid。
你不记得了吗？
我们刚刚才从那个方法中禁用了所有这些操作，对吗？
" />
好的...
让我们看看如何连接这个新的内联方法。
以下脚本将帮助您使网格显示“添加/编辑/保存”和“取消”按钮。
edit: true, add:true, save:true 和 cancel:true 将显示相应的按钮，同时参数editicon, addicon, saveicon 和 cancelicon 将设置要从图像文件夹和CSS中显示在UI中的按钮图标。
好了，希望我们已经完成了连接。
让我们看看现在的网格是什么样子。
是的...按钮显示出来了。
您还可以看到“保存”和“取消”按钮处于禁用状态。并且按钮也没有显示标签。
好的，我们来看看编辑按钮的行为。
我所做的就是选择一个数据行并点击编辑（铅笔图标）。
该行变得可编辑，如上图所示。
所以我们使我们的网格可以内联编辑。
很简单，对吗？
查看编辑字段，您可以看到所有字段都显示为文本框。
你看到了吗？
根据字段中的数据，我们可以将部门（第五个）字段设为包含所有可能部门的下拉列表，并将布尔型的常驻（第九个）字段在编辑时设为复选框。你的意见是什么？
这很好考虑。
但是我们如何才能实现呢？嗯......
是的……我们做到了。
见下图。
我们是如何做到的……我们必须回顾一下脚本。
像往常一样，这也是一个配置更改，这意味着向特定数据字段添加一些参数。
所以让我们剖析这些元素。
参见 Department 字段，其中添加了属性 edittype 为 select，formatter 为 select，还提供了 editoptions 作为键值对以显示在下拉列表中。
一切都完美。
我们成功了。
现在我想我们还需要将 MaritalStatus 字段更改为下拉列表，对吗？
无论如何...现在不行，我们稍后再做...
接下来我们想要的是，测试保存按钮的点击是否有效。
为了处理保存操作，我使用了一个名为 JQGridInlineHandler.ashx 的通用处理程序，我也将其提供给网格的 url 和 editurl 属性。
url: 'https://:58404/JQGridInlineHandler.ashx' editurl: 'https://:58404/JQGridInlineHandler.ashx'
让我们点击保存按钮，看看处理程序是否被调用。
保存…..
是的，调试器捕获到了处理程序……
检查来自 context.Request.Form 的表单名称值集合。您还可以看到更新所需的所有数据以及oper =edit。
所以这也发生了。
接下来我们需要的是要更新记录的主键，这里是 EmployeeId (_id)。
如果你仔细观察那些表单，你会发现里面看不到 EmpId。
那么我们如何将 EmployeeId 从客户端传输到服务器呢？
这意味着我们要向服务器传输额外的有效载荷。
为了传输数据，我们利用了editParams内部的extraParams属性，通过它我们可以传输数据。
数据将附加到 Context.request.Forms 名称值集合。
希望现在一切都清楚了。
像 EmpId 一样，我们可以将任何数据作为 JSON 类对象负载传输到服务器。现在查看表单名称值集合，我们可以看到其中的 EmpId。
另请注意其中的oper=edit。
我尝试了编辑和添加...
在通用处理程序的帮助下，我能够添加和更新员工记录
一切进展顺利，运行良好。
但是……
一旦执行添加或编辑操作，网格不会刷新。
对于编辑来说这不是问题，因为编辑过的数据会保留在那里，对吗？但如果网格在添加后没有刷新，我们就无法在网格中看到新添加的记录。
我们去找客户端中添加和编辑后触发的事件。
这样我们就可以手动刷新该事件中的网格，通过添加网格刷新代码。
当我查看图像 9 中高亮显示的区域时，我发现了一个名为 successfunc 的属性。
让我们尝试在 successfunc 中添加刷新网格代码。
下面是网格刷新代码。
您可以在任何地方使用此代码刷新带有 loadonce: true 的 JqGrid。
$(this).jqGrid('setGridParam',{ datatype: 'json' }).trigger('reloadGrid');
哦!!!
上篇文章我也忘了讲loadonce。
这个属性使我们的 JqGrid 在回发中只填充一次。也就是说，网格在执行每个操作后不会自动刷新或重新填充。
希望你明白我的意思。 。
添加/编辑后还添加了提示消息以增加美观度。
然后它运行良好，网格在编辑后现在正在刷新。
您可能已经注意到我在提示响应文本。您是不是在想响应文本中有什么……？没什么……
这是我们在执行添加/编辑操作后写入 HTTP 上下文响应中的内容。
编辑很清楚，那么添加呢……？
对于添加，我们也有相同的方法集。
但唯一的区别是它不像编辑那样直接在addParams中，而是在add params中还有一个参数叫做addRowParams。
你能看到吗？
是的……希望目前为止一切都清楚了。现在我们可以在 JqGrid 中通过内联方法添加/编辑。我会向您展示添加和编辑后我们的网格是什么样子。
自定义格式化单元格数据：
在我之前的文章中，我的一位读者朋友问我，如果我们从数据库中获取一些与要显示的数据相关的代码，我们如何格式化 JqGrid 单元格中的数据。
比如说，如果我们在存储一些枚举，并且我们希望为该枚举代码显示有意义的数据。
实际上，他的例子与婚姻状况有关，如果您存储
- -1：-未知
- 0：单身
- 1：已婚
对于数据库中的相应状态，我们如何以普通人理解的格式显示数据。
在这里，为了解释这种情况，我将使用我们的婚姻状况字段。我已经清空了数据库并插入了婚姻状况为 0/1/-1 的新记录。
你可以在上面的图片中看到。
现在我要对它进行格式化。
让我们转到脚本，在 colModel MaritalStatus 中为名为 formatter 的属性添加一个函数。
在其中，我分配了一个带有 3 个输入参数的函数。
这里我们将编写脚本来格式化 cellvalue。
如何？
你可能已经注意到那个方法里面有一个 debugger，
我只是放进去检查参数里有什么。
我们去看看里面有什么。
此函数将为网格中的每一行执行。
所以当我迭代时，
我到达第二行并查看了所有方法参数的值。
我发现cellvalue在我们的上下文中很有用。
见图 1A。
其中第二行的值和这里的值是相同的，都是1。
那么我们如何格式化呢？
好的，在函数内部我写了如下代码...
函数根据 cellvalue 中的值返回字符串。
执行应用程序并查看 UI 中显示的内容。
是的，它完美地执行了…… :)
同样地，我们可以格式化任何数据。
怎么样？
太棒了吧？
注：-请不要混淆。我使用了另一个示例项目来演示自定义格式化。
参考：
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
结论：
Jqgrid 先生是一款功能强大的出色控件。
谢谢。