[dhtmlx7, 8] sidebar 첫 사용

신입과제 2차가 dhtmlx를 이용하는 것이 었는데

첫프로젝트에서는 5, 현재 프로젝트에서는 7을 사용하고 있어서

찾아보기 쉽도록 포스팅

 

# 우선 sidebar의 api 문서는 다음과 같음

https://snippet.dhtmlx.com/y8y7iw42?_ga=2.197320879.1429877374.1678545376-102636206.1678545376&_gl=1*13yy57k*_ga*MTAyNjM2MjA2LjE2Nzg1NDUzNzY.*_ga_N87XPB4GSG*MTY3ODU0NTM3NS4xLjEuMTY3ODU0NTQ1OS4wLjAuMA.. 

DHTMLX - Sidebar. Initialization with config.data

#sidebar의 선언 예시

const sidebar = new dhx.Sidebar("sidebar", {
  data: dataset
});

# HTML 예시 

<!-- component container -->
<div style="height: 100%" id="sidebar"></div>

<!-- dataset -->
<script>
  const dataset = [
    { 
      id: "dashboard", 
      value: "Dashboard", 
      icon: "mdi mdi-view-dashboard" 
    },
    {
      id: "statistics",
      value: "Statistics",
      icon: "mdi mdi-chart-line"
    },
    {
      id: "reports",
      value: "Reports",
      icon: "mdi mdi-file-chart"
    },
    { 
      type: "separator" 
    },
    { 
      id: "posts", 
      value: "Posts", 
      icon: "mdi mdi-square-edit-outline",
      items: [
        {
          id: "addPost",
          value: "New Post",
          icon: "mdi mdi-plus"
        },
        {
          id: "allPost",
          value: "Posts",
          icon: "mdi mdi-view-list"
        },
        {
          id: "categoryPost",
          value: "Category",
          icon: "mdi mdi-tag" 
        }
      ]
    },
    { 
      id: "pages", 
      value: "Pages",
      icon: "mdi mdi-file-outline",
      items: [
        {
          id: "addPage",
          value: "New Page",
          icon: "mdi mdi-plus"
        },
        {
          id: "allPage",
          value: "Pages",
          icon: "mdi mdi-view-list"
        },
        {
          id: "categoryPages",
          value: "Category",
          icon: "mdi mdi-tag" 
        }
      ]
    },
    { 
      id: "messages", 
      value: "Messages", 
      count: 18, 
      icon: "mdi mdi-email-mark-as-unread"
    },
    { 
      id: "media", 
      value: "Media",
      icon: "mdi mdi-folder-multiple-image"
    },
    { 
      id: "links", 
      value: "Links",
      icon: "mdi mdi-link"
    },
    { 
      id: "comments", 
      value: "Comments",
      icon: "mdi mdi-comment-multiple-outline",
      count: "118",
      countColor: "primary",
      items: [
        { 
          id: "myComments", 
          value: "My Comments",
          count: 15,
          icon: "mdi mdi-account",
        },
        { 
          id: "allComments", 
          value: "All Comments",
          count: 103,
          countColor: "primary",
          icon: "mdi mdi-comment-multiple-outline",
        },
      ] 
    },
    { 
      type: "spacer"
    },
    { 
      id: "notification", 
      value: "Notification", 
      count: 25, 
      icon: "mdi mdi-bell", 
      countColor: "primary" 
    },
    { 
      id: "configuration",
      value: "Configuration", 
      icon: "mdi mdi-settings",
      items: [
        { 
          id: "myAccount", 
          value: "My Account",
          icon: "mdi mdi-account-settings"
        },
        { 
          id: "general", 
          value: "General Configuration",
          icon: "mdi mdi-tune"
        }
      ]
    }
  ];
</script>

 

 - api 문서 페이지에서는 data를 하드코딩

  - 하드코딩 외에도

     1. @restcontroller로 json 형태로 내려주는 방법

     2. sidebar.data.load("[파일경로]/[json파일명]"); 로 JSON file을 load하는 방법

     3. sidebar.data.parse(data변수명); 으로 넣어주는 방법

등이 있음

 

sidebar의 data로 인식되는 옵션은

id

type : "menuItem", "navItem", "Separator", "spacer", "title" 이 있음

html : dhtmlx에서 제공되는 옵션 외에 html 요소들을 직접 작성해서 넣을 수 있음

value

icon : 해당 타입의 아이템 안에 넣어질 icon

count

tooltip

 

영어 단어의 의미 이상 뜻이 없다고 판단되는 부분은 비움