如何在高级搜索对话框中为只读字段指定值
How to specify value for read only field in advanced search dialog
我正在寻找一种允许用户在最新的免费 jqgrid 的高级搜索对话框中指定 vlaue 的方法。
我尝试了下面的代码并选择了高级搜索对话框。税务字段是只读的，不能更改。
如何解决这个问题？
<!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>Demonstrats loadFilterDefaults:true option</title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<style>
.ui-datepicker {
font-size: 76.39%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<!--<script src="jqGrid/js/jquery.jqGrid.src.js"></script>-->
<script>
//<![CDATA[
/*global $ */
/*jslint browser: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2015-10-01", name: "test", note: "note", ship_via: "TN", total: "" },
{ id: "20", invdate: "2015-09-01", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2015-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2015-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: "2015-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2015-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2015-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2015-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2015-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: "2015-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2015-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2015-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDatepicker = function (elem, options) {
var self = this, $elem = $(elem),
$gBox = $(this).closest(".ui-jqgrid"),
filterOnSelect = function () {
setTimeout(function () {
self.triggerToolbar();
}, 50);
},
triggerInputChangeOnSelect = function () {
$elem.change();
};
if ($gBox.hasClass("ui-jqgrid-bootstrap")) {
// uses bootstrap-datepicker.js
$elem.datepicker({
format: "dd-M-yyyy",
calendarWeeks: true,
clearBtn: true,
todayBtn: true,
todayHighlight: true,
});
// fix position of the datepicker
$elem.bind("show", function () {
var $datepicker = $("body>.datepicker-dropdown");
if ($gBox.length > 0 && $datepicker.length > 0) {
$datepicker.css("top",
this.getBoundingClientRect().top +
window.pageYOffset +
$(this).outerHeight());
}
});
} else {
// use jQuery UI datepicker
$elem.datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true,
onSelect: (options.mode === "filter" ? filterOnSelect : triggerInputChangeOnSelect)
});
}
};
$grid.jqGrid({
data: mydata,
colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "act", template: "actions" },
{ name: "name", align: "center", width: 92, editrules: { required: true },
searchoptions: { sopt: ["cn", "bw", "ew", "eq", "bn", "nc", "en"] } },
{ name: "invdate", width: 130, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { "readonly":"readonly","disabled":"disabled", dataInit: initDatepicker }, autoResizing: { minColWidth: 122 },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
{ name: "amount", width: 79, template: "number", autoResizing: { minColWidth: 61 } },
{ name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
{ name: "total", width: 76, template: "number" },
{ name: "closed", width: 80, template: "booleanCheckbox", firstsortorder: "desc" },
{ name: "ship_via", width: 85, align: "center", formatter: "select", autoResizing: { minColWidth: 85 },
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], noFilterText: "Any" } },
{ name: "note", width: 43, edittype: "textarea",
editoptions: { cols: 18 }, sortable: false }
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true },
//autoresizeOnLoad: true,
iconSet: "fontAwesome",
guiStyle: "bootstrap",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
toppager: true,
pager: true,
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
pagerRightWidth: 150,
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ op: "le", field: "tax", data: "20" },
{ op: "gt", field: "amount", data: "250" }
]
}
},
inlineEditing: {
keys: true
},
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
formViewing: {
labelswidth: ""
},
searching: {
//showQuery: true,
multipleSearch: true,
multipleGroup: true,
closeOnEscape: true,
searchOnEnter: true,
searchOperators: true,
width: 550
},
singleSelectClickMode: "selectonly", // optional setting
ondblClickRow: function (rowid) {
$(this).jqGrid("editGridRow", rowid);
},
caption: "Demonstrats loadFilterDefaults:true option"
}).jqGrid("navGrid", { view: true })
.jqGrid("inlineNav")
.jqGrid("filterToolbar")
.jqGrid("gridResize");
});
//]]>
</script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="list"></table>
</div>
</body>
</html>
似乎已将税务字段声明为已读 only/disabled。
在 $grid.jqGrid 元素中，删除此行中的 'editoptions: { readonly:"readonly", disabled:"disabled"},' 文本：
{ name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
通常您只需将单元格设置为不可编辑，如下所示：
editable:false
因此您的税金栏将配置如下：
{ name: "tax", editable:false, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
请参阅fiddle：https://jsfiddle.net/kx07h5uh/
另一种选择是挂钩搜索按钮的点击，当它被点击时设置搜索输入因此它不再被禁用，然后当搜索关闭时将其设置回来，
$(".fa-search").on("click", function(){
$("fieldtochange").prop("disabled", false);
});
此方法比仅设置列使其不再可编辑要复杂得多。
您可能会注意到，在使用内联编辑时，税务字段不再变成输入字段，而在使用编辑模式时，税务字段和标签不存在，为了解决这个问题，我会创建您自己的模式和将它挂接到自定义按钮，如果您需要帮助，我可以 post 在 jsFiddle 上。
更新#1：
根据有关 none 上述在您的情况下工作的新信息，我提出了以下解决方案：
searching: {
//showQuery: true,
multipleSearch: true,
multipleGroup: true,
closeOnEscape: true,
searchOnEnter: true,
searchOperators: true,
width: 550,
onClose:function(){
//do work
return true; // return true to close the search grid
},
onInitializeSearch:function(ele){
var inputs = ele.find("input[id^=jqg]");
$.each(inputs, function(index, element){
if($(element).attr("disabled", true)){
$(element).attr("disabled", false);
$(element).attr("readonly", false)
}
});
//$("input[name='tax']").attr("disabled", false);
//$("input[name='tax']").attr("readonly", false);
}
}
请看新的DEMO
更新#2
如果不对 col 值进行硬编码，您可以这样做：
var inputs = ele.find("input[id^=jqg]");
$(inputs).attr({
disabled: false,
readonly: false
});
如果您甚至不想使用 ^=jqg，您可以将该图片更改为 "input" 它仍然有效，它只是会查找该元素下的所有输入。
更新#3
仅使用 onInitializeSearch 只会使字段在表单加载时起作用，将其替换为 afterRedraw 将使它在每次添加或删除新过滤器时设置字段。
searching: {
//showQuery: true,
multipleSearch: true,
multipleGroup: true,
closeOnEscape: true,
searchOnEnter: true,
searchOperators: true,
width: 550,
onClose:function(){
//do work
return true; // return true to close the search grid
},
afterRedraw:function(ele){
var inputs = $(this).find("input[id^=jqg]");
$(inputs).attr({
disabled: false,
readonly: false
});
}
},
参见DEMO
还有 see search option documentation 您可以使用的任何其他选项。
感谢您报告错误！
可以使用 Noctane 描述的解决方法，但最好的方法是使用来自 GitHub 的最新资源。我现在发布了 the corresponding fix，这应该可以解决消除错误。
我正在寻找一种允许用户在最新的免费 jqgrid 的高级搜索对话框中指定 vlaue 的方法。
我尝试了下面的代码并选择了高级搜索对话框。税务字段是只读的，不能更改。 如何解决这个问题？
<!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>Demonstrats loadFilterDefaults:true option</title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<style>
.ui-datepicker {
font-size: 76.39%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<!--<script src="jqGrid/js/jquery.jqGrid.src.js"></script>-->
<script>
//<![CDATA[
/*global $ */
/*jslint browser: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2015-10-01", name: "test", note: "note", ship_via: "TN", total: "" },
{ id: "20", invdate: "2015-09-01", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2015-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2015-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: "2015-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2015-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2015-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2015-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2015-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: "2015-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2015-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2015-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDatepicker = function (elem, options) {
var self = this, $elem = $(elem),
$gBox = $(this).closest(".ui-jqgrid"),
filterOnSelect = function () {
setTimeout(function () {
self.triggerToolbar();
}, 50);
},
triggerInputChangeOnSelect = function () {
$elem.change();
};
if ($gBox.hasClass("ui-jqgrid-bootstrap")) {
// uses bootstrap-datepicker.js
$elem.datepicker({
format: "dd-M-yyyy",
calendarWeeks: true,
clearBtn: true,
todayBtn: true,
todayHighlight: true,
});
// fix position of the datepicker
$elem.bind("show", function () {
var $datepicker = $("body>.datepicker-dropdown");
if ($gBox.length > 0 && $datepicker.length > 0) {
$datepicker.css("top",
this.getBoundingClientRect().top +
window.pageYOffset +
$(this).outerHeight());
}
});
} else {
// use jQuery UI datepicker
$elem.datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true,
onSelect: (options.mode === "filter" ? filterOnSelect : triggerInputChangeOnSelect)
});
}
};
$grid.jqGrid({
data: mydata,
colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
colModel: [
{ name: "act", template: "actions" },
{ name: "name", align: "center", width: 92, editrules: { required: true },
searchoptions: { sopt: ["cn", "bw", "ew", "eq", "bn", "nc", "en"] } },
{ name: "invdate", width: 130, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { "readonly":"readonly","disabled":"disabled", dataInit: initDatepicker }, autoResizing: { minColWidth: 122 },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker } },
{ name: "amount", width: 79, template: "number", autoResizing: { minColWidth: 61 } },
{ name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
{ name: "total", width: 76, template: "number" },
{ name: "closed", width: 80, template: "booleanCheckbox", firstsortorder: "desc" },
{ name: "ship_via", width: 85, align: "center", formatter: "select", autoResizing: { minColWidth: 85 },
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], noFilterText: "Any" } },
{ name: "note", width: 43, edittype: "textarea",
editoptions: { cols: 18 }, sortable: false }
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true },
//autoresizeOnLoad: true,
iconSet: "fontAwesome",
guiStyle: "bootstrap",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
toppager: true,
pager: true,
rownumbers: true,
sortname: "invdate",
sortorder: "desc",
pagerRightWidth: 150,
search: true,
postData: {
filters: {
groupOp: "AND",
rules: [
{ op: "le", field: "tax", data: "20" },
{ op: "gt", field: "amount", data: "250" }
]
}
},
inlineEditing: {
keys: true
},
formEditing: {
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13]
},
formViewing: {
labelswidth: ""
},
searching: {
//showQuery: true,
multipleSearch: true,
multipleGroup: true,
closeOnEscape: true,
searchOnEnter: true,
searchOperators: true,
width: 550
},
singleSelectClickMode: "selectonly", // optional setting
ondblClickRow: function (rowid) {
$(this).jqGrid("editGridRow", rowid);
},
caption: "Demonstrats loadFilterDefaults:true option"
}).jqGrid("navGrid", { view: true })
.jqGrid("inlineNav")
.jqGrid("filterToolbar")
.jqGrid("gridResize");
});
//]]>
</script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="list"></table>
</div>
</body>
</html>
似乎已将税务字段声明为已读 only/disabled。
在 $grid.jqGrid 元素中，删除此行中的 'editoptions: { readonly:"readonly", disabled:"disabled"},' 文本：
{ name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
通常您只需将单元格设置为不可编辑，如下所示：
editable:false
因此您的税金栏将配置如下：
{ name: "tax", editable:false, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
请参阅fiddle：https://jsfiddle.net/kx07h5uh/
另一种选择是挂钩搜索按钮的点击，当它被点击时设置搜索输入因此它不再被禁用，然后当搜索关闭时将其设置回来，
$(".fa-search").on("click", function(){
$("fieldtochange").prop("disabled", false);
});
此方法比仅设置列使其不再可编辑要复杂得多。
您可能会注意到，在使用内联编辑时，税务字段不再变成输入字段，而在使用编辑模式时，税务字段和标签不存在，为了解决这个问题，我会创建您自己的模式和将它挂接到自定义按钮，如果您需要帮助，我可以 post 在 jsFiddle 上。
更新#1：
根据有关 none 上述在您的情况下工作的新信息，我提出了以下解决方案：
searching: {
//showQuery: true,
multipleSearch: true,
multipleGroup: true,
closeOnEscape: true,
searchOnEnter: true,
searchOperators: true,
width: 550,
onClose:function(){
//do work
return true; // return true to close the search grid
},
onInitializeSearch:function(ele){
var inputs = ele.find("input[id^=jqg]");
$.each(inputs, function(index, element){
if($(element).attr("disabled", true)){
$(element).attr("disabled", false);
$(element).attr("readonly", false)
}
});
//$("input[name='tax']").attr("disabled", false);
//$("input[name='tax']").attr("readonly", false);
}
}
请看新的DEMO
更新#2
如果不对 col 值进行硬编码，您可以这样做：
var inputs = ele.find("input[id^=jqg]");
$(inputs).attr({
disabled: false,
readonly: false
});
如果您甚至不想使用 ^=jqg，您可以将该图片更改为 "input" 它仍然有效，它只是会查找该元素下的所有输入。
更新#3
仅使用 onInitializeSearch 只会使字段在表单加载时起作用，将其替换为 afterRedraw 将使它在每次添加或删除新过滤器时设置字段。
searching: {
//showQuery: true,
multipleSearch: true,
multipleGroup: true,
closeOnEscape: true,
searchOnEnter: true,
searchOperators: true,
width: 550,
onClose:function(){
//do work
return true; // return true to close the search grid
},
afterRedraw:function(ele){
var inputs = $(this).find("input[id^=jqg]");
$(inputs).attr({
disabled: false,
readonly: false
});
}
},
参见DEMO
还有 see search option documentation 您可以使用的任何其他选项。
感谢您报告错误！
可以使用 Noctane 描述的解决方法，但最好的方法是使用来自 GitHub 的最新资源。我现在发布了 the corresponding fix，这应该可以解决消除错误。