ax5ui / ax5ui-grid

Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
http://ax5.io/ax5ui-grid/demo/index.html
MIT License
99 stars 36 forks source link

안녕하세요 그리드 체크박스 문의입니다. #102

Closed FusionPark closed 6 years ago

FusionPark commented 6 years ago

안녕하세요.. 그리드 체크 박스 질문입니다.

showLineNumber: true, multipleSelect: false, frozenColumnIndex: 4, showRowSelector: true, target: $('[data-ax5grid="grid-view-01"]'), header: { columnHeight: 40, selector: false }, 이렇게 설정하는데 selector: false 이걸 셋팅해도 헤더에 체크박스가 사라지지 않습니다. api 함수 설명하는 곳에는 [_config.header.selector] Object true 이렇게 Object로 되어 있는데 어떻게 보내야 할가요..

aeei commented 6 years ago

안녕하세요! 체크박스 영역을 전체적으로 빼는거라면.. showRowSelector를 false로 해보시면 될 것 같습니다.

https://github.com/ax5ui/ax5ui-grid/issues/92

aeei commented 6 years ago

헤더에 있는 체크박스만 없애시고 싶으시면 아래처럼 사용하시면 될 것 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Issue #102 그리드 예제</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>
</head>
<body>
<div data-ax5grid="my-grid" data-ax5grid-config="{}" style="height: 300px;"></div>
<script type="text/javascript">
  var myGrid = new ax5.ui.grid();
  $(document.body).ready(function () {

    myGrid.setConfig({
      header: {
        selector: false
      },
      showRowSelector: true,
      target: $('[data-ax5grid="my-grid"]'),
      columns: [
        {key: "a", label: "", width: 27, editor: {type: "checkbox", config: {trueValue: "Y", falseValue: "N"}}},
        {key: "b", label: "header2"},
        {key: "c", label: "header3"},
        {key: "d", label: "header4"}
      ],
      body: {
        onDataChanged: function () {
          if (this.key === "a"){
            console.log(this);
            this.self.select(this.dindex, {selectedClear: true});
            this.select(this.dindex)
          }
        }
      }
    });

    // 그리드 데이터 가져오기
    myGrid.setData([
      {a: "Y", b: "merge", c: "merge", d: "edit", e: "checkbox"},
      {a: "Y", b: "merge", c: "merge", d: "text", e: "empty"},
      {a: "Y", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "Y", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "Y", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "Y", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "Y", b: "merge", c: "merge", d: "empty", e: "button"}
    ]);

  });
</script>
</body>
</html>
FusionPark commented 6 years ago

에고 업데이트 하니까 해결돼네요. 감사합니다.