使用InlineEditing和CellEdit在JQ Grid上启用“保存”按钮
嗨，我有一个使用单元格编辑和内联编辑的网格。 它保存到ClientArray
$('#list').jqGrid({ datatype: "local", colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'], colModel: [ { name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 }, { name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 }, { name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 } ], pager: "#pager", rowNum: 100, rowList: [], pgbuttons: false, // disable page control like next, back button pgtext: null, // disable pager text like 'Page 0 of 10' viewrecords: true, // disable current view record text like 'View 1-10 of 100' height: '100%', scrollOffset: 0, sortname: "Name", sortorder: "Asc", gridview: true, caption: 'Parameters', autowidth: true, hidegrid: false, loadonce: true, //beforeEditCell: function () { // $("#list_ilsave").removeClass('ui-state-disabled'); // return; //}, //afterEditCell: function (rowid, cellname, value, iRow, iCol) { // $('#list').jqGrid('getCell', rowid, iCol).focus(); // return; //}, width: totalWidth, cellEdit: true, cellsubmit: "clientArray" }); $('#list').jqGrid('inlineNav', '#pager', { edit: false, add: false, del: false, save: true, savetext: 'Save', cancel: false }); 编辑单元格时，保存按钮保持禁用状态。 如果我在beforeCellEdit中手动启用按钮，则在您选择另一个单元格之前，可编辑单元格无法获得焦点。 此行为仅在IE中发生。
我试图在我注释掉的代码中单独修复这两个问题，我发现失去焦点是由线路造成的
$("#list_ilsave").removeClass('ui-state-disabled');
我尝试将此行放在beforeEditCell和afterEditCell中，它会导致输入字段失去焦点。
我正在使用JQ Grid 4.4.4并且在我阅读4.4.4之后的内联编辑更新后我尝试更新到4.6.0
更新我已将网格更改为使用onSelectRow
onSelectRow: function (rowid) { var $grid = $('#list'); var iRow = $("#" + rowid)[0].rowIndex; $grid.jqGrid('editRow', rowid, { keys: true, oneditfunc: function(rowid, response) { var $saveButton = $("#list_ilsave"); if ($saveButton.hasClass('ui-state-disabled')) { $saveButton.removeClass('ui-state-disabled'); } markCellAsDirty(rowid, $grid); return true; }, successfunc: function() { alert('success'); return true; }, aftersavefunc: function() { alert('after save'); return true; }, errorfunc: function() { alert('error'); return true; } }); }, cellsubmit: "clientArray"
但是除了oneditfunc之外，我无法触发任何editRow事件。 获取更改的单元格也存在问题。
此方法将单元格标记为脏/已编辑
function markCellAsDirty(rowid, grid) { $(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell")); $(grid[0].rows.namedItem(rowid)).addClass("edited"); }
我尝试按如下方式获取已编辑的单元格
var editedRows = $grid.getChangedCells('dirty');
在将AJAR方法中的editedRows发布到我的服务器之前。
我不确定你想要实现什么，但我将你的演示修改为以下https://jsfiddle.net/OlegKi/byygepy3/11/ 。 我在下面提供了演示的完整JavaScript代码
$(function () { var myData = [ { id: 10, ParameterName: "Test", ParameterValue: "" }, { id: 20, ParameterName: "Test 1", ParameterValue: "" }, { id: 30, ParameterName: "Test 2", ParameterValue: "" } ], $grid = $("#list"); // change the text displayed on editrules: {required: true } $.extend(true, $.jgrid.locales["en-US"].edit.msg, { required: "No value was entered for this parameter!!!" }); $grid.jqGrid({ datatype: "local", data: myData, colNames: ["", "Parameter Name", "Parameter Value"], colModel: [ { name: "act", template: "actions" }, // optional feature { name: "ParameterName" }, { name: "ParameterValue", editable: true, editoptions: { maxlength: 100 }, editrules: {required: true } } ], cmTemplate: { autoResizable: true }, autoResizing: { compact: true }, pager: true, pgbuttons: false, // disable page control like next, back button pgtext: null, // disable pager text like 'Page 0 of 10' viewrecords: true, // disable current view record text like 'View 1-10 of 100' sortname: "Name", iconSet: "fontAwesome", caption: 'Parameters', autowidth: true, hidegrid: false, inlineEditing: { keys: true }, singleSelectClickMode: "selectonly", // prevent unselect once selected rows beforeSelectRow: function (rowid) { var $self = $(this), i, // savedRows array is not empty if some row is in inline editing mode savedRows = $self.jqGrid("getGridParam", "savedRow"); for (i = 0; i < savedRows.length; i++) { if (savedRows[i].id !== rowid) { // save currently editing row // one can replace saveRow to restoreRow in the next line $self.jqGrid("saveRow", savedRows[i].id); } } return savedRows.length === 0; // allow selection if saving successful }, onSelectRow: function (rowid) { $(this).jqGrid("editRow", rowid); }, afterSetRow: function (options) { var item = $(this).jqGrid("getLocalRow", options.rowid); if (item != null) { item.dirty = true; } }, navOptions: { edit: false, add: false, search: false, deltext: "Delete", refreshtext: "Refresh" }, inlineNavOptions: { save: true, savetext: "Save", cancel: false, restoreAfterSelect: false }, formDeleting: { // delete options url: window.g_baseUrl + 'MfgTransactions_MVC/COA/Delete?', beforeSubmit: function () { // get value var selRowId = $(this).jqGrid('getGridParam', 'selrow'); var parametricValue = $(this).jqGrid('getCell', selRowId, 'ParameterValue'); // check if empty if (parametricValue === "") { return [false, "Cannot delete: No value exists for this parameter"]; } return [true, "Successfully deleted"]; }, delData: { batchId: function () { return $("#BatchId").val(); } }, closeOnEscape: true, closeAfterDelete: true, width: 400, msg: "Are you sure you want to delete the Parameter?", afterComplete: function (response) { if (response.responseText) { alert("response.responseText"); } //loadBatchListIntoGrid(); } } }).jqGrid('navGrid') .jqGrid('inlineNav') .jqGrid('navButtonAdd', { caption: "Save Changed", buttonicon: "fa-floppy-o", onClickButton: function () { var localData = $(this).jqGrid("getGridParam", "data"), dirtyData = $.grep(localData, function (item) { return item.dirty; }); alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data"); } }); // make more place for navigator buttons be rwducing the width of the right part var pagerIdSelector = $grid.jqGrid("getGridParam", "pager"); $(pagerIdSelector + "_right").width(100); // make the grid responsive $(window).bind("resize", function () { $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width()); }).triggerHandler("resize"); });
HTML代码的位置
和CSS代码
.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td { word-wrap: break-word; /* IE 5.5+ and CSS3 */ white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ overflow: hidden; vertical-align: middle; }
它演示了如何在选择行上实现启动内联编辑。 另外，我添加了带template: "actions"可选列template: "actions" ，可以是替代实现。 我在afterSetRow回调中的每个数据项中设置了属性 dirty ，我添加了“保存更改”按钮，它使用localData = $(this).jqGrid("getGridParam", "data")和dirtyData = $.grep(localData, function (item) { return item.dirty; }); 获取脏（修改）数据。