안녕하세요 그레이프시티입니다.
먼저 답변이 늦어진 점 죄송합니다.
1. 모든 체크박스를 선택, 선택해제하는 방법
아래 코드와 같이 addEventListener 이벤트를 이용하여 체크박스를 클릭시 FlexGrid의 인스턴스가 theGrid인 전체 행에 대해서 forEach를 사용하여 각 열의 isSelected 속성의 값을 바꿔주는 방법으로 해당 기능을 구현하실 수 있습니다. 아래 코드를 참고하여 주시기 바랍니다.
//HTML
<label>
Check all
<input id="checker1" type="checkbox" />
</label>
// JS
document.getElementById("checker1").addEventListener("click", function (e) {
theGrid.rows.forEach((r) => {
if (r.isSelected === true) {
r.isSelected = false;
} else if (r.isSelected === false) {
r.isSelected = true;
}
});
theGrid.refresh();
});
2. 2번째와 5번째 열에 체크박스를 체크, 언체크 하는 방법
wijmo.grid.selector.BooleanChecker를 이용하여 열의 컬럼의 헤더를 클릭할 때, 해당되는 열의 체크박스의 전체 체크/언체크를 구현할 수 있습니다. 다음 코드를 참고하여 주시기 바랍니다. 체크박스를 추가할 열의 데이터의 타입을 Boolean으로 지정하고 그리드의 getColumn을 이용하여 체크박스를 추가한 열을 가져온 다음 wijmo.grid.selector.BooleanChecker를 통해 체크박스 생성하면 됩니다.
function getData(count) {
var countries = "US,Germany,UK,Japan,Italy,Greece".split(",");
var products = "Widgets,Gadgets,Yahoos".split(",");
var data = [];
for (var i = 0; i < count; i++) {
var item = {
id: i,
country: pickOne(countries),
product:i % 2 != 0,
discount: Math.random() * 0.3,
downloads: Math.round(Math.random() * 200000),
sales: i % 2 != 0,
};
data.push(item);
}
return data;
}
(...)
let theGrid = new wijmo.grid.FlexGrid("#theGrid", {
itemsSource: view,
deferResizing: true,
showMarquee: true,
alternatingRowStep: 0,
autoGenerateColumns: false,
columns: [
{ binding: "id", header: "ID", isReadOnly: true },
{ binding: "country", header: "Country" },
{ binding: "product", header: "Product",dataType: wijmo.DataType.Boolean },
{ binding: "discount", header: "Discount", format: "p0" },
{ binding: "downloads", header: "Downloads" },
{ binding: "sales", header: "Sales", dataType: wijmo.DataType.Boolean},
],
});
(...)
let checker = new wijmo.grid.selector.BooleanChecker(
theGrid.columns.getColumn("product")
);
let checker2 = new wijmo.grid.selector.BooleanChecker(
theGrid.columns.getColumn("sales")
);
[BooleanChecker]
https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid_selector.booleanchecker.html
해당 도움말 문서를 함께 전달드리니 참고하여 주시기 바랍니다.
다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.