Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.0k views
in Technique[技术] by (71.8m points)

jquery - How do make datepicker onselect function works differently in toolbar search and advanced search in jqgrid

I want the onselect event only do his job only on toolfilter not in advanced search.

Here is my grid:

$('#grid').jqGrid({
            colNames: ['Title', 'date'],
            colModel: [
                { name: 'Title', index: 'Title', searchoptions: { sopt: ['cn']} },
                { name: 'date', index: 'date', search: true, searchoptions: {
                    sopt: ['deq', 'dge', 'dlt'],
                    dataInit: function (el) {
                        $(el).datepicker({ onSelect: function (dateText, inst) { $("#grid")[0].triggerToolbar(); } });
                    }
                }, width: 70
                }
              ],
            pager: jQuery('#pager'),
            hidegrid: false,
            sortname: "date",
            sortorder: "desc",
            rowNum: 20,
            rowList: [10, 20, 50, 100],
            autowidth: true,
            width: "100%",
            height: "100%",
            datatype: 'json',
            viewrecords: true,
            mtype: 'POST',
            url: '<url>'

        })
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can for example use the fact that the id of elements inside of searching toolbar will be cnstructed with "gs_" prefix. So the implementation could be about the following

dataInit: function (elem) {
    $(elem).datepicker({
        changeYear: true,
        changeMonth: true,
        showButtonPanel: true,
        onSelect: function () {
            var $grid, grid;
            if (typeof (elem.id) === "string" && this.id.substr(0, 3) === "gs_") {
                // in case of searching toolbar
                $grid = $(elem).closest('div.ui-jqgrid-hdiv')
                               .next('div.ui-jqgrid-bdiv')
                               .find("table.ui-jqgrid-btable:first");
                if ($grid.length > 0) {
                    grid = $grid[0];
                    if ($.isFunction(grid.triggerToolbar)) {
                        setTimeout(function(){
                            grid.triggerToolbar();
                        }, 50);
                    }
                }
            } else {
                // refresh the filter in case of
                // searching dialog
                $(this).trigger('change');
            }
        }    
    });
}

see the answer with very close code.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...