JQGrid - 垂直滚动不适用于冻结列
JQGrid - Vertical scroll not working on Frozen columns
我有一个超过 20 列的 JQGrid。所以我将前 3 列保持为冻结状态，并且网格没有分页。因此，根据要求，我们添加了主要 div 的高度，以便用户可以滚动 up/down。现在，在添加冻结列后，滚动会出现在网格的右侧，并且当鼠标在任何未冻结的列上滚动时它会起作用。但是当我尝试将鼠标滚动到冻结的列上时，滚动不起作用。将感谢任何 clue/solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<style>
html, body { font-size: 75%; }
.ui-datepicker select.ui-datepicker-year,
.ui-datepicker select.ui-datepicker-month {
color: black
}
.ui-jqgrid >.ui-jqgrid-pager .navtable,
.ui-jqgrid >.ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
font-size: 16px;
}
.ui-pg-table .ui-pg-button:hover {
border: 0 none;
background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-pg-table .ui-pg-table .ui-pg-button:hover {
font-weight: normal;
padding: 0;
margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
font-weight: normal;
padding: 0;
margin: 2px;
}
.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
margin: 0 1px;
border: 0 none;
background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<!--<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>-->
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<!--<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.fontAwesome4.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.checkboxFontAwesome4.js"></script>-->
<script>
//<![CDATA[
/*global $ */
/*jslint browser: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "", tax: "", closed: true, ship_via: "TN", total: "" },
{ 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 test4 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" },
{ id: "60", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2007-09-01", name: "test9 test9 test9 test9 test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 100);
},
integerTemplate = {formatter: "integer", align: "right", sorttype: "integer",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }};
$.extend(true, $.jgrid.icons, {
common: "fa fa-lg"
});
$grid.jqGrid({
data: mydata,
colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "act", template: "actions", width: 60 },
{ name: "name", align: "center", width: 65, editrules: {required: true} },
{ name: "invdate", width: 80, align: "center", sorttype: "date", frozen: true,
formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "amount", width: 75, template: "number" },
{ name: "tax", width: 52, template: "number", autoResizableMinColSize: 40 },
{ name: "total", width: 60, template: "number" },
{name: "closed", width: 70, align: "center", formatter: "checkboxFontAwesome4", //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", 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, edittype: "textarea" }
],
cmTemplate: { editable: true, autoResizable: true },
rowNum: 10,
autoResizing: { compact: true },
resizeStop: function () {
var newWidth = this.grid.newWidth, maxIterations = 3, i;
for (i = 0; i < maxIterations; i++) {
// resize without shrinking
$(this).jqGrid("setGridWidth", newWidth + i, false);
if (this.grid.bDiv.offsetHeight <= this.grid.bDiv.clientHeight) {
break;
}
}
},
rowList: [5, 10, 20],
pager: "#pager", // "#pa\.ger" or "pa.ger"
//pginput: false,
//pgbuttons: false,
viewrecords: true,
//gridview: false,
iconSet: "fontAwesome",
toppager: true,
toolbar: [true, "both"],
footerrow: true,
multiselect: true,
rownumbers: true,
//direction: "rtl",
//recordpos: "left",
//cellEdit: true,
//beforeSaveCell: function (rowid, name, value, iRow, iCol) {
// var cm = this.p.colModel[iCol];
// return cm.formatter !== "date" ? value : $.unformat.date.call(this, value, cm);
//},
sortname: "invdate",
sortorder: "desc",
resizeDblClick: function (iCol, cm) {
//alert("DblClick on the column resizer of the column \"" + cm.name + "\"");
//autoResizeColumn.call(this, iCol);
},
onSelectRow: function (rowid, stat, e) {
return;
},
inlineEdit: {
keys: true
},
//viewsortcols: [true, "horizontal", false], // [true, "vertical", false] or [true, "vertical", false]
//subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
$("#" + $.jgrid.jqID(subgridDivId)).html("<em>simple subgrid data for the row with id=" + rowId + "</em>");
},
caption: "Demonstration of the usage sortable:true and frozen formatter: \"actions\"",
width: 500,
sortable: true,
height: 200,
shrinkToFit: false,
autoresizeOnLoad: true
});
//$grid.jqGrid("setFrozenColumns");
$grid.jqGrid("navGrid", "#pager", {view: true, cloneToTop: true/*, position: "right"*/})
.jqGrid("inlineNav", "#list_toppager")
.jqGrid("inlineNav", "#pager")
.jqGrid("filterToolbar");
//$grid.jqGrid("destroyFrozenColumns");
$grid.jqGrid("setFrozenColumns");
//$grid.trigger("jqGridResetFrozenHeights");
//$.jgrid.info_dialog($.jgrid.errors.errcap, "Test message", $.jgrid.edit.bClose);
//$grid.jqGrid("sortableRows");
//$("#outerDiv").show();
//$grid.jqGrid("autoResizeAllColumns");
$grid.jqGrid("gridResize"); // , {handles: "e, w", shrinkToFit: false}
//var allData = $grid.jqGrid("getRowData");
$(window).on("resize", function() {
$("table.ui-jqgrid-btable").each(function () {
$(this).trigger("jqGridResetFrozenHeights");
});
});
});
//]]>
</script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="list"></table>
<div id="pager"></div>
</div>
</body>
</html>
如果我正确理解了问题，那么您需要在冻结列上使用鼠标滚轮。执行此操作，您可以在 在 调用 setFrozenColumns:
的某处添加以下代码
$($grid[0].grid.fbDiv).bind("mousewheel DOMMouseScroll", function (e) {
$grid[0].grid.bDiv.scrollTop -= e.type === "mousewheel" ?
e.originalEvent.wheelDelta / 10 :
-e.originalEvent.detail * 6;
});
它应该可以工作，但我确信 delta 的值的计算应该得到改进。我会考虑在 setFrozenColumns 的主要代码中进行更改以自动执行相同的操作（在免费的 jqGrid 代码中）。
在您的页面上添加以下样式，这对我很有用。
.frozen-bdiv {
pointer-events: none;
}
我有一个超过 20 列的 JQGrid。所以我将前 3 列保持为冻结状态，并且网格没有分页。因此，根据要求，我们添加了主要 div 的高度，以便用户可以滚动 up/down。现在，在添加冻结列后，滚动会出现在网格的右侧，并且当鼠标在任何未冻结的列上滚动时它会起作用。但是当我尝试将鼠标滚动到冻结的列上时，滚动不起作用。将感谢任何 clue/solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<style>
html, body { font-size: 75%; }
.ui-datepicker select.ui-datepicker-year,
.ui-datepicker select.ui-datepicker-month {
color: black
}
.ui-jqgrid >.ui-jqgrid-pager .navtable,
.ui-jqgrid >.ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
font-size: 16px;
}
.ui-pg-table .ui-pg-button:hover {
border: 0 none;
background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-pg-table .ui-pg-table .ui-pg-button:hover {
font-weight: normal;
padding: 0;
margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
font-weight: normal;
padding: 0;
margin: 2px;
}
.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
margin: 0 1px;
border: 0 none;
background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<!--<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>-->
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<!--<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.fontAwesome4.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.checkboxFontAwesome4.js"></script>-->
<script>
//<![CDATA[
/*global $ */
/*jslint browser: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "", tax: "", closed: true, ship_via: "TN", total: "" },
{ 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 test4 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" },
{ id: "60", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2007-09-01", name: "test9 test9 test9 test9 test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 100);
},
integerTemplate = {formatter: "integer", align: "right", sorttype: "integer",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }};
$.extend(true, $.jgrid.icons, {
common: "fa fa-lg"
});
$grid.jqGrid({
data: mydata,
colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "act", template: "actions", width: 60 },
{ name: "name", align: "center", width: 65, editrules: {required: true} },
{ name: "invdate", width: 80, align: "center", sorttype: "date", frozen: true,
formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "amount", width: 75, template: "number" },
{ name: "tax", width: 52, template: "number", autoResizableMinColSize: 40 },
{ name: "total", width: 60, template: "number" },
{name: "closed", width: 70, align: "center", formatter: "checkboxFontAwesome4", //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", 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, edittype: "textarea" }
],
cmTemplate: { editable: true, autoResizable: true },
rowNum: 10,
autoResizing: { compact: true },
resizeStop: function () {
var newWidth = this.grid.newWidth, maxIterations = 3, i;
for (i = 0; i < maxIterations; i++) {
// resize without shrinking
$(this).jqGrid("setGridWidth", newWidth + i, false);
if (this.grid.bDiv.offsetHeight <= this.grid.bDiv.clientHeight) {
break;
}
}
},
rowList: [5, 10, 20],
pager: "#pager", // "#pa\.ger" or "pa.ger"
//pginput: false,
//pgbuttons: false,
viewrecords: true,
//gridview: false,
iconSet: "fontAwesome",
toppager: true,
toolbar: [true, "both"],
footerrow: true,
multiselect: true,
rownumbers: true,
//direction: "rtl",
//recordpos: "left",
//cellEdit: true,
//beforeSaveCell: function (rowid, name, value, iRow, iCol) {
// var cm = this.p.colModel[iCol];
// return cm.formatter !== "date" ? value : $.unformat.date.call(this, value, cm);
//},
sortname: "invdate",
sortorder: "desc",
resizeDblClick: function (iCol, cm) {
//alert("DblClick on the column resizer of the column \"" + cm.name + "\"");
//autoResizeColumn.call(this, iCol);
},
onSelectRow: function (rowid, stat, e) {
return;
},
inlineEdit: {
keys: true
},
//viewsortcols: [true, "horizontal", false], // [true, "vertical", false] or [true, "vertical", false]
//subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
$("#" + $.jgrid.jqID(subgridDivId)).html("<em>simple subgrid data for the row with id=" + rowId + "</em>");
},
caption: "Demonstration of the usage sortable:true and frozen formatter: \"actions\"",
width: 500,
sortable: true,
height: 200,
shrinkToFit: false,
autoresizeOnLoad: true
});
//$grid.jqGrid("setFrozenColumns");
$grid.jqGrid("navGrid", "#pager", {view: true, cloneToTop: true/*, position: "right"*/})
.jqGrid("inlineNav", "#list_toppager")
.jqGrid("inlineNav", "#pager")
.jqGrid("filterToolbar");
//$grid.jqGrid("destroyFrozenColumns");
$grid.jqGrid("setFrozenColumns");
//$grid.trigger("jqGridResetFrozenHeights");
//$.jgrid.info_dialog($.jgrid.errors.errcap, "Test message", $.jgrid.edit.bClose);
//$grid.jqGrid("sortableRows");
//$("#outerDiv").show();
//$grid.jqGrid("autoResizeAllColumns");
$grid.jqGrid("gridResize"); // , {handles: "e, w", shrinkToFit: false}
//var allData = $grid.jqGrid("getRowData");
$(window).on("resize", function() {
$("table.ui-jqgrid-btable").each(function () {
$(this).trigger("jqGridResetFrozenHeights");
});
});
});
//]]>
</script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="list"></table>
<div id="pager"></div>
</div>
</body>
</html>
如果我正确理解了问题，那么您需要在冻结列上使用鼠标滚轮。执行此操作，您可以在 在 调用 setFrozenColumns:
$($grid[0].grid.fbDiv).bind("mousewheel DOMMouseScroll", function (e) {
$grid[0].grid.bDiv.scrollTop -= e.type === "mousewheel" ?
e.originalEvent.wheelDelta / 10 :
-e.originalEvent.detail * 6;
});
它应该可以工作，但我确信 delta 的值的计算应该得到改进。我会考虑在 setFrozenColumns 的主要代码中进行更改以自动执行相同的操作（在免费的 jqGrid 代码中）。
在您的页面上添加以下样式，这对我很有用。
.frozen-bdiv {
pointer-events: none;
}