jqGrid의 숨겨진 열

jqGrid의 숨겨진 열

---

jqGrid 테이블에서 열을 숨기는 방법이 양식 편집기 모달 대화 상자에서 행을 편집 할 때 읽기 전용으로 표시 할 수 있습니까?

---

나는 queen3 의 제안 을 확장하고 싶습니다 . 다음을 적용하면 트릭이됩니다.

editoptions: { 
              dataInit: function(element) { 
                          $(element).attr("readonly", "readonly"); 
                        } 
             }

시나리오 # 1 :

• 그리드에 필드가 표시되어야합니다.
• 필드는 양식에 표시되어야합니다.
• 필드는 읽기 전용이어야합니다.

해결책 :

colModel:[
        {  name:'providerUserId',
               index:'providerUserId', 
               width:100,editable:true, 
               editrules:{required:true}, 
               editoptions:{ 
                            dataInit: function(element) { 
                                  jq(element).attr("readonly", "readonly"); 
                             } 
                           }
            },
],

providerUserId는 그리드에 표시되고 양식을 편집 할 때 표시됩니다. 그러나 내용을 편집 할 수 없습니다.

---

시나리오 # 2 :

• 그리드에서 필드가 배치됩니다.
• 필드는 양식에 표시되어야합니다.
• 필드는 읽기 전용이어야합니다.

해결책 :

colModel:[
           {name:'providerUserId',
            index:'providerUserId', 
            width:100,editable:true, 
            editrules:{
                         required:true, 
                         edithidden:true
                      },
            hidden:true, 
            editoptions:{ 
                  dataInit: function(element) {                     
                             jq(element).attr("readonly", "readonly"); 
                          } 
                     }
         },
        ]

두 경우 모두 일반적인 경우 $ 대신 jq를 사용하여 jquery를 참조하고 있습니다. 내 HTML에는 jQuery에서 사용하는 변수를 수정하는 다음 펼쳐집니다.

<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>

---

이 기능은 jqGrid에 내장되어 있습니다.

다음과 같이 그리드 기능을 설정하십시오.

$('#myGrid').jqGrid({
   ...
   colNames: ['Manager', 'Name', 'HiddenSalary'],
   colModel: [               
               { name: 'Manager', editable: true },
               { name: 'Price', editable: true },
               { name: 'HiddenSalary', hidden: true , editable: true, 
                  editrules: {edithidden:true} 
               }
             ],
   ...
};

적용 할 수있는 다른 편집 규칙이 있지만이 기본 설정은 그리드보기에서 관리자의 급여를 숨기지 만 편집 양식이 표시 될 때 편집을 허용합니다.

---

다음 코드를 사용하여 테이블 열을 숨길 수 있습니다.

JQuery("tableName").hideCol("colName");

그리고 다음 코드를 사용하여 다시 표시 할 수 있습니다.

JQuery("tableName").showCol("colName");

질문에 대해서는 document.ready ()에서 hideCol () 코드를 호출 할 수 있으며 대화 상자의 편집 / 클릭 이벤트에서 showCol () 코드를 바인딩 할 수 있습니다.

---

이 스레드는 꽤 오래되었다고 생각하지만 다른 사람이이 질문을 우연히 발견 할 경우를 대비하여 테이블의 선택한 행에서 값을 가져와야했지만 해당 행의 출처를 표시하고 싶지 않았습니다. 나는 hideCol을 사용했지만 Andy와 똑같은 문제가 있었는데 지저분 해 보였습니다. 그것을 고치기 위해 (핵이라고 부름) 그리드의 너비를 다시 설정했습니다.

jQuery(document).ready(function() {

       jQuery("#ItemGrid").jqGrid({ 
                ..., 
                width: 700,
                ...
        }).hideCol('StoreId').setGridWidth(700)

내 행 너비는 자동이므로 테이블 너비를 재설정하면 열 너비가 재설정되지만 숨겨진 너비는 제외되어 간격이 채워집니다.

---

edithidden : true를 사용하고

editoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } }

또는 사용자 정의 편집을 위해 jqGrid 위키를 참조하십시오. 모든 입력 유형을 설정할 수 있습니다.

---

그리드 기둥을 숨기려면

jQuery("#validGrid").jqGrid('hideCol',str);

---

이 포스트는 조금 오래되었습니다. 그러나 이것은 열을 표시하거나 숨기는 코드입니다. 내장 함수를 사용하여 열을 표시하고 표시 만합니다.

열 표시 / 숨김 열을 표시하는 기능입니다. #jqGrid는 내 그리드의 이름이고 columnChooser는 jqGrid 열 선택기입니다.

  function showHideColumns() {
        $('#jqGrid').jqGrid('columnChooser', {
            width: 250,
            dialog_opts: {
                modal: true,
                minWidth: 250,
                height: 300,
                show: 'blind',
                hide: 'explode',
                dividerLocation: 0.5
            } });

참조 URL : https://stackoverflow.com/questions/1661800/hidden-columns-in-jqgrid