plugin

제이쿼리 ui 라이브러리

sweetalert2
Magnific Popup
구글차트
jquery-ui
fullcalendar api
dataTable - 조회 : 검색,페이징
toastgrid
jQgrid - 조회, 입력

구글차트

구글차트 quickStart 참조
- 차트데이터 변경
- 부서별인원수
- 부서별 인원수 와 인턴수
chart.json으로 테스트 async=flase 설정 async=true 설정
부서별 인원수 서버프로그램 작성 1) mapper.xml 쿼리추가 :부서별 급여평균 2) mapper 인터페이스에 메서드 추가 3) EmpMapperTest - @Test 4) controller 핸들러 추가 5) jsp 페이지에서 drawChart() 함수
- 응답결과를 chartData로 변환
부서별 급여평균 차트 추가 1)차트 그려질 위치 : <div id="chart_div1"></div> 2)drawChart1() 3)drawChart2()
chart option
- color
- format
- legend

toast ui

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://uicdn.toast.com/grid/latest/tui-grid.css" />
  <script src="https://uicdn.toast.com/grid/latest/tui-grid.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <input type="text" placeholder="Search.." name="search"> 
  <i class="fa fa-search"></i>

  <div id="grid"></div>
  <script>
    class CustomRenderer {
      constructor(props) {
        const el = document.createElement('div');
        el.addEventListener('mousedown', (ev) => {
          ev.stopPropagation(); //
          console.log('aa')
        });

        this.el = el;
        this.render(props);
      }

      getElement() {
        return this.el;
      }

      render(props) {
        let temp = '';
        for (let t of listItems) {
          if (t.value == props.value) {
            temp = t.text;
          }
        }
        this.el.innerHTML = `<span>${temp}</span><i class="fa fa-search"></i>`
      }
    }

    var listItems = [{
        text: '선택 안함',
        value: '0'
      },
      {
        text: '식비',
        value: '1'
      },
      {
        text: '문화 생활비',
        value: '2'
      },
      {
        text: '교통비',
        value: '3'
      },
      {
        text: '관리비',
        value: '4'
      }
    ]
    const data = [{
        id: '10012',
        city: 'Seoul',
        country: 'South Korea',
        bigo: '1'
      },
      {
        id: '10013',
        city: 'Tokyo',
        country: 'Japan',
        bigo: '2'
      },
      {
        id: '10014',
        city: 'London',
        country: 'England',
        bigo: '1'
      },
      {
        id: '10015',
        city: 'Ljubljana',
        country: 'Slovenia',
        bigo: '3'
      },
      {
        id: '10016',
        city: 'Reykjavik',
        country: 'Iceland',
        bigo: '1'
      }
    ];
    const grid = new tui.Grid({
      el: document.getElementById('grid'), // 컨테이너 엘리먼트
      columns: [{
          header: 'ID',
          name: 'id'
        },
        {
          header: 'CITY',
          name: 'city',
          editor: 'text'
        },
        {
          header: 'COUNTRY',
          name: 'country'
        },
        {
          header: 'bigo',
          name: 'bigo',
          renderer: {
            type: CustomRenderer
          },
          // formatter : function(el){
          //   console.log(el.value)
          //   for( t of listItems) {
          //     if(t.value == el.value) {
          //       return t.text;
          //     }
          //   }
          //   return '';
          // }
        }
      ],
      data: data
    });

    grid.on("dblclick", function (e) {
      let rowKey = e.rowKey; //grid.getFocusedCell();
      grid.setValue(rowKey, 'bigo', '3')
    })
  </script>

yumi

제이쿼리 ui 라이브러리

구글차트

toast ui