복붙노트

[JQUERY] 동적 그리드 호출기 ID를 해결할 수있는 jqGrid?

JQUERY

동적 그리드 호출기 ID를 해결할 수있는 jqGrid?

해결법


  1. 1.당신은 여러 가지 방법으로 페이지에 존재하는 jqGrids을 찾을 수 있습니다. 예를 들어, 당신은 ( 'table.ui-있는 jqGrid - btable') 대신 $의 ( 'div.ui-있는 jqGrid - bdiv 테이블') $를 사용할 수 있습니다. 또한 당신은 일반적으로 페이지에 대한 자세한 하나있는 jqGrid가 될 수 있다는 것을 잊지 말아야한다. 나는 현재 페이지 당 하나있는 jqGrid를 사용하는 경우에도이 페이지의 많은 jqGrids와 함께 작동 할 수 있도록 당신이 당신의 코드를 작성하는 것이 좋습니다.

    당신은 여러 가지 방법으로 페이지에 존재하는 jqGrids을 찾을 수 있습니다. 예를 들어, 당신은 ( 'table.ui-있는 jqGrid - btable') 대신 $의 ( 'div.ui-있는 jqGrid - bdiv 테이블') $를 사용할 수 있습니다. 또한 당신은 일반적으로 페이지에 대한 자세한 하나있는 jqGrid가 될 수 있다는 것을 잊지 말아야한다. 나는 현재 페이지 당 하나있는 jqGrid를 사용하는 경우에도이 페이지의 많은 jqGrids와 함께 작동 할 수 있도록 당신이 당신의 코드를 작성하는 것이 좋습니다.

    당신이 어떤 식 으로든있는 jqGrid의 테이블 요소를 발견하면 당신은 jqGrids [0]으로 먼저 발견 그리드의 DOM 요소를 얻을 수 있습니다. DOM을 일부 익스텐더를 사용하는있는 jqGrid. 그것은 추가 속성 그리드 및 페이지를 추가합니다. 모든있는 jqGrid 방법 그리드가 그리드 속성 존재를 확인하여 초기화 여부를 체크한다. 또한, p 속성이 모두있는 jqGrid 매개 변수 당신에게 포함 p.pager을 제공합니다. 당신은 그리드에 두 호출기을 만들 수 있습니다 : 바닥에 상단 그리드의 가장자리와 다른 하나는 (자세한 내용은이 참조). 코드하는 그래서 당신은 모양이 좋아하는 수 필요

    var jqGrids = $('table.ui-jqgrid-btable');
    if (jqGrid.length > 0) {
        jqGrid.each(function(i) {
            if (this.grid) {
                // one more test for the jqGrid
                // jqGrid[i] is a jqGrid
                if (this.p.toppager) {
                    // this.id + '_toppager' is the id of the top pager
                }
                if (this.p.pager) {
                    // this.p.pager is the id of the bottom pager
                }
            }
        });
    }
    

    테이블 요소는 jQuery.hasClass를 사용할 수있는 몇 가지에서는 CustomClass 클래스가 있는지 여부를 테스트합니다.

    업데이트 : 주석에서 어떻게 숨기거나 동적 탐색기 표시 줄에있는 버튼을 보여달라고. 나는 이것을 보여 데모를 준비 :

    검사 한 경우, 탐색 줄에서 그리드 위에 대응하는 버튼을 배치되는 버튼 감추기 것이다. 선택 취소는 해당 버튼 다시 표시됩니다.

    코드는 / 숨기기에 () 표시됩니다. () 또는 $ ( '#의 add_list') 숨기기. $ ( '#의 add_list')를 호출 "추가"버튼을 보여줍니다. 이 예에서, ID = "add_list"의 마지막 부분은 격자를 만드는 데 사용되는 <표> 요소의 ID이다. 다른 표준 버튼은 다음 접두사로 시작하는 ID가 'edit_', 'view_', 'del_', 'search_', 'refresh_'. 그리드의 ID가 다음과 같은 특수 문자의 모양이있는 경우 작동 더 많은 공통 코드 :

    var grid = $("#list"),
        gid = $.jgrid.jqID(grid[0].id);
    
    $('#cbAdd').change(function () {
        var $td = $('#add_' + gid);
        if ($(this).is(':checked')) {
            $td.hide();
        } else {
            $td.show();
        }
    });
    

    navButtonAdd I 사용 title 속성에 의해 추가 된 사용자 정의 네비게이터 버튼을 찾으려면 :

    $('#cbChooseColumns').change(function () {
        var $td = $(grid[0].p.pager + '_left ' + 'td[title="choose columns"]');
        if ($(this).is(':checked')) {
            $td.hide();
        } else {
            $td.show();
        }
    });
    
  2. from https://stackoverflow.com/questions/7056859/jqgrid-resolve-the-grid-pager-id-dynamically by cc-by-sa and MIT license