Master Detail 그리드 설정

							
var grid1 = hg.hgrid({
    ini: {
        id: "grid1",
        url: "http://localhost:3000/userMaster?code=&q=100",
        selector: "#grid1",
        width: "910px",
        height: "200px",
        selectMode: "multiRow"
    },
    title: {
        text: "회사정보"
    },
    header: {
        height: ["40px"]
    },
    rows: {
        height: "30px",
        rownum: true
    },
    detailgrid: {
        enable: true,
        target: "grid2", // 대상 그리드의 id 값을 입력
        query: [{ param: "code", id: "code" }],
        prequery: "q=100",
        method: "get"
    },
    // 속성 기술
    cols: [
        { name: "코드", id: "code", width: "50px", display: { type: "text" } },
        { name: "로고", id: "logo", width: "150px", display: { type: "image", prefix: " " } },
        { name: "회사명", id: "name", width: "120px", display: { type: "text" } },
        { name: "평균", id: "score", width: "150px", display: { type: "bar", max: "100" } },
        { name: "주소", id: "address", width: "400px", display: { type: "text" } },
        { name: "홈페이지", id: "url", width: "200px", display: { type: "text" } },
        { name: "창립일", id: "startdate", width: "120px", display: { type: "text" } }
    ]
});

var grid2 = hg.hgrid({
    ini: {
        id: "grid2",
        url: "http://localhost:3000/userDetail",
        selector: "#grid2",
        width: "910px",
        height: "287px",
        selectMode: "singleRow"
    },
    title: {
        text: "사원정보"
    },
    panel: {
        text: "그룹핑 할 항목을 추가하세요"
    },
    header: {
        height: ["40px"]
    },
    rows: {
        height: "30px",
        rownum: true
    },
    edit: {
        editable: true,
        enter: "end",         // next, end
        begin: "dblclick",    // click, dblclick
        f2: true,
        before: function(colid, coldata, rowdata) {
            return true;
        }
    },
    page: {
        visible: true,
        count: 10,
        rowList: [10, 20, 50]
    },
    // 속성 기술
    cols: [
        { name: "회사명", id: "USER_COMPANY", width: "120px", display: { type: "text", label: "이동" } },
        { name: "사번", id: "USER_SABUN", width: "80px", display: { type: "text", label: "이동" }, editor: { format: "number", required:true, minlength:6, maxlength:8 }, sortable: false },
        { name: "이름", id: "USER_NAME", width: "70px", display: { type: "text" }, editor: { format: "english", required: true, minlength: 3 } },
        { name: "소속", id: "USER_BEL", width: "70px", display: { type: "text", contents: "U:연구소;O:경영팀" }, editor: { type: "combo", contents: "U:연구소;O:경영팀" }, align: "right" },
        { name: "기술등급", id: "USER_GRA", width: "70px", display: { type: "text", contents: "A:특급;B:고급;C:중급;D:초급" }, editor: { type: "combo", contents: "A:특급;B:고급;C:중급;D:초급" } },
        { name: "사원구분", id: "USER_GUBUN", width: "70px", display: { type: "text", contents: "A:정규직;B:계약직" }, editor: { type: "checkbox", check_contents: "A:B" } },
        { name: "성별", id: "USER_SEX", width: "50px", display: { type: "text", contents: "male:남성;female:여성" }, editor: { type: "radiobox", radio_contents: "male: female" } },
        { name: "입사 시험 점수", id: "USER_energy", width: "180px", display: { type: "bar", max: "100" } },
        { name: "입사일", id: "USER_STARTDATE", width: "120px", display: { type: "text" }, editor: { type: "calendar", loadFormat: "YYYY-MM-DD" } }
    ],
    events: {
        success: function() { // Grid생성 성공 시 Callback
            debug("SUCCESS");
        },
        error: function() {   // Grid생성 실패 시 Callback
            debug("ERROR");
        },
        editCell: function(colid, before, after) {
            if(colid == "USER_energy") {
                var dataTotalCount = usergrid.data.model.get("final").length - 1;
                var sum = 0;
                for (var i=0; i<dataTotalCount; i++) {
                    sum += parseInt(usergrid.getRowData(i).USER_energy, 10);
                }

                var avg = sum / (dataTotalCount);

                var selectedRowIndex = grid.selection.nowNodeY;
                grid.getRowData(selectedRowIndex).score = avg;
                grid.data.update();
            }
        }
    }
});