jqGrid 4.10 自动完成未完成所有字段 + 内联编辑焦点未更改为新行
jqGrid 4.10 autocomplete doesn't complete all fields + inline editing focus is not changing to a new row
首先：我有以下列自动完成：
{name:'ISRC',index:'isrc.ISRC', width:100,align:"left",editable:true,
edittype:'text',
editoptions:{
dataInit:function (elem) {
var sel_row_id = $grid.jqGrid ('getGridParam', 'selrow');
if (sel_row_id === undefined || sel_row_id === null) {sel_row_id="jqg1";}
$(elem).autocomplete({
source: "xtras/search_isrc.php",
dataType: "json",
minLength: 2,
select: function(event, ui) {
console.log("EditOptions - "+sel_row_id);
// $("#"+sel_row_id+"_id").val(ui.item ? ui.item.isrc_ID : "");
$("#"+sel_row_id+"_ISRC").val(ui.item.ISRC);
$("#"+sel_row_id+"_Track_Name").val(ui.item.Track_Name);
$("#"+sel_row_id+"_Track_Time").val(ui.item.Track_Time);
$("#"+sel_row_id+"_ArtistName").val(ui.item.ArtistName);
$("#"+sel_row_id+"_Writer").val(ui.item.Writer);
$("#"+sel_row_id+"_Publisher").val(ui.item.Publisher);
$("#"+sel_row_id+"_TrackPLineYear").val(ui.item.TrackPLineYear);
$("#"+sel_row_id+"_TrackPLineInfo").val(ui.item.TrackPLineInfo);
$("#"+sel_row_id+"_isrc_id").val(ui.item.isrc_ID);
var ffs = ui.item.isrc_ID;
console.log("ffs - "+ffs);
},
change: function(event, ui) {
if (ui.item) {
$("#"+sel_row_id+"_ISRC").val(ui.item.ISRC);
$("#"+sel_row_id+"_Track_Name").val(ui.item.Track_Name);
$("#"+sel_row_id+"_Track_Time").val(ui.item.Track_Time);
$("#"+sel_row_id+"_ArtistName").val(ui.item.ArtistName);
$("#"+sel_row_id+"_Writer").val(ui.item.Writer);
$("#"+sel_row_id+"_Publisher").val(ui.item.Publisher);
$("#"+sel_row_id+"_TrackPLineYear").val(ui.item.TrackPLineYear);
$("#"+sel_row_id+"_TrackPLineInfo").val(ui.item.TrackPLineInfo);
$("#"+sel_row_id+"_isrc_id").val(ui.item.isrc_ID);
}
}
});
$('.ui-autocomplete').css('zIndex',1000); // if autocomplete has misalignment so we are manually setting it
if(sel_row_id != 'jqg1'){
$(elem).css({'border':'1px solid red','background-color':'#e8b7cf'});
}
}
}
},
...
{name:'isrc_ID',index:'isrc.isrc_ID', hidden:true, width:50, sortable:true, editable:true},
ffs 输入控制台正确的 id
我还在 doubleClick 上设置了内联编辑：
ondblClickRow: function (rowid) {
console.log('ondblClickRow - '+rowid);
var savedRows = $grid.jqGrid("getGridParam", "savedRow");
$grid.jqGrid("setSelection", rowid);
if (savedRows.length > 0 && savedRows[0].id !== rowid) {
// cancel editing of another row is editing
// don't cancel on double click on the current editing
$grid.jqGrid("restoreRow", savedRows[0].id);
}
if (savedRows.length === 0) {
$grid.jqGrid("editRow", rowid, editOptions);
}
}
我只能在这一行强制选择行后才能进行自动完成工作$grid.jqGrid("setSelection", rowid);
自动完成PHP:
$sql = "select * from isrc where Track_Name REGEXP '[[:<:]]($q)[[:alnum:]]' or ISRC REGEXP '[[:<:]]($q)[[:alnum:]]' GROUP BY ISRC;";
$rsd = mysqli_query($GLOBALS["___mysqli_ston"], $sql);
while($data = mysqli_fetch_array($rsd)) {
$row_array['value'] = $data['ISRC'];
$row_array['label'] = $data['ISRC'].' - '.$data['Track_Name'].' - '.$data['ArtistName'].' - '.$data['Track_Time'].' - '.$data['TrackPLineInfo'];
$row_array['ISRC'] = $data['ISRC'];
$row_array['Track_Name'] = $data['Track_Name'];
$row_array['ArtistName'] = $data['ArtistName'];
$row_array['Track_Time'] = $data['Track_Time'];
$row_array['Writer'] = $data['Writer'];
$row_array['Publisher'] = $data['Publisher'];
$row_array['TrackPLineYear'] = $data['TrackPLineYear'];
$row_array['TrackPLineInfo'] = $data['TrackPLineInfo'];
$row_array['isrc_ID'] = $data['isrc_ID'];
}
((is_null($___mysqli_res = mysqli_close($conn))) ? false : $___mysqli_res);
echo json_encode($row_array);
在 Select 自动完成看起来完全符合预期（所有字段都正确填写）
提交到服务器添加到数据库后，我得到这个：
_REQUEST - 2015-12-02 17:00:13:
Array
(
[Catalogue] => 1958
[ISRC] => GBCQV0200199
[Disc_Number] => 1
[Track_Number] => 4
[is_bonus] => No
[Track_Name] => Hitch Hiking Woman
[ArtistName] => Peter Green Splinter Group
[Track_Time] => 00:00:00
[Writer] => Turner
[Publisher] => Bug Music Ltd
[TrackPLineYear] => 1997
[TrackPLineInfo] => Snapper Music
[isrc_ID] =>
[id] => jqg1
[copyID] =>
[oper] => add
)
如您所见，[isrc_ID] =>是空白的。我能想到的唯一解释 - 这是因为这个字段是隐藏的....
我该如何解决这个问题？
其次：jqGrid - 添加时 - 如果在按 + 添加行之前我有任何其他现有行 selected/clicked - 网格认为我正在编辑新行 [id] => jqg1 而不是添加。这是我的定义：
var editOptions = {
keys: true,
aftersavefunc: function() {
var $self = $(this);
setTimeout(function () {
$self.trigger("reloadGrid", [{current: true}]);
}, 50);
},
url: "xtras/Records.php"
},
gridIdSelector = "#Records",
pagerIdSelector = "#Records_pager",
$grid = $(gridIdSelector);
和寻呼机启动：
.jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"})
.jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}})
.jqGrid("navButtonAdd", pagerIdSelector, {
caption: "",
title: "Copy selected row",
id: $grid[0].id + "_ilcopy",
buttonicon: "ui-icon-copy",
onClickButton: function () {
var $self = $(this), p = $self.jqGrid("getGridParam"), rowData,
srcrowid = p.selrow, savedRows = p.savedRow;
if (srcrowid !== null) {
if (savedRows.length > 0) {
// cancel editing
$self.jqGrid("restoreRow", savedRows[0].id);
}
rowData = $self.jqGrid("getRowData", srcrowid);
rowData.id = "";
rowData.Catalogue = "";
rowData.copyID = srcrowid;
$self.jqGrid("addRow", {
initdata: rowData,
addRowParams: editOptions
});
} else {
alert("Please select a row to copy");
return false;
}
}
});
如何确保在内联编辑时完全重置之前的选择？
抱歉，我 运行 不知道为什么会出现这两种行为。如果您认为需要查看更多代码 - 请告诉我。
我不确定我是否完全理解你用自动完成描述的问题，但我想你希望该行将 不取消选择 如果它之前被选中.这是旧 jqGrid 的行为。您可以只添加选项
singleSelectClickMode: "selectonly"
恢复旧的选择行为。
我可以在您的代码中看到一些其他问题。免费的 jqGrid 已经实现了对 dataInit 回调的扩展。它的第二个参数 options 具有以下有用的属性：
rowId 的值类似于 "70"name 以列名作为值，例如 "invdate"id 的值类似于 "70_invdate"mode 的值类似于 "edit" 或 "add"
此外，DOM 元素 elem 已经放置在页面上，您可以使用 $(elem).closets("tr.jqgrow").attr("id") 之类的东西来获取 rowid。最好使用 options.rowId of cause 作为表达式 $(elem).closets("tr.jqgrow").attr("id").
因此我建议您更改代码的开头
dataInit:function (elem) {
var sel_row_id = $grid.jqGrid ('getGridParam', 'selrow');
if (sel_row_id === undefined || sel_row_id === null) {sel_row_id="jqg1";}
...
}
到
dataInit: function (elem, options) {
并使用 options.rowId 而不是下面的 sel_row_id。我必须强调分配 sel_row_id="jqg1" 是错误的。它可以在添加第一行时正常工作，但在添加下一行的情况下肯定是错误的。
最后dataInit的代码建议你替换
if(sel_row_id != 'jqg1'){
到
if (options.mode !== "add") {
已更新：我想您需要为 isrc_ID 使用 editable: "hidden" 属性 而不是 editable: true。你需要改变
$("#" + options.rowId + "_isrc_id").val(ui.item.isrc_ID);
到
$grid.jqGrid("setCell", options.rowId, "isrc_ID", ui.item.isrc_ID)
因为对 隐藏 字段使用 editable: true 不会创建任何隐藏的 <input> 元素。
我引入了选项 editable: "hidden" 属性 以提供向服务器发送任何不可编辑的附加列的简单方法。值得一提的是，用于内联和单元格编辑的 editable: "hidden" 功能仅在 4.11.0 版本的 jqGrid 中实现。我建议您从 GitHub 加载当前源，它与 4.11.0 相同，但另外包含一个重要修复。我将在本周末发布 4.11.1。
首先：我有以下列自动完成：
{name:'ISRC',index:'isrc.ISRC', width:100,align:"left",editable:true,
edittype:'text',
editoptions:{
dataInit:function (elem) {
var sel_row_id = $grid.jqGrid ('getGridParam', 'selrow');
if (sel_row_id === undefined || sel_row_id === null) {sel_row_id="jqg1";}
$(elem).autocomplete({
source: "xtras/search_isrc.php",
dataType: "json",
minLength: 2,
select: function(event, ui) {
console.log("EditOptions - "+sel_row_id);
// $("#"+sel_row_id+"_id").val(ui.item ? ui.item.isrc_ID : "");
$("#"+sel_row_id+"_ISRC").val(ui.item.ISRC);
$("#"+sel_row_id+"_Track_Name").val(ui.item.Track_Name);
$("#"+sel_row_id+"_Track_Time").val(ui.item.Track_Time);
$("#"+sel_row_id+"_ArtistName").val(ui.item.ArtistName);
$("#"+sel_row_id+"_Writer").val(ui.item.Writer);
$("#"+sel_row_id+"_Publisher").val(ui.item.Publisher);
$("#"+sel_row_id+"_TrackPLineYear").val(ui.item.TrackPLineYear);
$("#"+sel_row_id+"_TrackPLineInfo").val(ui.item.TrackPLineInfo);
$("#"+sel_row_id+"_isrc_id").val(ui.item.isrc_ID);
var ffs = ui.item.isrc_ID;
console.log("ffs - "+ffs);
},
change: function(event, ui) {
if (ui.item) {
$("#"+sel_row_id+"_ISRC").val(ui.item.ISRC);
$("#"+sel_row_id+"_Track_Name").val(ui.item.Track_Name);
$("#"+sel_row_id+"_Track_Time").val(ui.item.Track_Time);
$("#"+sel_row_id+"_ArtistName").val(ui.item.ArtistName);
$("#"+sel_row_id+"_Writer").val(ui.item.Writer);
$("#"+sel_row_id+"_Publisher").val(ui.item.Publisher);
$("#"+sel_row_id+"_TrackPLineYear").val(ui.item.TrackPLineYear);
$("#"+sel_row_id+"_TrackPLineInfo").val(ui.item.TrackPLineInfo);
$("#"+sel_row_id+"_isrc_id").val(ui.item.isrc_ID);
}
}
});
$('.ui-autocomplete').css('zIndex',1000); // if autocomplete has misalignment so we are manually setting it
if(sel_row_id != 'jqg1'){
$(elem).css({'border':'1px solid red','background-color':'#e8b7cf'});
}
}
}
},
...
{name:'isrc_ID',index:'isrc.isrc_ID', hidden:true, width:50, sortable:true, editable:true},
ffs 输入控制台正确的 id
我还在 doubleClick 上设置了内联编辑：
ondblClickRow: function (rowid) {
console.log('ondblClickRow - '+rowid);
var savedRows = $grid.jqGrid("getGridParam", "savedRow");
$grid.jqGrid("setSelection", rowid);
if (savedRows.length > 0 && savedRows[0].id !== rowid) {
// cancel editing of another row is editing
// don't cancel on double click on the current editing
$grid.jqGrid("restoreRow", savedRows[0].id);
}
if (savedRows.length === 0) {
$grid.jqGrid("editRow", rowid, editOptions);
}
}
我只能在这一行强制选择行后才能进行自动完成工作$grid.jqGrid("setSelection", rowid);
自动完成PHP:
$sql = "select * from isrc where Track_Name REGEXP '[[:<:]]($q)[[:alnum:]]' or ISRC REGEXP '[[:<:]]($q)[[:alnum:]]' GROUP BY ISRC;";
$rsd = mysqli_query($GLOBALS["___mysqli_ston"], $sql);
while($data = mysqli_fetch_array($rsd)) {
$row_array['value'] = $data['ISRC'];
$row_array['label'] = $data['ISRC'].' - '.$data['Track_Name'].' - '.$data['ArtistName'].' - '.$data['Track_Time'].' - '.$data['TrackPLineInfo'];
$row_array['ISRC'] = $data['ISRC'];
$row_array['Track_Name'] = $data['Track_Name'];
$row_array['ArtistName'] = $data['ArtistName'];
$row_array['Track_Time'] = $data['Track_Time'];
$row_array['Writer'] = $data['Writer'];
$row_array['Publisher'] = $data['Publisher'];
$row_array['TrackPLineYear'] = $data['TrackPLineYear'];
$row_array['TrackPLineInfo'] = $data['TrackPLineInfo'];
$row_array['isrc_ID'] = $data['isrc_ID'];
}
((is_null($___mysqli_res = mysqli_close($conn))) ? false : $___mysqli_res);
echo json_encode($row_array);
在 Select 自动完成看起来完全符合预期（所有字段都正确填写） 提交到服务器添加到数据库后，我得到这个：
_REQUEST - 2015-12-02 17:00:13:
Array
(
[Catalogue] => 1958
[ISRC] => GBCQV0200199
[Disc_Number] => 1
[Track_Number] => 4
[is_bonus] => No
[Track_Name] => Hitch Hiking Woman
[ArtistName] => Peter Green Splinter Group
[Track_Time] => 00:00:00
[Writer] => Turner
[Publisher] => Bug Music Ltd
[TrackPLineYear] => 1997
[TrackPLineInfo] => Snapper Music
[isrc_ID] =>
[id] => jqg1
[copyID] =>
[oper] => add
)
如您所见，[isrc_ID] =>是空白的。我能想到的唯一解释 - 这是因为这个字段是隐藏的....
我该如何解决这个问题？
其次：jqGrid - 添加时 - 如果在按 + 添加行之前我有任何其他现有行 selected/clicked - 网格认为我正在编辑新行 [id] => jqg1 而不是添加。这是我的定义：
var editOptions = {
keys: true,
aftersavefunc: function() {
var $self = $(this);
setTimeout(function () {
$self.trigger("reloadGrid", [{current: true}]);
}, 50);
},
url: "xtras/Records.php"
},
gridIdSelector = "#Records",
pagerIdSelector = "#Records_pager",
$grid = $(gridIdSelector);
和寻呼机启动：
.jqGrid("navGrid", pagerIdSelector, {add: false, edit: false, refreshstate: "current"})
.jqGrid("inlineNav", pagerIdSelector, { editParams: editOptions, addParams: {addRowParams: editOptions}})
.jqGrid("navButtonAdd", pagerIdSelector, {
caption: "",
title: "Copy selected row",
id: $grid[0].id + "_ilcopy",
buttonicon: "ui-icon-copy",
onClickButton: function () {
var $self = $(this), p = $self.jqGrid("getGridParam"), rowData,
srcrowid = p.selrow, savedRows = p.savedRow;
if (srcrowid !== null) {
if (savedRows.length > 0) {
// cancel editing
$self.jqGrid("restoreRow", savedRows[0].id);
}
rowData = $self.jqGrid("getRowData", srcrowid);
rowData.id = "";
rowData.Catalogue = "";
rowData.copyID = srcrowid;
$self.jqGrid("addRow", {
initdata: rowData,
addRowParams: editOptions
});
} else {
alert("Please select a row to copy");
return false;
}
}
});
如何确保在内联编辑时完全重置之前的选择？
抱歉，我 运行 不知道为什么会出现这两种行为。如果您认为需要查看更多代码 - 请告诉我。
我不确定我是否完全理解你用自动完成描述的问题，但我想你希望该行将 不取消选择 如果它之前被选中.这是旧 jqGrid 的行为。您可以只添加选项
singleSelectClickMode: "selectonly"
恢复旧的选择行为。
我可以在您的代码中看到一些其他问题。免费的 jqGrid 已经实现了对 dataInit 回调的扩展。它的第二个参数 options 具有以下有用的属性：
rowId的值类似于"70"name以列名作为值，例如"invdate"id的值类似于"70_invdate"mode的值类似于"edit"或"add"
此外，DOM 元素 elem 已经放置在页面上，您可以使用 $(elem).closets("tr.jqgrow").attr("id") 之类的东西来获取 rowid。最好使用 options.rowId of cause 作为表达式 $(elem).closets("tr.jqgrow").attr("id").
因此我建议您更改代码的开头
dataInit:function (elem) {
var sel_row_id = $grid.jqGrid ('getGridParam', 'selrow');
if (sel_row_id === undefined || sel_row_id === null) {sel_row_id="jqg1";}
...
}
到
dataInit: function (elem, options) {
并使用 options.rowId 而不是下面的 sel_row_id。我必须强调分配 sel_row_id="jqg1" 是错误的。它可以在添加第一行时正常工作，但在添加下一行的情况下肯定是错误的。
最后dataInit的代码建议你替换
if(sel_row_id != 'jqg1'){
到
if (options.mode !== "add") {
已更新：我想您需要为 isrc_ID 使用 editable: "hidden" 属性 而不是 editable: true。你需要改变
$("#" + options.rowId + "_isrc_id").val(ui.item.isrc_ID);
到
$grid.jqGrid("setCell", options.rowId, "isrc_ID", ui.item.isrc_ID)
因为对 隐藏 字段使用 editable: true 不会创建任何隐藏的 <input> 元素。
我引入了选项 editable: "hidden" 属性 以提供向服务器发送任何不可编辑的附加列的简单方法。值得一提的是，用于内联和单元格编辑的 editable: "hidden" 功能仅在 4.11.0 版本的 jqGrid 中实现。我建议您从 GitHub 加载当前源，它与 4.11.0 相同，但另外包含一个重要修复。我将在本周末发布 4.11.1。