HOPPEN Grid DEMO

3 레벨 기능
그리드
							
var grid = hg.hgrid({
    ini: {
        url: gridData,     // Service통신을 위한 URL
        selector: '#grid', // Grid를 생성해줄 HTML Element Selector
        width: '1000px',
        height: '520px',
        selectMode: 'multiCell',
        resize: true
    },
    header: {
        height: ['40px']
    },
    title: {
        visible: true,
        text: '직원 목록',
        toggle: true,
        setting: false
    },
    rows: {
        height: '30px',    // 최소 24px
        rownum: true
    },
    // 속성 기술
    cols: [
        { name: '이름', id: 'USER_NAME', width: '70px' },
        { name: '소속', id: 'USER_BEL', width: '70px', display: { type: 'text', contents: 'U:연구소;O:경영팀' }, align: 'right' },
        { name: '기술등급', id: 'USER_GRA', width: '70px', display: { type: 'text', contents: 'A:특급;B:고급;C:중급;D:초급' }, style: { header: { backgroundColor: '#007A00', color: '#ffffff' } } },
        { name: '사원구분', id: 'USER_GUBUN', width: '70px', display: { type: 'text', contents: 'A:정규직;B:계약직' } },
        { name: '전화', id: 'USER_PON', width: '100px', align: 'left' },
        { name: '이메일', id: 'USER_EMAIL', width: '230px', align: 'left' },
        { name: '주소', id: 'USER_ADDR', width: '250px', align: 'left' },
        { name: '성별', id: 'USER_SEX', width: '50px', display: { type: 'text', contents: 'male:남성;female:여성' } }
        { name: '입사 시험 점수', id: 'USER_energy', width: '180px', display: { type: 'bar', max: '100' } }
        { name: '입사일', id: 'USER_STARTDATE', width: '120px' } }
    ]
});
공통 정보 설정
