如何避免在免费的 jqgrid 中单击单元格编辑时水平滚动
How to avoid horizontal scroll on single click cell editing in free jqgrid
下面的代码基于 How to set focus to cell which was clicked to start inline edit in jqgrid
的回答
用于将焦点放在单击的单元格上，以通过单击开始对该单元格进行内联编辑。
如果 jqgrid 很宽以便出现水平滚动条并且单击最右边的列，jqgrid 会滚动到最左边的列，然后滚动回单击的列。
这会导致令人不快的闪烁视觉效果。
如何消除这个闪烁？
要复制，请在 Chrome 中打开下面的页面，向右滚动并单击“金额”列。
网格在编辑开始前闪烁。
如何消除这个闪烁？
是否可以在此滚动期间关闭屏幕更新，将所有网格单元格
最初是编辑模式还是其他想法？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Oleg Kiriljuk"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $,Modernizr */
/*jslint browser: true, unparam: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }
],
$grid = $("#list"),
initDateEdit = function (elem, options) {
// we need get the value before changing the type
var orgValue = $(elem).val(), newformat,
cm = $(this).jqGrid("getColProp", options.name);
$(elem).attr("type", "date");
if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
// if type="date" is not supported call jQuery UI datepicker
$(elem).css({ width: "8em" }).datepicker({
dateFormat: "d.m.Y",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
} else {
// convert date to ISO
if (orgValue !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $(this).jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
$(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "Y-m-d"));
}
// "10em" is better for Chrome and "11em" for Opera 24
$(elem).css("width", /OPR/.test(navigator.userAgent) ? "11em" : "10em");
}
},
myBeforeSaveRow = function (options, rowid) {
var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
$dates.each(function () {
var $this = $(this), newformat, str,
id = $this.attr("id"),
colName = id.substr(rowid.length + 1),
cm = $self.jqGrid("getColProp", colName);
if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
// convert from iso to newformat
str = $this.val();
if (str !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $self.jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
str = $.jgrid.parseDate.call($self[0], "Y-m-d", str, newformat);
}
$this.attr("type", "text");
$this.val(str);
}
});
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "mm/dd/yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 50);
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
function PutFocus(target) {
setTimeout( function() {
$("input, select",target).focus();
$("input, select",target).select();
},100);
}
$grid.jqGrid({
datatype: "local",
//loadComplete: function() {
// $grid.jqGrid('setGridParam', { datatype: 'json' });
//},
data: mydata,
colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
colModel: [
{ name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
{ name: "invdate", width: 1625, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d.m.Y"}, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{ name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
{ name: "tax", width: 52, editable: true, template: numberTemplate },
{ name: "amount",
editable:true,"width":120,"classes":null,"hidden":false,
"editoptions":{"maxlength":60,"size":60}
/*, template: numberTemplate*/ },
{ name: "total", width: 60, template: numberTemplate }
],
rowNum: 10,
rowList: [5, 10, 20],
iconSet: "fontAwesome",
pager: "#pager",
gridview: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
height: "auto",
rownumbers: true,
editurl: "clientArray",
//editurl: "http://cdn.jsdelivr.net/test",
toppager: true,
beforeSelectRow: function (rowid, e) {
var $this = $(this), rows = this.rows,
// get id of the previous selected row
startId = $this.jqGrid('getGridParam', 'selrow'),
startRow, endRow, iStart, iEnd, i, rowidIndex,
colName = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
cmd = $grid.jqGrid('getGridParam', 'colModel');
if (cmd[colName].name === 'cb' ) {
return true;
}
$this.jqGrid("editRow", rowid);
PutFocus(e.target);
},
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
我不确定我是否正确理解了问题。 editRow 支持从 jqGrid 4.7 开始的 focusField 选项（参见 the documentation）。它也可以在免费的 jqGrid 中使用。值 focusField: false 将阻止将焦点设置到第一个可编辑列。您通常可以删除 PutFocus 函数并将其替换为 focusField: colName（名称 colName 似乎我不是最好的，因为它更多 iCol），其中 [=11 的值=] 应该是行中的列数。
下面的代码基于 How to set focus to cell which was clicked to start inline edit in jqgrid
的回答用于将焦点放在单击的单元格上，以通过单击开始对该单元格进行内联编辑。
如果 jqgrid 很宽以便出现水平滚动条并且单击最右边的列，jqgrid 会滚动到最左边的列，然后滚动回单击的列。
这会导致令人不快的闪烁视觉效果。 如何消除这个闪烁？
要复制，请在 Chrome 中打开下面的页面，向右滚动并单击“金额”列。 网格在编辑开始前闪烁。 如何消除这个闪烁？
是否可以在此滚动期间关闭屏幕更新，将所有网格单元格 最初是编辑模式还是其他想法？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Oleg Kiriljuk"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $,Modernizr */
/*jslint browser: true, unparam: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }
],
$grid = $("#list"),
initDateEdit = function (elem, options) {
// we need get the value before changing the type
var orgValue = $(elem).val(), newformat,
cm = $(this).jqGrid("getColProp", options.name);
$(elem).attr("type", "date");
if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
// if type="date" is not supported call jQuery UI datepicker
$(elem).css({ width: "8em" }).datepicker({
dateFormat: "d.m.Y",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
} else {
// convert date to ISO
if (orgValue !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $(this).jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
$(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "Y-m-d"));
}
// "10em" is better for Chrome and "11em" for Opera 24
$(elem).css("width", /OPR/.test(navigator.userAgent) ? "11em" : "10em");
}
},
myBeforeSaveRow = function (options, rowid) {
var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
$dates.each(function () {
var $this = $(this), newformat, str,
id = $this.attr("id"),
colName = id.substr(rowid.length + 1),
cm = $self.jqGrid("getColProp", colName);
if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
// convert from iso to newformat
str = $this.val();
if (str !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $self.jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
str = $.jgrid.parseDate.call($self[0], "Y-m-d", str, newformat);
}
$this.attr("type", "text");
$this.val(str);
}
});
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "mm/dd/yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 50);
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
function PutFocus(target) {
setTimeout( function() {
$("input, select",target).focus();
$("input, select",target).select();
},100);
}
$grid.jqGrid({
datatype: "local",
//loadComplete: function() {
// $grid.jqGrid('setGridParam', { datatype: 'json' });
//},
data: mydata,
colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
colModel: [
{ name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
{ name: "invdate", width: 1625, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d.m.Y"}, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{ name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
{ name: "tax", width: 52, editable: true, template: numberTemplate },
{ name: "amount",
editable:true,"width":120,"classes":null,"hidden":false,
"editoptions":{"maxlength":60,"size":60}
/*, template: numberTemplate*/ },
{ name: "total", width: 60, template: numberTemplate }
],
rowNum: 10,
rowList: [5, 10, 20],
iconSet: "fontAwesome",
pager: "#pager",
gridview: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
height: "auto",
rownumbers: true,
editurl: "clientArray",
//editurl: "http://cdn.jsdelivr.net/test",
toppager: true,
beforeSelectRow: function (rowid, e) {
var $this = $(this), rows = this.rows,
// get id of the previous selected row
startId = $this.jqGrid('getGridParam', 'selrow'),
startRow, endRow, iStart, iEnd, i, rowidIndex,
colName = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
cmd = $grid.jqGrid('getGridParam', 'colModel');
if (cmd[colName].name === 'cb' ) {
return true;
}
$this.jqGrid("editRow", rowid);
PutFocus(e.target);
},
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
我不确定我是否正确理解了问题。 editRow 支持从 jqGrid 4.7 开始的 focusField 选项（参见 the documentation）。它也可以在免费的 jqGrid 中使用。值 focusField: false 将阻止将焦点设置到第一个可编辑列。您通常可以删除 PutFocus 函数并将其替换为 focusField: colName（名称 colName 似乎我不是最好的，因为它更多 iCol），其中 [=11 的值=] 应该是行中的列数。