Jquery 如何在“高级搜索”对话框中为只读字段指定值
我正在寻找一种方法，允许用户在最新的免费jqgrid中的高级搜索对话框中指定vlaue 我尝试了下面的代码并选择了高级搜索对话框。税务字段为只读，无法更改。 如何解决这个问题Jquery 如何在“高级搜索”对话框中为只读字段指定值,jquery,jqgrid,free-jqgrid,Jquery,Jqgrid,Free Jqgrid,我正在寻找一种方法，允许用户在最新的免费jqgrid中的高级搜索对话框中指定vlaue 我尝试了下面的代码并选择了高级搜索对话框。税务字段为只读，无法更改。 如何解决这个问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
<!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>
演示loadFilterDefaults:true选项
.ui日期选择器{
字体大小：76.39%；
}
$.jgrid=$.jgrid | |{}；
$.jgrid.no_legacy_api=true；
//0&&$datepicker.length>0）{
$datepicker.css（“顶部”，
这是.getBoundingClientRect（）.top+
window.pageYOffset+
$（this.outerHeight（））；
}
});
}否则{
//使用jQueryUIDatePicker
$elem.datepicker({
日期格式：“dd-M-yy”，
自动调整大小：正确，
变化年：是的，
变化月：对，
showButtonPanel：是的，
《秀周刊》：没错，
onSelect：（options.mode==“过滤器”？过滤器选择：触发器输入更改onSelect）
});
}
};
$grid.jqGrid({
数据：mydata，
ColName:[“”、“客户”、“日期”、“金额”、“税款”、“总额”、“已结清”、“通过发货”、“备注”]，
colModel：[
{name:“act”，模板：“actions”}，
{name:“name”，align:“center”，宽度：92，编辑规则：{required:true}，
搜索选项：{sopt:[“cn”、“bw”、“ew”、“eq”、“bn”、“nc”、“en”]}，
{名称：“invdate”，宽度：130，对齐：“中心”，排序类型：“日期”，
格式化程序：“日期”，格式化选项：{newformat:“d-M-Y”}，
editoptions:{“readonly”：“readonly”，“disabled”：“disabled”，dataInit:initDatepicker}，自动调整大小：{minColWidth:122}，
搜索选项：{sopt:[“eq”、“ne”、“lt”、“le”、“gt”、“ge”]，dataInit:initDatepicker}，
{name:“amount”，width:79，template:“number”，自动调整大小：{minColWidth:61}，
{name:“tax”，editoptions:{readonly:“readonly”，disabled:“disabled”}，宽度：70，模板：“number”，自动调整大小：{minColWidth:55}，
{名称：“总计”，宽度：76，模板：“编号”}，
{name:“closed”，宽度：80，模板：“booleanCheckbox”，firstsortorder:“desc”}，
{name:“ship_via”，宽度：85，对齐：“center”，格式化程序：“select”，自动调整大小：{minColWidth:85}，
edittype:“选择”，editoptions:{value:“FE:FedEx；TN:TNT；IN:Intim”，defaultValue:“IN”}，
stype：“选择”，搜索选项：{sopt:[“eq”，“ne”]，noFilterText:“Any”}，
{名称：“注意”，宽度：43，编辑类型：“textarea”，
编辑选项：{cols:18}，可排序：false}
],
cmTemplate:{自动调整大小：true，可编辑：true}，
自动调整大小：{compact:true}，
//autoresizeOnLoad：正确，
iconSet：“真棒”，
guiStyle:“引导”，
rowNum:10，
行列表：[5,10,20，“10000:全部”]，
viewrecords：是的，
自动编码：正确，
可排序：是的，
是的，
寻呼机：是的，
行数：对，
sortname:“invdate”，
巫师：“描述”，
页面宽度：150，
搜索：对，
postData:{
过滤器：{
groupOp:“和”，
规则：[
{op:“le”，字段：“tax”，数据：“20”}，
{op:“gt”，字段：“金额”，数据：“250”}
]
}
},
在线编辑：{
钥匙：是的
},
表格编辑：{
宽度：310，
closeOnEscape：没错，
closeAfterEdit:true，
savekey:[true，13]
},
表单查看：{
标签宽度：“
},
搜索：{
//showQuery：对，
多重搜索：对，
多组：对，
closeOnEscape：没错，
是的，
是的，
宽度：550
},
singleSelectClickMode:“selectonly”，//可选设置
ondblClickRow:函数（rowid）{
$（this.jqGrid（“editGridRow”，rowid）；
},
描述：“演示loadFilterDefaults:true选项”
}).jqGrid（“navGrid”，{view:true}）
.jqGrid（“inlineNav”）
.jqGrid（“filterToolbar”）
.jqGrid（“gridResize”）；
});
//]]>
{ 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 } },
editable:false
{ name: "tax", editable:false, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
$(".fa-search").on("click", function(){
$("fieldtochange").prop("disabled", false);
});
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
});
}
},