How to specify value for read only field in advanc

2019-07-29 08:09发布

站内问答 / jQuery
460 3 5

I'm looking for a way to allow user to specify vlaue in advanced search dialog in latest free jqgrid.

I tried code below and selected advanced search dialog. Tax field is read-only and cannot changed. How to fix this ?

<!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>

3条回答
劫难
2楼-- · 2019-07-29 08:24

Thank you for reporting the bug!

One can use workaround in the way, described by Noctane, but the best way would be to use the latest sources from GitHub. I posted the corresponding fix now, which should solves eliminate the bug.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
3楼-- · 2019-07-29 08:24

It appears that the tax field is declared as read only/disabled.

In the $grid.jqGrid element, remove the 'editoptions: { readonly:"readonly", disabled:"disabled"},' text from this line:

{ name: "tax", editoptions: { readonly:"readonly", disabled:"disabled"}, width: 70, template: "number", autoResizing: { minColWidth: 55 } },
查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
4楼-- · 2019-07-29 08:42

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)