我正在寻找一种方法，允许用户在最新的免费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>
答案 0 :(得分：2)
感谢您报告错误！
可以使用Noctane描述的解决方法，但最好的方法是使用GitHub的最新资源。我现在发布了the corresponding fix，这应该可以解决这个问题。
答案 1 :(得分：1)
Typically you would just set the cell to not editable like this:
editable:false
So your tax column would be configured like this:
{ name: "tax", editable:false, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
Please see fiddle: https://jsfiddle.net/kx07h5uh/
Another option would be to hook into the click of the search button, when its clicked set the search input so it is no longer disabled, then when the search is closed set it back,
$(".fa-search").on("click", function(){
$("fieldtochange").prop("disabled", false);
});
this method would be a lot more complicated than just setting the column so it is no longer editable.
You will probably notice that in using inline edit the tax field no longer turns into an input field and when using the edit modal the tax field and label is just not there, to solve that I would create your own modal and hook it to a custom button, if you need help with that I can post that on jsFiddle.
UPDATE #1:
With the new information regarding none of the above working in your situation I have come up with the following solution:
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);
}
}
Please see new DEMO
UPDATE #2
Here is how you would do it with out hard-coding the col values:
var inputs = ele.find("input[id^=jqg]");
$(inputs).attr({
disabled: false,
readonly: false
});
If you dont even want to use the ^=jqg you can just change that pice to "input" it will still work, it just will look for all inputs under that element.
UPDATE #3
Using just onInitializeSearch only made the field work on form load, replacing it with afterRedraw will make it set the field every time a new filter is added or removed.
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
});
}
},
SEE DEMO
Also see search option documentation for any other options you could use.
答案 2 :(得分：-1)
似乎税目字段被声明为只读/禁用。
在$ grid.jqGrid元素中，删除'editoptions：{readonly：“readonly”，disabled：“disabled”}，'来自此行的文字：
{ name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },