jQuery Grid Checkbox Column Alternatives

체크 박스 열 (마지막 릴리스에서 도입 됨, Infragistics jQuery Grid에서 체크 박스 열 사용에 대한 이 게시물 참조)은 부울 값이 있는 열을 체크 박스로 변환하기 위한 '바로 가기'를 제공하기 위해 만들어졌으며 이러한 기능에 대한 고객의 큰 관심으로 인해 대부분 현실이 되었습니다(결국 완벽하게 이해가 됩니다).

Damyan Petev Last Updated Feb 26, 2025 11min read

물론, 이것은 완벽한 세상이 아니며 모든 사람의 요구에 맞을 수 있는 기본값을 만드는 것은 아마도 잃어버린 원인일 것입니다. 위의 소개 블로그를 살펴보면 실제로 많은 시간을 절약할 수 있습니다 – 단일 속성을 설정하는 것만으로도 충분합니다. 그것도 좋지만, 그곳의 댓글과 포럼에서도 볼 수 있듯이 제한이 있습니다 – 체크박스 열은 훌륭하게 작동하지만 일부 템플릿이 관련되어 있을 때 모든 것이 부끄러워집니다.

문제점

그리드 API 참조의 'renderCheckboxes'에서 "jQueryTemplating을 사용할 때 해당 옵션을 사용할 수 없습니다"라고 표시됩니다. 그것은 약간 오해의 소지가 있을 뿐이며 실제로 우리 자신의 템플릿 엔진을 포함하기 때문에 가장 확실히 업데이트될 것입니다. 따라서 본질적으로 위의 내용은 '템플릿팅을 사용할 때 해당 옵션을 사용할 수 없습니다'로 읽어야 합니다. 이는 행 템플릿에 열에 대한 자체 렌더링이 있을 수 있으므로 이러한 경우 Checkbox 열 기능이 의도적으로 표시되지 않기 때문입니다.

이는 열 템플릿에서도 사용할 수 없는 이유에 대한 직관적인 설명일 수도 있고 아닐 수도 있지만, 일단 생각해보면 그리드는 행을 렌더링하고 이를 수행할 수 있는 기본 템플릿인 행 템플릿이 있습니다. 열을 정의하는 것은 기본값 대신 해당 행 템플릿의 어딘가에 포함되는 것으로 끝납니다. 그렇기 때문에 일반적으로 템플릿은 이 기능을 비활성화합니다.

그러나 항상 그렇듯이 옵션이 있으므로 걱정하지 마십시오. 나는 이것을 우연히 발견했고 고객 피드백이 우리를 위해 이것을 지적했기 때문에 (계속하십시오. 우리는 건설적인 피드백을 좋아합니다!) 이 블로그에서 이러한 기능을 갖출 수 있는 대체 방법을 찾는 데 대한 경험을 공유하겠습니다.

해결책

Template Checkbox

이상하게도 이 문제는 데이터의 UI 표현을 변경하는 가장 쉬운 방법이고 원하는 대로 조정할 수 있는 매우 유연하기 때문에 솔루션의 주요 부분이기도 합니다. 이를 사용하여 완전히 새롭지 않은 () 그리고 언급했듯이 기능 자체는 이에 대한 바로 가기를 의미합니다.

공정한 경고: 나는 내 경험을 공유하고 있기 때문에 내가 취한 두 가지 다른 접근 방식을 살펴볼 것입니다. 하나를 사용하기 전에 둘 다 보고 고려했는지 확인하십시오.

따라서 첫 번째 방법은 확인란 태그 유형의 일반 HTML 입력을 사용하고 값을 할당하는 것입니다. 이것은 위에 링크 된 두 포럼 게시물에서도 볼 수있는 접근 방식입니다. 템플릿을 행 템플릿에 적용하거나(이미 사용 중인 경우) 단일 열에 간단히 할당할 수 있습니다. 데모를 위해 AdventureWorks의 Employees 테이블()을 선택하고 그리드 구성은 다음과 같습니다.

$("#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: "120px", headerText: "SalariedFlag", dataType: "bool", template: "<input type=\"checkbox\" {{if ${SalariedFlag} === \"true\"}} checked=\"checked\" {{/if}} disabled=\"disabled\" style=\'display: block; margin-left: auto; margin-right: auto;\'>'}
    ],
    features: [
        { name: "Filtering", mode: "advanced", type: "local" },
        { name: "Sorting", type: "local" }]
});

첫 번째 열에는 MSDN에 있는 동일한 테이블의 설명에 대한 링크인 템플릿이 있으며, 표시되는 것처럼 정렬 및 필터링과 같은 기능을 사용할 수 있을 뿐만 아니라 확인란이 표시되는 것을 막지는 않습니다.

템플릿과 간단한 HTML 입력 유형 체크박스를 사용하는 체크박스 열에 대한 기본 대안입니다.

향상

위의 템플릿은 단순한 렌더링 조정일 뿐이며 상호 작용 패키지와 함께 제공되지 않습니다. 고객이 지적한 또 다른 공정한 점은 확인란 열을 업데이트하려면 3번의 클릭이 필요하기 때문에 기본 상호 작용이 개선될 수 있다는 것입니다(선택 항목이 있는 행 편집이 작동하는 방식입니다. 1번의 클릭으로 선택, 편집을 입력하기 위해 다른 한 번, 값을 변경하려면 세 번째). 이벤트: 이것이 원래 문제는 아니었지만 이제 확인란을 제어할 수 있으므로 상황을 조금 개선하지 않으시겠습니까?

첫 번째 단계는 물론 비활성화된 부분을 제거하는 것입니다. 그런 다음 체크 박스와의 사용자 상호 작용을 처리해야하므로 다음과 같은 내용을 추가하십시오.

data-rowid=\"${BusinessEntityID}\" onchange=\"checkboxChanged(event);\"

을 템플릿에 추가합니다. 활성화 된 체크 박스 입력의 경우 변경 및 클릭 이벤트는 기본적으로 상호 교환 가능하므로 하나를 선택하지만 핸들에 전달 된 매개 변수의 이름은 * must* 'event'여야합니다. 'data-' 속성은 체크박스 위치에 대한 정보를 저장하는 가장 쉬운 방법입니다 – 그리드는 자세히 살펴보면 rows 요소와 동일한 작업을 수행하며 별도의 행 데이터 항목에 액세스할 수 있고 오버헤드를 거의 추가하지 않기 때문에 생성 시 저장하는 것이 훨씬 쉽습니다. 이제 Updating API를 사용하여 해당 템플릿을 사용하는 것이 얼마나 쉬운지 확인하십시오.

function checkboxChanged(evt) {
    // get rowID where change occured:
    var rowId = $(evt.currentTarget).data().rowid;
    $("#grid").igGridUpdating("updateRow", rowId, { "SalariedFlag": evt.currentTarget.checked });
}

jQuery data() 메소드를 사용하면 스냅에서 해당 행 ID를 얻을 수 있으며 전달 된 이벤트는 해당 열 값에 할당 할 확인란의 상태를 알려줄 수 있습니다. 이를 위해서는 업데이트를 리소스로 로드하고 그리드 기능(). 이로 인해 발생할 수 있는 몇 가지 문제가 발생합니다

업데이트가 장면에 들어갈 때..

확인란 편집과 업데이트가 이미 관련되어 있기 때문에 그리드가 완전한 편집 경험을 제공해야 한다고 가정하는 것이 상당히 합리적입니다. 그러나 편집 모드가 활성화되면 편집 된 셀 / 행 UI는 별도의 UI가 되므로 공급자를 직접 구현하지 않으면 기본 콤보 스타일 편집기가 표시됩니다.

이제 그것은 당신에게 문제가 될 수도 있고 아닐 수도 있습니다 (잘 작동하고 편집 모드를 종료하면 확인란이 업데이트됩니다), 그러나 일관된 경험을 위해 편집기도 확인란이 될 수 있다면 좋을 것입니다.. 가급적이면 같은 것이 좋습니다. 이 시점에서 당신은 꽤 많은 옵션을 가지고 있으며, 실제로 이것이 어떻게 더 좋고 유용하게 만들 수 있다고 생각하는지 몇 가지 예를 제공하겠습니다.

시도 할 수있는 한 가지 작은 트릭은 동일한 열을 읽기 전용으로 설정하는 것입니다. 편집 상태에 관계없이 셀의 값을 설정하는 컨트롤이 이미 있으므로 동일한 열을 읽기 전용으로 설정할 수 있습니다! 그렇게 하면 셀의 UI가 편집기로 대체되는 것을 방지하고 행 모드에서는 변경되지 않은 상태로 유지됩니다. 즉, 위와 같은 콤보가 없으며 동일한 이벤트 핸들러가 여전히 작동 할 준비가되어있는 동일한 확인란이 있음을 의미합니다. 그러나 한 가지 조정이 필요합니다 - Update Row 메소드는 편집 세션 내에서 호출되지 않기 때문에 UI를 업데이트합니다. 괜찮으신가요? 아니. 문제는 위의 설정으로 그리드가 있고 편집이 활성화되었을 때 행을 업데이트하려고 시도하는 경우 어색한 동작이 보장된다는 것입니다. UI가 업데이트 되었지만 그리드가 해당 그리드를 종료한 것처럼 보이고 편집 세션의 편집을 처리하는 버튼이나 기타 요소가 없기 때문에 편집은 여전히 활성화되어 있습니다. 글쎄, 그것은 붙어있다. 업데이트 행을 호출하기 전에 편집을 종료하는 것과 같은 몇 가지 옵션이 있지만 체크 박스 변경시 즉시 종료되며 사용자가 예상하는 것은 아닐 수 있습니다. 그런 다음 다시 편집하는 동안 확인란을 비활성화할 수 있지만 편집이 활성화되어 있을 때는 그렇지 않습니다.

할 수 있는 일은 모든 확인란이 UI를 처리한 후 변경 사항을 데이터 소스 트랜잭션 로그에 직접 저장하는 것이지만 다른 기능과 함께 제대로 작동하려면 추가 작업(데이터 더티 이벤트, 다시 바인딩)이 필요할 수 있습니다. 사용자에 대해 동일한 행에서 편집을 다시 시작할 수도 있습니다.

function checkboxChanged(evt) {
    // get rowID where change occured:
    var rowId = $(evt.currentTarget).data().rowid;
    // if editing is active - update just the cell, otherwise use row update
    if($("#grid").igGridUpdating("isEditing")){
        $("#grid").igGridUpdating("endEdit");
        $("#grid").igGridUpdating("setCellValue", rowId, "SalariedFlag", evt.currentTarget.checked);
         
        //optionally can start the editing on the same row again
        //need row index:
        var rows = $("#grid").igGrid("rows");
        var rowIndex;
        //var context = this;
        $.each(rows, function (index, row) {
            if ($(row).data().id == rowId) {
                rowIndex = index;
            }
        });
        //make sure you let the calling code exit before attempting start edit,
        // a few milliseconds should be enough
        setTimeout(function () { $("#grid").igGridUpdating("startEdit", rowIndex, 1); }, 2);
    }
    else {
        $("#grid").igGridUpdating("updateRow", rowId, { "SalariedFlag": evt.currentTarget.checked });
    }
}

위의 스 니펫은 ID에서 행 인덱스를 가져 와서 약간의 지연으로 해당 행에서 편집을 시작하는 것을 보여줍니다 (이벤트 핸들러는 다른 곳에서 익명 함수 내에서 호출됩니다). 편집을 종료하고 시작하면 UI가 변경되어 약간의 깜박임이 발생하지만 변경할 수 있는 약간의 욕구와 CSS 조정이 있습니다.

더 나은 경험을 위해 사용자 정의 편집기 공급자를 만들 수 있는 가능성을 탐색할 수 있으며 다음 부분에서 이에 대해 몇 가지 보여 드리겠습니다.

No Boolean? No problem!

지금까지 눈치채셨다면, 실제 값과 표현 사이에는 정말 약한 연관성이 있습니다 - 우리의 논리는 표현과 상호 작용 결과를 모두 결정합니다. 그래서 아무 것도 부울 (문자열, 숫자, null 값) 이상을 사용하는 것을 막을 수 없습니다. 아마도 확인란의 두 가지 이상의 상태를 탐색할 수도 있습니다. 각 제품에 대한 MaxQty 속성이 최대 OR 'NULL'을 나타내는 AdventureWorks의 SpecialOffers 테이블을 사용하겠습니다. 해당 데이터만 표시하는 것이 아니라 해당 데이터에 대한 평가 결과를 표시하고 싶습니다. 가장 좋은 예는 아닐 수도 있지만 제안에 최대 값이 있는지 여부를 표시하는 열이 있습니다.

$.ig.loader(function () {
    $("#grid").igGrid({
        primaryKey: "SpecialOfferID",
        height: 550,
        dataSource: "@Url.Action("SpecialOffersData")",
        autoGenerateColumns: false,
        columns: [
            { key: "SpecialOfferID", width: "100px", headerText: "ID", dataType: "number" , template: "<a style=\'font-size:20px;\' href=\'http://msdn.microsoft.com/en-us/library/ms124455(v=sql.100)\'>${SpecialOfferID}</a>'},
            { key: "Description", width: "250px", headerText: "Description", dataType: "string" },
            { key: "Type", width: "220px" , headerText: "Type", dataType: "string" },
            { key: "MaxQty", width: "150px", headerText: "Has MaxQty", dataType: "string", template: "<input type=\"checkbox\" {{if parseInt(${MaxQty}) }} checked=\"checked\" {{/if}} data-rowid=\"${SpecialOfferID}\"  data-test=\"${MaxQty}\" onchange=\"checkboxChanged(event);\" style=\'display: block; margin-left: auto; margin-right: auto;\'>'}
        ],
        features: [
            { name: "Filtering", mode: "advanced", type: "local" },
            { name: "Sorting", type: "local" },
            { name: "Updating"}]
    });
});

참고: 값이 'false'에 해당하는 값 중 하나가 아닌 경우에만 확인란이 선택되고 있습니다 (예를 들어 실패했을 때 구문 분석은 NaN을 반환합니다). 또한 거의 같은 방식으로 값을 설정할 수 있습니다 – false에 null을 추가하고 true에 기본값/계산된 값을 추가합니다.

function checkboxChanged(evt) {
    // get rowID where change occured:
    var rowId = $(evt.currentTarget).data().rowid;
    var newValue = evt.currentTarget.checked ? 10 : null;
    $("#grid").igGridUpdating("updateRow", rowId, { "MaxQty": newValue });
}

결과 (SQL Management Studio와 jQuery Grid를 사용하여 실행중인 응용 프로그램 모두) :

그리고 다시 언급 된 업데이트 트릭은 동일한 방식으로 구현 될 수 있습니다.

넘어가다

다음은 DIY 템플릿과 기본 확인란 열을 빠르게 비교한 것입니다.

PROS

다른 템플릿과 함께 작동합니다.
구현하기 쉬움 – 간단한 시나리오를 위한 1줄.
부울 값에만 국한되지 않습니다.
사용자 정의 솔루션으로 bi-state 확인란에 국한되지 않으며 tri-state 확인란이 잠재적으로 구현될 수 있습니다()

죄수

비슷한 결과를 얻으려면 몇 가지 코드가 필요합니다.
업데이트 편집 모드 내에서도 작동해야 하는 경우 구현하기가 다소 복잡할 수 있습니다. 전반적으로 업데이트 기능과의 까다로운 관계에서.
브라우저 구현은 특별해 보이지 않으며 (내가 틀렸다면 수정하십시오) 동일하게 보일 보장도 없습니다.

이 경험이 기본값이 제공할 수 있는 더 큰 기능을 염두에 두고 있는 모든 사람들에게 도움이 되었기를 바랍니다. 위에서 말했듯이 이것은 경험을 공유하는 저일 뿐이며 여기에는 학습 곡선이 있으며 이것이 유일하거나 최종적인 해결책은 아닙니다. 다음 블로그에서 다른 접근 방식을 계속 지켜봐 주세요!

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

jQuery 어떻게