JQGrid 열 선택기 Modal Overlay.

해결법

1.현재 ColumnChooser의 문서화되지 않은 옵션이 있습니다.

현재 ColumnChooser의 문서화되지 않은 옵션이 있습니다.

$(this).jqGrid('columnChooser', {modal: true});

데모는 이것을 보여줍니다. 하나는 $ .jgrid.col도 존중하는 ColumnChooser에 대한 기본 매개 변수를 설정할 수 있습니다.

$.extend(true, $.jgrid.col, {
    modal: true
});

최근에 나는 ColumnChooser의 작은 기능을 확장하기위한 제안을 전기했지만 변경의 일부만은 JQGRID의 현재 코드입니다. 그럼에도 불구하고 새 버전에서는 새로운 DIALOG_OPTS 옵션과 관련하여 훨씬 많은 jQuery UI 대화 상자 옵션을 설정할 수 있습니다. 예를 들어 다음의 사용법이 가능합니다.

$(this).jqGrid('columnChooser', {
    dialog_opts: {
        modal: true,
        minWidth: 470,
        show: 'blind',
        hide: 'explode'
    }
});

내가 제안한 전체 기능을 사용하려면 ColumnChooser의 표준 구현을 덮어 쓸 수 있습니다. 다음 코드를 포함 하여이 작업을 수행 할 수 있습니다

$.jgrid.extend({
    columnChooser : function(opts) {
        var self = this;
        if($("#colchooser_"+$.jgrid.jqID(self[0].p.id)).length ) { return; }
        var selector = $('<div id="colchooser_'+self[0].p.id+'" style="position:relative;overflow:hidden"><div><select multiple="multiple"></select></div></div>');
        var select = $('select', selector);

        function insert(perm,i,v) {
            if(i>=0){
                var a = perm.slice();
                var b = a.splice(i,Math.max(perm.length-i,i));
                if(i>perm.length) { i = perm.length; }
                a[i] = v;
                return a.concat(b);
            }
        }
        opts = $.extend({
            "width" : 420,
            "height" : 240,
            "classname" : null,
            "done" : function(perm) { if (perm) { self.jqGrid("remapColumns", perm, true); } },
            /* msel is either the name of a ui widget class that
               extends a multiselect, or a function that supports
               creating a multiselect object (with no argument,
               or when passed an object), and destroying it (when
               passed the string "destroy"). */
            "msel" : "multiselect",
            /* "msel_opts" : {}, */

            /* dlog is either the name of a ui widget class that 
               behaves in a dialog-like way, or a function, that
               supports creating a dialog (when passed dlog_opts)
               or destroying a dialog (when passed the string
               "destroy")
               */
            "dlog" : "dialog",

            /* dlog_opts is either an option object to be passed 
               to "dlog", or (more likely) a function that creates
               the options object.
               The default produces a suitable options object for
               ui.dialog */
            "dlog_opts" : function(opts) {
                var buttons = {};
                buttons[opts.bSubmit] = function() {
                    opts.apply_perm();
                    opts.cleanup(false);
                };
                buttons[opts.bCancel] = function() {
                    opts.cleanup(true);
                };
                return $.extend(true, {
                    "buttons": buttons,
                    "close": function() {
                        opts.cleanup(true);
                    },
                    "modal" : opts.modal ? opts.modal : false,
                    "resizable": opts.resizable ? opts.resizable : true,
                    "width": opts.width+20,
                    resize: function (e, ui) {
                        var $container = $(this).find('>div>div.ui-multiselect'),
                            containerWidth = $container.width(),
                            containerHeight = $container.height(),
                            $selectedContainer = $container.find('>div.selected'),
                            $availableContainer = $container.find('>div.available'),
                            $selectedActions = $selectedContainer.find('>div.actions'),
                            $availableActions = $availableContainer.find('>div.actions'),
                            $selectedList = $selectedContainer.find('>ul.connected-list'),
                            $availableList = $availableContainer.find('>ul.connected-list'),
                            dividerLocation = opts.msel_opts.dividerLocation || $.ui.multiselect.defaults.dividerLocation;

                        $container.width(containerWidth); // to fix width like 398.96px                     
                        $availableContainer.width(Math.floor(containerWidth*(1-dividerLocation)));
                        $selectedContainer.width(containerWidth - $availableContainer.outerWidth() - ($.browser.webkit ? 1: 0));

                        $availableContainer.height(containerHeight);
                        $selectedContainer.height(containerHeight);
                        $selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
                        $availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
                    }
                }, opts.dialog_opts || {});
            },
            /* Function to get the permutation array, and pass it to the
               "done" function */
            "apply_perm" : function() {
                $('option',select).each(function(i) {
                    if (this.selected) {
                        self.jqGrid("showCol", colModel[this.value].name);
                    } else {
                        self.jqGrid("hideCol", colModel[this.value].name);
                    }
                });

                var perm = [];
                //fixedCols.slice(0);
                $('option:selected',select).each(function() { perm.push(parseInt(this.value,10)); });
                $.each(perm, function() { delete colMap[colModel[parseInt(this,10)].name]; });
                $.each(colMap, function() {
                    var ti = parseInt(this,10);
                    perm = insert(perm,ti,ti);
                });
                if (opts.done) {
                    opts.done.call(self, perm);
                }
            },
            /* Function to cleanup the dialog, and select. Also calls the
               done function with no permutation (to indicate that the
               columnChooser was aborted */
            "cleanup" : function(calldone) {
                call(opts.dlog, selector, 'destroy');
                call(opts.msel, select, 'destroy');
                selector.remove();
                if (calldone && opts.done) {
                    opts.done.call(self);
                }
            },
            "msel_opts" : {}
        }, $.jgrid.col, opts || {});
        if($.ui) {
            if ($.ui.multiselect ) {
                if(opts.msel == "multiselect") {
                    if(!$.jgrid._multiselect) {
                        // should be in language file
                        alert("Multiselect plugin loaded after jqGrid. Please load the plugin before the jqGrid!");
                        return;
                    }
                    opts.msel_opts = $.extend($.ui.multiselect.defaults,opts.msel_opts);
                }
            }
        }
        if (opts.caption) {
            selector.attr("title", opts.caption);
        }
        if (opts.classname) {
            selector.addClass(opts.classname);
            select.addClass(opts.classname);
        }
        if (opts.width) {
            $(">div",selector).css({"width": opts.width,"margin":"0 auto"});
            select.css("width", opts.width);
        }
        if (opts.height) {
            $(">div",selector).css("height", opts.height);
            select.css("height", opts.height - 10);
        }
        var colModel = self.jqGrid("getGridParam", "colModel");
        var colNames = self.jqGrid("getGridParam", "colNames");
        var colMap = {}, fixedCols = [];

        select.empty();
        $.each(colModel, function(i) {
            colMap[this.name] = i;
            if (this.hidedlg) {
                if (!this.hidden) {
                    fixedCols.push(i);
                }
                return;
            }

            select.append("<option value='"+i+"' "+
                          (this.hidden?"":"selected='selected'")+">"+colNames[i]+"</option>");
        });
        function call(fn, obj) {
            if (!fn) { return; }
            if (typeof fn == 'string') {
                if ($.fn[fn]) {
                    $.fn[fn].apply(obj, $.makeArray(arguments).slice(2));
                }
            } else if ($.isFunction(fn)) {
                fn.apply(obj, $.makeArray(arguments).slice(2));
            }
        }

        var dopts = $.isFunction(opts.dlog_opts) ? opts.dlog_opts.call(self, opts) : opts.dlog_opts;
        call(opts.dlog, selector, dopts);
        var mopts = $.isFunction(opts.msel_opts) ? opts.msel_opts.call(self, opts) : opts.msel_opts;
        call(opts.msel, select, mopts);
        // fix height of elements of the multiselect widget
        var resizeSel = "#colchooser_"+$.jgrid.jqID(self[0].p.id),
            $container = $(resizeSel + '>div>div.ui-multiselect'),
            $selectedContainer = $(resizeSel + '>div>div.ui-multiselect>div.selected'),
            $availableContainer = $(resizeSel + '>div>div.ui-multiselect>div.available'),
            containerHeight,
            $selectedActions = $selectedContainer.find('>div.actions'),
            $availableActions = $availableContainer.find('>div.actions'),
            $selectedList = $selectedContainer.find('>ul.connected-list'),
            $availableList = $availableContainer.find('>ul.connected-list');
        $container.height($container.parent().height()); // increase the container height
        containerHeight = $container.height();
        $selectedContainer.height(containerHeight);
        $availableContainer.height(containerHeight);
        $selectedList.height(Math.max(containerHeight-$selectedActions.outerHeight()-1,1));
        $availableList.height(Math.max(containerHeight-$availableActions.outerHeight()-1,1));
        // extend the list of components which will be also-resized
        selector.data('dialog').uiDialog.resizable("option", "alsoResize",
            resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');
    }
});

이 경우 jquery.jqgrid.min.js의 원래 최소한의 버전을 계속 사용할 수 있으며 사용하는 코드는 $ (this) .jqgrid ( 'ColumnChooser') 일 수 있습니다. 모든 기본 설정과 함께 표시됩니다

$.extend(true, $.ui.multiselect, {
    locale: {
        addAll: 'Make all visible',
        removeAll: 'Hidde All',
        itemsCount: 'Avlialble Columns'
    }
});
$.extend(true, $.jgrid.col, {
    width: 450,
    modal: true,
    msel_opts: {dividerLocation: 0.5},
    dialog_opts: {
        minWidth: 470,
        show: 'blind',
        hide: 'explode'
    }
});
$grid.jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-calculator",
    title: "Choose columns",
    onClickButton: function () {
        $(this).jqGrid('columnChooser');
    }
});

데모는 접근 방식을 보여줍니다. 변경 사항의 주요 이점 - 정말로 크기 조정 가능한 열 선택기 :

업데이트 됨 : 2014 년 말부터 시작하는 JQGrid의 무료 JQGrid 포크는 ColumnChooser의 수정 된 코드를 포함합니다.

2.모바일 장치에서 코드를 시도하는 동안 다음 오류가 발생합니다.

모바일 장치에서 코드를 시도하는 동안 다음 오류가 발생합니다.
```
Result of expression 'selector.data('dialog').uiDialog' [undefined] is not an object.
```
오류는 다음 코드 행을 가리 킵니다.
```
selector.data('dialog').uiDialog.resizable("option", "alsoResize", resizeSel + ',' + resizeSel +'>div' + ',' + resizeSel + '>div>div.ui-multiselect');
```
코드를 검사 할 때 데이터 객체에 UIDIalog라는 항목이 없음을 알 수 있습니다.

3.코드를 통과 한 것으로 보이는이 행을 추가해보십시오.

코드를 통과 한 것으로 보이는이 행을 추가해보십시오.

jqModal : true,

이 코드로 :

$grid.jqGrid('navButtonAdd', '#pager', {
            caption: "",
            buttonicon: "ui-icon-calculator",
            title: "Choose columns",
            onClickButton: function () {
....

다음과 같이 :

$grid.jqGrid('navButtonAdd', '#pager', {
            caption: "",
            buttonicon: "ui-icon-calculator",
            title: "Choose columns",
            jqModal : true,
            onClickButton: function () {
....

from https://stackoverflow.com/questions/9687201/jqgrid-column-chooser-modal-overlay by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jqgrid 삽입을 위해 웹 서비스에 대한 행을 추가하고 데이터를 보내십시오. (0)	2020.11.01
[JQUERY] Ajax 메소드 호출 (0)	2020.11.01
[JQUERY] jQuery modal 대화 상자 및 jqgrid. (0)	2020.11.01
[JQUERY] jQuery에 의해 스크립트 태그를 만들 수 있습니까? (0)	2020.11.01
[JQUERY] jQuery를 사용하여 요소에 Pseudo 클래스를 어떻게 추가합니까? (0)	2020.11.01

복붙노트

[JQUERY] JQGrid 열 선택기 Modal Overlay.

JQGrid 열 선택기 Modal Overlay.

해결법

1.현재 ColumnChooser의 문서화되지 않은 옵션이 있습니다.

2.모바일 장치에서 코드를 시도하는 동안 다음 오류가 발생합니다.

3.코드를 통과 한 것으로 보이는이 행을 추가해보십시오.

'JQUERY' 카테고리의 다른 글

티스토리툴바