jQuery Grid Checkbox Column Alternatives – Part II

요약: 확인란 열은 jQuery 그리드의 부울 값을 확인란으로 변환하기 위한 기본 설정을 제공하는 기능입니다.

Damyan Petev Last Updated Feb 25, 2025 10min read

이것은 jQuery Grid 확인란 열 대안 및 / 또는 사용자 정의 구현에 대한 주제를 다루는 두 번째 부분입니다. 그러나 내가 설명했듯이 기본값은 모든 시나리오에 충분하지 않으며 커뮤니티는 열 및 행 템플릿과의 공존과 관련된 제한 사항을 제기했습니다. 그에 대한 타당한 이유가 있지만 원하는 경우도 많이 있습니다.

jQuery Grid 체크 박스 열 대안은 템플릿을 사용하여 기능을 향상시키고 경험을 일치시킵니다.

글쎄, 당신은 잘못보고 있지 않습니다 – 그것은 본질적으로 동일하게 보입니다. 정말 간단합니다. 예를 들어, 응용 프로그램이 지금까지 체크 박스를 사용해 왔고 (항상 그렇듯이) 템플릿을 사용해야하는 기존 / 새 열에 몇 가지 추가 기능을 추가하는 아이디어가 떠오릅니다. 그래서 이전과 같은 UI를 유지하는 것이 합리적입니다.

또한, 첫 번째 블로그에서 기억하실 수 있듯이, 저는 기본 확인란의 모양이 그다지 마음에 들지 않으며 사용자가 다른 OS를 실행하고 있다는 것을 금지합니다. 이제 이 확인란이 환상적으로 보이므로 대신 사용하는 방법을 살펴보겠습니다.

구출하기 위해 체크 박스 열 기능!

다시는 잘못 않음 – 입력 템플릿을 만드는 동안 깨달은 것은 기본 기능 자체도 하나라는 것입니다! 거기에 있는 기능, 스타일 및 기타 유용한 부분은 우리가 적합하다고 생각하는 대로 조합할 수 있습니다. 즉, 재사용할 수 있는 첫 번째이자 가장 쉬운 것은 확인란 열 템플릿과 해당 스타일입니다.

템플릿

이 템플릿은 CSS와 함께 스타일이 지정된 HTML Span 태그를 사용하여 해당 UI 요소를 생성하며, 이는 스타일 지정을 위해 완전히 개방되어 있으며 OS 또는 브라우저 구현과 독립적임을 의미합니다. 이와 같은 템플릿의 모습은 다음과 같습니다.

var checkboxTemplate="<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'>' +
"<span class=\"ui-state-default ui-corner-all ui-igcheckbox-small\">"+"<span class=\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \"true\"}}on{{else}}off{{/if}}\"/>"+"</span></span>";

이제 스팬의 구조는 다음과 같습니다.

가장 바깥쪽 Span은 사용 가능한 공간에 퍼져 내부 셀이 멋지게 중앙에 위치할 수 있도록 하는 셀 컨테이너 역할을 합니다. 선택적.
중간은 확인란 테두리 역할을 합니다. 필수.
가장 안쪽은 빈/눈금 채우기입니다. "ui-igcheckbox-small-off/on"은 해당 스타일입니다. 'off' 스타일은 'on'을 재정의하므로 기본적으로 'on'을 사용할 수 있으며 적절하게 'off'를 추가/제거할 수 있습니다(나중에 정확히 어떻게 수행될 것인지). 또한 '작은' 구성 요소를 발견한 경우 행 선택기 기능에서 볼 수 있는 '일반' 버전도 있습니다. 필수.

이것의 결과는 놀라운 일이 아닙니다 (우리는 어쨌든 그것들을 쫓았습니다). 가장 좋은 점은 이전과 동일한 모양을 얻을 수 있고(이 기능을 사용하고 있는 경우), 기본값보다 훨씬 더 좋아 보이는 UI 컨트롤을 얻을 수 있으며 다른 컨트롤의 스타일과 번질 수도 있다는 것입니다. 또한, 스타일에 맞을뿐만 아니라 행 선택기 (Row Selectors)의 스타일과 일치하며(둘 다 필수라고 생각합니다) 외모가 CSS에서 나오고 테마에서 나오기 때문에 테마와 일치합니다. 위의 내용을 사용하는 샘플 그리드 정의:

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "BusinessEntityID",
        height: 550,
        dataSource: "@Url.Action("Employees")",
        autoGenerateColumns: false,
        columns: [
            { key: "BusinessEntityID", width: "50px", headerText: "ID", dataType: "number" , template: "<a href=\"http://msdn.microsoft.com/en-us/library/ms124432(v=sql.100).aspx\">${BusinessEntityID}</a>"},
            { key: "LoginID", width: "250px", headerText: "Login ID", dataType: "string" },
            { key: "JobTitle", width: "220px" , headerText: "Job Title", dataType: "string" },
            { key: "SalariedFlag", width: "120px", headerText: "SalariedFlag", dataType: "bool", template: checkboxTemplate },
            { key: "CurrentFlag", width: "100px",headerText: "Current Flag", dataType: "bool" , template: "<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'><span class=\'ui-state-default ui-corner-all ui-igcheckbox-normal\'><span class=\'ui-icon ui-icon-check ui-igcheckbox-normal-on{{if ${CurrentFlag} === \'true\'}} {{else}} ui-igcheckbox-normal-off{{/if}}\'/></span></span>'}
             ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating", editMode: 'none'}]
    });
});

'Salaried' 열의 작은(기본) 확인란과 "Current Flag"의 'normal'이 모두 있는 결과 그리드:

그리고 예, '메트로'테마를 적용하면 Metro 또는 Modern UI (지금 어떻게 불릴 것인지 추측)로 이동합니다.

보시다시피 값이 부울이기 때문에 열은 다른 그리드 기능에 문제가 없습니다.

원클릭 인라인 값 업데이트

물론 이전 솔루션과 마찬가지로 클릭 이벤트에 연결하여 편집 모드로 전환하지 않고도 사용자 상호 작용을 처리할 수 있습니다. 이전과 마찬가지로 업데이트 API를 사용하려면 그리드 (). 그러나 이번에는 두 개의 열이 있습니다. 옵션은 두 가지입니다 – 각 열에 대한 이벤트 핸들러를 복제하거나 단순히 열 키를 함수에 전달하고 정적 값 대신 사용하십시오.

var checkboxTemplate = "<span style=\'width:100%;display:inline-block;overflow:hidden;text-align:center;\'>' +
    "<span class=\"ui-state-default ui-corner-all ui-igcheckbox-small\">" +
    "<span class=\"ui-icon ui-icon-check ui-igcheckbox-small-{{if ${SalariedFlag} === \"true\"}}on{{else}}off{{/if}}\"" +
    " data-rowid=\"${BusinessEntityID}\"  onclick=\"checkboxChanged(event, 'SalariedFlag');\"/></span></span>";

'data-' 속성은 행 키를 추적하는 데 사용되며 열은 처리기에 전달됩니다. 브라우저 지원 및 최종 스 니펫을위한 속성의 다양한 가용성과 관련된 몇 가지 사소한 조정은 다음과 같습니다.

function checkboxChanged(evt, colId) {
    // for IE < 9 currentTarget is srcElement
    var element = evt.currentTarget || evt.srcElement;
    // get rowID where change occured:
    var rowId = $(element).data().rowid;
    var newValue;
    //IE doesn't have classList so check and use Name instead
    if (element.classList){
        newValue = element.classList.contains("ui-igcheckbox-small-on") ? false : true;
    }
    else{
        newValue = element.className.indexOf("ui-igcheckbox-small-on") >= 0 ? false : true;
    }
    $("#grid").igGridUpdating("setCellValue", rowId, colId, newValue);
}

아이디어는 매우 간단합니다 – 클릭이 발생했다는 것은 값이 변경되어야 한다는 것을 의미하며 지금과 반대가 되어야 합니다 – 그래서 우리는 'on' 스타일이 적용되었는지 확인합니다. 'off'가 덮어 쓰기라고 언급했지만이 경우 Updating 메서드로 셀 값을 업데이트하면 UI가 업데이트되므로 템플릿이 다시 적용되고 값이 false이면 'on'스타일이 표시되지 않습니다.

편집 작업

체크박스 열 기능에는 재사용할 수 있는 멋진 부분이 하나 더 있습니다. 첫 번째 블로그에서 언급했듯이 자신만의 에디터 제공자를 정의할 수 있습니다. Grid Updating API 참조를 찾아보면 Editor Provider를 설정할 수 있는 'columnSetting'을 볼 수 있으며 "$.ig를 확장해야 합니다. EditorProviderDefault 또는 모든 메소드에 대한 정의가 있어야 합니다." 이제 약간의 코딩이 필요할 수 있지만 Checkbox 열에는 이미 정의되어 있습니다! 그래서 이것이 당신이 그것을 사용하는 방법입니다 :

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "BusinessEntityID",
        height: 550,
        dataSource: "@Url.Action("Employees")",
        autoGenerateColumns: false,
        columns: [
            { key: "BusinessEntityID", width: "50px", headerText: "ID", dataType: "number" , template: "<a style=\'font-size:20px;\' href=\'http://msdn.microsoft.com/en-us/library/ms124432(v=sql.100).aspx\'>${BusinessEntityID}</a>'},
            { key: "LoginID", width: "250px", headerText: "Login ID", dataType: "string" },
            { key: "JobTitle", width: "220px" , headerText: "Job Title", dataType: "string" },
            { key: "SalariedFlag", width: "150px", headerText: "SalariedFlag", dataType: "bool", template: checkboxTemplate}
        ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating", columnSettings: [{ columnKey: "SalariedFlag", editorProvider: new $.ig.CustomEditorProviderCheckbox()} ]}]
    });
});

16 행 – 간단하고 매우 효과적입니다. 이제 편집 모드에 들어가면 적절한(그리고 일관된) 경험을 얻을 수 있습니다. 그리고 그것은 정말로 간단합니다.

Editor provider

위에 표시된 기본 공급자가 요구 사항을 완전히 충족하지 않습니까? 그런 다음 사용자 정의 값을 사용하고 좋은 측정을 위해 믹스에 부울이 아닌 값을 던질 것입니다. 설명했듯이 사용자 정의에 권장되는 기본 공급자와 함께 업데이트 요구 사항을 충족하는 많은 편집기 공급자가 있습니다. 그러나 우리의 경우 대신 확인란 공급자를 확장하고 차이점만 구현할 수 있습니다. 공급자의 기본 사항을 설명하겠습니다 – 몇 가지 필수 메소드가 있는 클래스입니다 – 에디터를 생성하기 위한 메소드 (편집 모드가 활성화될 때 업데이트에 의해 호출되고 실제 편집 요소를 리턴합니다), 다른 하나는 값을 가져오기 위한 메소드입니다. 그런 다음 초점, 크기 및 검증 관리가 필요하지만 이러한 것들은 구현되거나 우리 유형의 공급자와 관련이 없습니다. 이것은 각 메소드가 수행하는 작업을 수행하는 이유를 알려주는 메소드 실행의 기본 흐름입니다.

예를 들어, Boolean과 다른 값을 다시 지원해야 하는 경우 평소와 같이 템플릿을 사용하고 공급자의 get 및 set value 메서드를 재정의하여 읽기 전용이 없고 깜박임이 없는 멋진 확인란 편집기를 가질 수 있습니다.또한 구현하기도 매우 쉽습니다. 마지막 블로그의 경우와 임의의 '허용 가능한'값과 false에 해당하는 다른 경우의 경우 setValue 메소드를 수정할 필요가 없다는 것을 의미합니다. 음, 숫자와 문자열은 true로 평가되고 null-s는 false로 평가되며 편집기에서 값을 표시하는 데 적합합니다. 그래서 그것은 단지 get이고 거의 재미있게 쉽습니다.

$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({
    getValue: function () {
        return this.value ? 10 : null;
    }
});

이제 이러한 값이 예상대로 평가되지 않는다고 가정 해보십시오 (현재 평가되고 있음에도 불구하고) setValue 를 재정의하고 원하는 출력으로 수퍼 클래스 '메소드를 호출해야합니다.

$.ig.CustomEditorProviderCheckbox = $.ig.CustomEditorProviderCheckbox || $.ig.EditorProviderCheckbox.extend({
    getValue: function () {
        return this.value ? 10 : null;
    },
    setValue: function (val, updating) {
      val = parseInt(val) ? true : false;
      this._super(val, updating);
    }
});

그리고 이것으로 충분하지 않다면 언제든지 더 나아갈 수 있습니다 – create 메소드에서 에디터에 대해 렌더링된 UI를 변경하고, set 메소드에서 상호 작용이 값에 영향을 미치는 방식을 변경하는 등의 작업을 수행할 수 있습니다. 그러나 그것은 완전히 별개의 주제이거나 대부분의 제공자가 특별한 요구 사항과 구현을 가지고 있기 때문에 제공자 유형별 주제와 비슷합니다.

나머지는 꽤 명확합니다 - 이전 블로그에서와 같이 parseInt 대신 'Editing Action'부분과 동일한 템플릿 스타일입니다. 그리고 다시, 업데이트에 대한 열 설정을 사용하여 원하는 열의 공급자를 새로운 '$.ig'로 설정합니다. CustomEditorProviderCheckbox()'입니다.

비교

PROS

다른 템플릿과 함께 작동합니다.
구현하기 쉬움 – 간단한 시나리오의 경우 1줄 또는 공급자 설정의 경우 1줄 이상.
일관된 모양 – 나머지 그리드 부분과 잘 어울리고 테마와 일치합니다.
기본 확인란 편집기 공급자를 재사용하여 탁월한 편집을 수행합니다.
다시 말하지만, 부울 값에만 국한되지 않습니다.
또한 bi-state 체크박스에 국한되지 않고 tri-state 체크박스가 잠재적으로 구현될 수 있습니다()

죄수

부울이 아닌 값으로 구현하기 위해 일부 코드가 필요할 수 있지만, 거기에서 볼 수 있듯이 대부분의 작업을 절약 할 수 있습니다.
'단일 클릭 업데이트'기능을 추가하려면 약간의 작업이 필요합니다. 나는 그만한 가치가 있다고 주장 할 수 있습니다.
정말 다른 것은 볼 수 없습니다.

결론

이 글이 교육적이고 때때로 유용했기를 바랍니다. 또한 기본값이 유일한 옵션이 아니며 사용자 지정 솔루션을 쉽게 만들 수 있을 뿐만 아니라 사용 가능한 솔루션의 일부를 재활용하면 훨씬 더 좋아진다는 것이 분명해졌기를 바랍니다. 데이터가 표현되는 방식은 실제 값에서 완전히 임의적이며 좋은 오래된 양식 요소 또는 일관된 모양을 가진 수정 된 요소를 사용할 수 있습니다.이 시점에서 확인란을 슬라이더 / 토글 버튼으로 바꿀 수 있으며 유사한 접근 방식을 사용하여 다른 유형의 데이터 표현을 수정할 수 있습니다. 결국 jQuery Grid와 그 기능은 사용자 정의가 매우 용이한 것으로 입증되었으며 대부분의 경우 개발자가 멋진 경험을 만드는 데 도움이 되는 올바른 속성, 메서드 또는 이벤트를 항상 가지고 있기 때문입니다!

데모 프로젝트를 다운로드할 수 있습니다.. 언제나처럼 Twitter에서 팔로우할 수 있습니다.@DamyanPetev그리고@ Infragistics그리고 계속 연락하세요페이스북,구글+그리고링크드인!

jQuery 어떻게