칸반보드를 이용하여 팀 현황판을 만드는 사례입니다.

1. 그리드 밑에 칸반 객체를 가져도 놓습니다.

2. 칸반의 속성에 카테고리, 표시필드를 지정합니다.

3. 저장하고 폼을 실행합니다.

스크립트를 이용한 구체적인 제어

1. 팀이 갯수가 많아서 한 화면에 넘어가는 경우라면 less 스타일을 통해서 조정할수 있습니다.

.bg-couple{

   background-color: yellow!important;

}

jj-proxy-kanban{

  zoom: 0.8!important;

  .card {

    width: 96px;

    .list-group-item {

      padding: 1px 0;

      text-align: center;

      font-size: 16px

    }

  .card-header{

       text-align:center;

    }

    .card-header::after{

      content:'(' attr(cnt) ')';

      display:block;

      text-align:center;

    }

  }

}

2. 칸반아이템에 특정조건에 따른 상태를 다르게 처리해야하는 경우에 이벤트를 이용하여 구현합니다

form.addEventListener("kanban.item.added", e=>{

  let li = e.detail.item;

  let attr = e.detail.row["회원특성"]||"";

  if(attr.includes("부부회원")){

    li.classList.add("bg-couple");

  }

  if(attr.includes("시니어")){

    li.classList.add("text-info");

  }

  if(e.detail.row["역할"] == "팀장"){

    li.classList.remove("bg-couple");

    li.classList.add("bg-primary");

  } else if(e.detail.row["역할"] == "총무"){

    li.classList.remove("bg-couple");

    li.classList.add("bg-info");

  }

  let head = li.closest('div.card-body').previousElementSibling;

  let cnt = parseInt(head.getAttribute("cnt")||0);

  cnt++;

  head.setAttribute("cnt", cnt);

})