如何在 jqgrid 表单编辑中保存数字输入类型的结果
how to save result from number input type in jqgrid form editing
免费 jqgrid 的输入类型=数字列定义为
{
name: "amount", width: 62, template: "number",
formatter: "number", formatoptions: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000' },
editoptions: {
maxlength: 4,
type: "number",
max: "9999"
}
},
如果在表单编辑中更改了此列，则不会保存更改的值。
此外，可以从键盘输入大于 9999 的值。
要重现，请在 Chrome.
中打开下面的代码（根据 Adding new row to jqGrid using modal form on client only 答案修改）
Select 行，按编辑按钮并更改金额列。
按保存按钮。
更改的金额未显示在网格中。
也可以从键盘输入大于 9999 的数字。
如何解决这个问题？在实际应用程序中，数据使用 json 格式保存到服务器。在这种情况下，存在相同的问题。
<!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>
<title>
<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://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/css/ui.jqgrid.css"/>
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint plusplus: true, browser: true, eqeq: true */
$(function () {
"use strict";
var mydata = [
{id: "10", invdate: "2013-11-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
{id: "20", invdate: "2013-11-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
{id: "30", invdate: "2013-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00"},
{id: "40", invdate: "2013-11-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
{id: "50", invdate: "2013-11-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
{id: "60", invdate: "2013-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00"},
{id: "70", invdate: "2013-11-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
{id: "80", invdate: "2013-11-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
{id: "90", invdate: "2013-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00"},
{id: "100", invdate: "2013-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00"},
{id: "110", invdate: "2013-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"},
{id: "120", invdate: "2013-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"}
],
editSettings = {
checkOnUpdate: true,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true
},
addSettings = {
checkOnUpdate: true,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true
},
delSettings = {
onclickSubmit: function () {
var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;
if (p.lastpage > 1) {// on the multipage grid reload the grid
if (p.reccount === 1 && newPage === p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
setTimeout(function () {
$this.trigger("reloadGrid", [{page: newPage}]);
}, 50);
}
return true;
}
},
initDateEdit = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
showOn: "button",
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 50);
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 50);
},
removeTheOptionAll = function (elem) {
// We use "value" in the searchoption property of some columns of the colModel.
// The option {"": "All"} neams "No filter" and should be displayed only
// in the searching toolbar and not in the searching dialog.
// So we use dataInit:removeTheOptionAll inside of searchoptions to remove
// the option {"": "All"} in case of the searching dialog
if (elem != null && typeof elem.id === "string" && elem.id.substr(0, 3) !== "gs_") {
// we are NOT in the searching bar
$(elem).find("option[value=\"\"]").remove(); // remove "All" option
}
};
$("#list").jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{name: "name", width: 60, editrules: {required: true}},
{name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: {newformat: "d-M-Y", reformatAfterEdit: true},
editoptions: {dataInit: initDateEdit, size: 14},
searchoptions: {dataInit: initDateSearch}},
{
name: "amount", width: 62, template: "number",
formatter: "number", formatoptions: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000' },
editoptions: {
maxlength: 4,
type: "number",
max: "9999"
}
},
//{ name: "amount", width: 70, formatter: "number", align: "right" },
{ name: "tax", width: 50, formatter: "number", align: "right" },
{name: "total", width: 60, formatter: "number", align: "right"},
{name: "closed", width: 70, align: "center", formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":All;true:Yes;false:No",
dataInit: removeTheOptionAll
}},
{name: "ship_via", width: 100, align: "center", formatter: "select",
edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "TN"},
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":All;FE:FedEx;TN:TNT;IN:Intim",
dataInit: removeTheOptionAll
}},
{name: "note", width: 60, sortable: false, edittype: "textarea"}
],
cmTemplate: {editable: true, searchoptions: {clearSearch: false }},
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
caption: "Demonstrates implementating of local form editing",
height: "100%",
editurl: "clientArray",
ondblClickRow: function (rowid) {
var $this = $(this), selRowId = $this.jqGrid("getGridParam", "selrow");
if (selRowId !== rowid) {
// prevent the row from be unselected on double-click
// the implementation is for "multiselect:false" which we use,
// but one can easy modify the code for "multiselect:true"
$this.jqGrid("setSelection", rowid);
}
$this.jqGrid("editGridRow", rowid, editSettings);
}
}).jqGrid("navGrid", "#pager", {}, editSettings, addSettings, delSettings, {
multipleSearch: true,
overlay: false,
onClose: function () {
// if we close the search dialog during the datapicker are opened
// the datepicker will stay opened. To fix this we have to hide
// the div used by datepicker
$("div#ui-datepicker-div.ui-datepicker").hide();
}
}).jqGrid("filterToolbar", { defaultSearch: "cn" });
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
该演示使用旧的 jqGrid 4.7.0。此外，您使用了 amount 列的一些不正确的属性：
defaultValue: '0.0000'在使用decimalSeparator: ","maxlength: 4 在使用像 200.0000 这样有 8 个字符的值时是错误的。
然而，表单编辑不允许使用 type 支持值列表中的其他值。我刚刚在 GitHub 上发帖 the fix to free jqGrid。您可以尝试使用最新的免费 jqGrid 资源。现在可以使用了。
免费 jqgrid 的输入类型=数字列定义为
{
name: "amount", width: 62, template: "number",
formatter: "number", formatoptions: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000' },
editoptions: {
maxlength: 4,
type: "number",
max: "9999"
}
},
如果在表单编辑中更改了此列，则不会保存更改的值。 此外，可以从键盘输入大于 9999 的值。
要重现，请在 Chrome.
中打开下面的代码（根据 Adding new row to jqGrid using modal form on client only 答案修改）Select 行，按编辑按钮并更改金额列。 按保存按钮。 更改的金额未显示在网格中。
也可以从键盘输入大于 9999 的数字。 如何解决这个问题？在实际应用程序中，数据使用 json 格式保存到服务器。在这种情况下，存在相同的问题。
<!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>
<title>
<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://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/css/ui.jqgrid.css"/>
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint plusplus: true, browser: true, eqeq: true */
$(function () {
"use strict";
var mydata = [
{id: "10", invdate: "2013-11-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
{id: "20", invdate: "2013-11-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
{id: "30", invdate: "2013-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00"},
{id: "40", invdate: "2013-11-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
{id: "50", invdate: "2013-11-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
{id: "60", invdate: "2013-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00"},
{id: "70", invdate: "2013-11-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00"},
{id: "80", invdate: "2013-11-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00"},
{id: "90", invdate: "2013-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00"},
{id: "100", invdate: "2013-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00"},
{id: "110", invdate: "2013-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"},
{id: "120", invdate: "2013-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00"}
],
editSettings = {
checkOnUpdate: true,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true
},
addSettings = {
checkOnUpdate: true,
reloadAfterSubmit: false,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true
},
delSettings = {
onclickSubmit: function () {
var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;
if (p.lastpage > 1) {// on the multipage grid reload the grid
if (p.reccount === 1 && newPage === p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
setTimeout(function () {
$this.trigger("reloadGrid", [{page: newPage}]);
}, 50);
}
return true;
}
},
initDateEdit = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
showOn: "button",
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 50);
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 50);
},
removeTheOptionAll = function (elem) {
// We use "value" in the searchoption property of some columns of the colModel.
// The option {"": "All"} neams "No filter" and should be displayed only
// in the searching toolbar and not in the searching dialog.
// So we use dataInit:removeTheOptionAll inside of searchoptions to remove
// the option {"": "All"} in case of the searching dialog
if (elem != null && typeof elem.id === "string" && elem.id.substr(0, 3) !== "gs_") {
// we are NOT in the searching bar
$(elem).find("option[value=\"\"]").remove(); // remove "All" option
}
};
$("#list").jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{name: "name", width: 60, editrules: {required: true}},
{name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: {newformat: "d-M-Y", reformatAfterEdit: true},
editoptions: {dataInit: initDateEdit, size: 14},
searchoptions: {dataInit: initDateSearch}},
{
name: "amount", width: 62, template: "number",
formatter: "number", formatoptions: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000' },
editoptions: {
maxlength: 4,
type: "number",
max: "9999"
}
},
//{ name: "amount", width: 70, formatter: "number", align: "right" },
{ name: "tax", width: 50, formatter: "number", align: "right" },
{name: "total", width: 60, formatter: "number", align: "right"},
{name: "closed", width: 70, align: "center", formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":All;true:Yes;false:No",
dataInit: removeTheOptionAll
}},
{name: "ship_via", width: 100, align: "center", formatter: "select",
edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "TN"},
stype: "select",
searchoptions: {
sopt: ["eq", "ne"],
value: ":All;FE:FedEx;TN:TNT;IN:Intim",
dataInit: removeTheOptionAll
}},
{name: "note", width: 60, sortable: false, edittype: "textarea"}
],
cmTemplate: {editable: true, searchoptions: {clearSearch: false }},
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
caption: "Demonstrates implementating of local form editing",
height: "100%",
editurl: "clientArray",
ondblClickRow: function (rowid) {
var $this = $(this), selRowId = $this.jqGrid("getGridParam", "selrow");
if (selRowId !== rowid) {
// prevent the row from be unselected on double-click
// the implementation is for "multiselect:false" which we use,
// but one can easy modify the code for "multiselect:true"
$this.jqGrid("setSelection", rowid);
}
$this.jqGrid("editGridRow", rowid, editSettings);
}
}).jqGrid("navGrid", "#pager", {}, editSettings, addSettings, delSettings, {
multipleSearch: true,
overlay: false,
onClose: function () {
// if we close the search dialog during the datapicker are opened
// the datepicker will stay opened. To fix this we have to hide
// the div used by datepicker
$("div#ui-datepicker-div.ui-datepicker").hide();
}
}).jqGrid("filterToolbar", { defaultSearch: "cn" });
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
该演示使用旧的 jqGrid 4.7.0。此外，您使用了 amount 列的一些不正确的属性：
defaultValue: '0.0000'在使用decimalSeparator: ","的情况下是错误的
maxlength: 4在使用像200.0000这样有 8 个字符的值时是错误的。
然而，表单编辑不允许使用 type 支持值列表中的其他值。我刚刚在 GitHub 上发帖 the fix to free jqGrid。您可以尝试使用最新的免费 jqGrid 资源。现在可以使用了。