如何在高级搜索对话框中指定只读字段的值
问题描述：
我正在寻找一种方法来允许用户在最新的免费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>
答
看来，税务字段被声明为只读/禁用。从该行文本
在$ grid.jqGrid元素，去掉 'editoptions：{ “已禁用” 只读： “只读”，禁用}'：
{ name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
+0
删除这些使得税务字段可编辑。税务字段必须是只读的。问题问如何通过只读字段进行搜索。 – Andrus
+0
啊，我误解了。对于那个很抱歉！ – runningviolent
答
通常你只需设置细胞不可编辑是这样的：
editable:false
所以，你的税列会像这样被配置：
{ name: "tax", editable:false, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
普莱斯e见琴：https://jsfiddle.net/kx07h5uh/
另一种选择是挂接到搜索按钮，当它的点击设置搜索输入，所以它不再是禁用的，那么当搜索关闭其设回的点击，
$(".fa-search").on("click", function(){
$("fieldtochange").prop("disabled", false);
});
这种方法比设置列的方法要复杂得多，因此不再可编辑。
您可能会注意到，在使用内联编辑时，税务字段不再变成输入字段，并且在使用编辑模式时，税务字段和标签不存在，为了解决该问题，我会创建自己的模式和钩子它到一个自定义按钮，如果你需要帮助，我可以张贴在jsFiddle上。
更新＃1：
与关于以上都不是你的情况的工作我已经想出了以下解决方案新的信息：
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
UPDATE＃2
这里是你将如何使用了硬编码的山坳值做到这一点：
var inputs = ele.find("input[id^=jqg]");
$(inputs).attr({
disabled: false,
readonly: false
});
如果你甚至要使用的^=jqg你可以改变PICE到"input"它仍然可以工作，只是会看对于该要素下的所有投入。
更新＃3
只需使用onInitializeSearch只发在窗体加载外地工作，与取代它将使每一个新的过滤器被添加或删除时设定的领域。
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你可以使用任何其他选项。
谢谢。今天github的代码在'filterToolbar'中导致异常。这是张贴在http://stackoverflow.com/questions/36436813/how-to-fix-filter-parsing-in-latest-free-jqgrid-from-github – Andrus