如何在高级搜索对话框中指定只读字段的值

我正在寻找一种方法，允许用户在最新的免费jqgrid中的高级搜索对话框中指定vlaue。

我尝试下面的代码并选择了高级搜索对话框。 税区是只读的，不能更改。 如何解决这个问题？

              .ui-datepicker { font-size: 76.39%; }      $.jgrid = $.jgrid || {}; $.jgrid.no_legacy_api = true;   <!---->  //.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: "dMY" }, 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"); }); //]]>    
  
   

Answer 1

感谢您报告错误！

可以使用Noctane描述的解决方法，但最好的方法是使用GitHub的最新资源。 我现在发布了相应的修复程序 ，应该可以解决这个问题。

Answer 2

通常，您只需将单元格设置为不可编辑，如下所示：

 editable:false 

因此，您的税栏将配置如下：

  { name: "tax", editable:false, width: 70, template: "number", autoResizing: { minColWidth: 55 } }, 

请看小提琴： 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

更新＃2

以下是如何在不对col值进行硬编码的情况下执行此操作：

 var inputs = ele.find("input[id^=jqg]"); $(inputs).attr({ disabled: false, readonly: false }); 

如果你甚至不想使用^=jqg你只需将那个^=jqg更改为"input"它仍然可以工作，它只会查找该元素下的所有输入。

更新＃3

仅使用onInitializeSearch只能使字段在表单加载时工作，将afterRedraw替换为每次添加或删除新filter时都会设置字段。

 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 }); } }, 

看看演示

有关您可以使用的任何其他选项，另请参阅搜索选项文档 。

Answer 3

似乎税收字段被声明为只读/禁用。

在$ grid.jqGrid元素中，删除’editoptions：{readonly：“readonly”，disabled：“disabled”}，’来自此行的文字：

 { name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },