我正在使用jQgrid Free(版本4.15.2 )，并且我需要添加内联编辑行的功能，这完全不是问题，因为它很容易设置.这是我正在使用的代码:
I am using jQgrid Free (release 4.15.2) and I need to add the ability to edit rows inline which is not a problem at all because it's pretty easy to setup. Here is the code I am using:
$.jgrid = $.jgrid || {}; $.jgrid.no_legacy_api = true; $.jgrid.useJSON = true; $(function () { "use strict"; var $grid = $("#list"), pagerSelector = "#pager", customAddButton = function (options) { $grid.jqGrid('navButtonAdd', pagerSelector, options); $grid.jqGrid('navButtonAdd', '#' + $grid[0].id + "_toppager", options); }; $.fn.fmatter.customActionsFormatter = function (cellValue, options, rowData) { return '<a href="#" title="Delete selected row"><span class="fa fa-fw fa-trash-o delete_row" data-id="' + rowData.Id + '"></span></a>'; }; $grid.jqGrid({ url: '/ajax/plans_to_forms/get_all', datatype: "json", colNames: ["", "Id", "Form #", "Form", "Plan", "Class", "Drug"], colModel: [ {name: "act", formatter: "customActionsFormatter", width: 20, search: false}, {name: "Id", jsonmap: "Id", key: true, hidden: true}, {name: "FormId", align: 'center', fixed: true, frozen: true, resizable: false, width: 100}, {name: "FormName", width: 300}, {name: "PlanName", width: 300}, {name: "DrugGroupName", width: 300}, {name: "DrugName", width: 300} ], cmTemplate: {autoResizable: true, editable: true}, iconSet: "fontAwesome", rowNum: 25, guiStyle: "bootstrap", autoResizing: {compact: true}, rowList: [25, 50, 100, "10000:All"], viewrecords: true, autoencode: true, sortable: true, pager: pagerSelector, toppager: true, cloneToTop: true, hoverrows: true, multiselect: true, multiPageSelection: true, rownumbers: true, sortname: "Id", sortorder: "desc", loadonce: true, autowidth: true, autoresizeOnLoad: true, forceClientSorting: true, shrinkToFit: true, navOptions: { edit: false, add: false, del: false, search: false }, inlineEditing: {keys: true, defaultFocusField: "DrugGroupName", focusField: "DrugGroupName"}, onSelectRow: function (rowid, status, e) { var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow"); if (savedRow.length > 0 && savedRow[0].id !== rowid) { $self.jqGrid("restoreRow", savedRow[0].id); } $self.jqGrid("editRow", rowid, {focusField: e.target}); } }).jqGrid('navGrid', pagerSelector, { search: false, edit: false, add: false, del: false, refresh: true, cloneToTop: true }).jqGrid("filterToolbar", { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' }).jqGrid("gridResize").jqGrid('setFrozenColumns'); customAddButton({ caption: 'Delete selected', buttonicon: 'fa-trash-o', title: "Delete all selected rows", onClickButton: function () { var rowIds = $("#list").jqGrid('getGridParam', 'selarrrow'); if (rowIds.length > 0) { delete_all_link_modal.modal(); delete_all_link_modal.attr('data-link-ids', rowIds); } else { alert('You must select at least one item.'); } } }); });以下行启用内联
inlineEditing: {keys: true, defaultFocusField: "DrugGroupName", focusField: "DrugGroupName"}我的问题在哪里?我只需要编辑列DrugGroupName，上面的行就可以使整行可编辑，这使我想到以下问题:
Where is my problem? I need to edit only the column DrugGroupName and the line above make the entire row editable which leads me to the following questions:
-
是否可以仅编辑给定的一组列而不是所有列? -我在此处检查文档，但找不到任何内容有用的
It's possible to edit only a given set of columns instead of all of them? - I was checking docs here but I could not find anything helpful
是否有可能在我单击任何其他位置或按Enter键后立即将数据发送到服务器? -我想避免额外点击保存图标.
It's possible to send the data to the server as soon as I click in any other place or by hitting the ENTER key? - I want to avoid the extra click on the save icon.
更新:我已经找到了第一个问题的答案.我只需要在定义colModel时使该列不可编辑.例如:
UPDATE: I have found the answer for my first question already. I just need to make the column not editable while defining the colModel. Ex:
colModel: [ {name: "act", formatter: "customActionsFormatter", width: 20, search: false}, {name: "Id", jsonmap: "Id", key: true, hidden: true}, {name: "FormId", align: 'center', fixed: true, frozen: true, resizable: false, width: 100, editable: false}, {name: "FormName", width: 300, editable: false}, {name: "PlanName", width: 300, editable: false}, { name: "DrugGroupName", width: 300, edittype: "select", editoptions: { generateValue: true, selectFilled: function (options) { setTimeout(function () { $(options.elem).select2({ width: "100%" }); }, 0); } }, stype: "select", searchoptions: { sopt: ["eq", "ne"], generateValue: true, noFilterText: "Any", selectFilled: function (options) { $(options.elem).select2({ width: "100%" }); } } }, {name: "DrugName", width: 300, editable: false} ]这样，我迫使DrugGroupName成为唯一可编辑的文件.
That way I am forcing DrugGroupName to be the only one editable.
推荐答案我认为您的代码有很多小问题.我准备了演示 jsfiddle/OlegKi/rmo2370r/19/，应该可以解决大多数问题，并演示select2的用法以及免费jqGrid的一些功能.
I think that your code have many small problems. I prepared the demo jsfiddle/OlegKi/rmo2370r/19/, which should fix the most problems and demonstrates the usage of select2 and some features of free jqGrid.
第一个小问题是使用正确的rowid.您使用当前隐藏的列
The first small problem is the usage of correct rowid. You use currently hidden column
{name: "Id", jsonmap: "Id", key: true, hidden: true}这是使用jqGrid的用户的典型误解. Rowid将另存为行的id属性(<tr>元素).参见图片.人们无需将案例信息作为隐藏的<td>元素放置在网格内.可以使用以下jqGrid选项代替它
It's typical misunderstanding of users, who use jqGrid. Rowid will be saved as id attribute of rows (<tr> elements). See the picture. One don't need to place the case information as hidden <td> element inside of the grid. Instead of that one can just use the following jqGrid options
prmNames: { id: "Id" }, jsonReader: { id: "Id" },相反.选项jsonReader.id通知jqGrid在填充网格的过程中在何处获取rowid，而prmNames.id提供在编辑网格的过程中ID的名称.
instead. The option jsonReader.id informs jqGrid where to get rowid during filling the grid and prmNames.id provides the name of id during editing the grid.
要在JSFiddle中填充jqGrid，可以使用Echo服务:
To fill jqGrid inside of JSFiddle one can use Echo service:
url: '/echo/json/', datatype: 'json', mtype: 'POST', // required for '/echo/json/' postData: { json: JSON.stringify(mydata) },对URL /echo/json/的请求将作为响应.可以使用Chrome/IE/Firefox开发人员工具的网络"标签来详细检查HTTP流量.
The request to the URL /echo/json/ will mydata as the response. One can use Network tab of Developer Tools of Chrome/IE/Firefox to examine the HTTP traffic in details.
以相同的方式可以使用
editurl: '/echo/json/', formDeleting: { url: '/echo/json/', ... }用于内联编辑和表单删除.
for inline editing and form deleting.
下一个更改.我在autoResizing中添加了resetWidthOrg: true属性:
The next changes. I added resetWidthOrg: true property in autoResizing:
autoResizing: { compact: true, resetWidthOrg: true }更改了autowidth: true与autoresizeOnLoad: true结合使用的结果.您会看到，所有列的宽度都比以前更好地基于列的内容.有关更多详细信息，请参见问题
which changed the results of working autowidth: true in combination with autoresizeOnLoad: true. You can see that the width of all columns are based on the content of the columns much better as before. See the issues for more details.
我不了解customActionsFormatter的目标.我将其替换为标准格式化程序操作
I didn't understood the goal of customActionsFormatter. I replaced it to the standard formatter actions
{ name: "act", template: "actions" }免费的jqGrid允许非常容易地自定义操作按钮(如果需要).参见答案和 Wiki文章以获取更多详细信息.
Free jqGrid allows very easy to customize the action buttons if required. See the answer and the wiki article for more details.
您使用的旧代码
cmTemplate: { autoResizable: true, editable: true }，然后在最多的列中设置editable: false.只需从cmTemplate中删除editable: true，仅在需要编辑的一列中添加editable: true，并将colModel中最常用的其他设置包括在cmTemplate中即可:
and set editable: false in the most columns. Instead of that you need just remove editable: true from cmTemplate, add editable: true only in one column, which you need to edit, and to include in cmTemplate other setting mostly common used in colModel:
cmTemplate: { width: 300, autoResizable: true }许多其他代码也可以简化.例如，请参见修改后的onSelectRow代码.
A lot of other code could be simplified too. See the modified code of onSelectRow for example.
要自定义删除对话框，可以使用以下设置:
To customize delete dialog one can use the following settings:
formDeleting: { url: '/echo/json/', // '/ajax/plans_to_forms/delete/' in final solution width: 320, caption: 'Delete Plan to Form Link', msg: 'Are you sure you want to delete this link?', beforeShowForm: function ($form) { var rowids = $form.find("#DelData>td").data("rowids"); console.log(rowids); if (rowids.length > 1) { $form.find("td.delmsg") .html('Are you sure you want to delete all the selected form links?'); } } }删除将数据Id=20622,20626和oper=del发送到服务器(formDeleting.url).如果需要，可以使用serializeDelData将数据转换为JSON.
Delete send the data Id=20622,20626 and oper=del to the server (formDeleting.url). One can use serializeDelData to convert the data to JSON if it's required.
要在编辑过程中将更多数据从列发送到服务器，可以在某些列中添加editable: "hidden".我在演示的FormId列中添加了该属性，并且在编辑过程中发送到服务器的数据看起来像
To send more data from columns to the server during editing one can add editable: "hidden" in some column. I added the property in FormId column of the demo and the data sending to the server during editing looked like
{"FormId":"3393","DrugGroupName":"Some other value","oper":"edit","Id":"20620"}要向服务器发送其他Ajax请求以填充<select>的数据，需要使用editoptions.dataUrl.我在演示editoptions.postData中添加了仅模拟对服务器的实际请求:
To fill the data of <select> with respect of additional Ajax request to the server one need to use editoptions.dataUrl. I added in the demo editoptions.postData to simulate only the real request to the server:
editoptions: { dataUrl: "/echo/json/", postData: { json: JSON.stringify([ "Non-Specialty Medications", "General Pharmacy Authorization", "Some other value" ]) }, buildSelect: function (data) { var select = "<select>", i; for (i = 0; i < data.length; i++) { select += "<option value='" + String(data[i]).replace(/\'/g, "'") + "'>" + $.jgrid.htmlEncode(data[i]) + "</option>" } return select + "</select>"; }, selectFilled: function(options) { var $self = $(this); setTimeout(function() { $(options.elem).select2({ width: "100%" }).on('select2:select', function (e) { // save the data on selection $self.jqGrid("saveRow", options.rowid); }); }, 0); } }, stype: "select", searchoptions: { sopt: ["eq", "ne"], generateValue: true, noFilterText: "Any", selectFilled: function(options) { $(options.elem).select2({ width: "100%" }); } } }上述对dataUrl的请求返回JSON字符串[ "Non-Specialty Medications", "General Pharmacy Authorization", "Some other value" ]，并且buildSelect将数据转换为HTML片段，其中<select>包含所有<options>.结果<select>将在selectFilled回调内部转换为select2 contril.最后，代码使用
The above request to dataUrl returns JSON string [ "Non-Specialty Medications", "General Pharmacy Authorization", "Some other value" ] and buildSelect converts the data to HTML fragment with <select> contains all the <options>. The resulting <select> will be converted to select2 contril inside of selectFilled callback. Finally the code use
ajaxSelectOptions: { type: "POST", dataType: "json" }使用
选项将Ajax请求的参数更改为dataUrl.演示 jsfiddle/OlegKi/rmo2370r/19/包含其他内容较小的更改，例如以与已经使用toppager: true相同的方式删除不需要的空分页器div和pager: true的用法.这是又一个功能，我在免费的jqGrid分支中实现了该功能，以简化jqGrid的使用.
option to change the parameters of Ajax request to dataUrl. The demo jsfiddle/OlegKi/rmo2370r/19/ contains some other minor changes, like removing unneeded empty pager div and the usage of pager: true in the same way like you use already toppager: true. It's one more feature, which I implemented in free jqGrid fork to simplify the usage of jqGrid.
更多推荐
内联编辑后如何将数据发送到服务器?
发布评论