jsgrid관련해서 질문있습니다~~ > 시즌3 질문과 답변

본문 바로가기

시즌3 질문과답변

[해결중] jsgrid관련해서 질문있습니다~~

  • - 별점 : 평점
  • - [ 0| 참여 0명 ]

본문

관리자에서 리스트 관리를 jsgrid를 이용하고 있던데

기본적인 필드생성과 데이터전달은 대충 이해해서 어떻게던 쓰고있습니다.

그런데 이번에 아래표와 같이 표의 헤더부분을 셀병합 하고자 합니다

1 2 3 4 5
최대 최소 최대 최소
내용 내용 내용 내용 내용
내용 내용 내용 내용 내용

jsgrid의 필드메소드에는 1행밖에 표시하지 못하는것 같은데

2행을 만들어서 병합할 방법이 있을까요?

0 0
로그인 후 추천 또는 비추천하실 수 있습니다.
포인트 2,355
경험치 3,760
[레벨 6] - 진행률 64%
가입일
2016-09-02 15:09:31
서명
미입력
자기소개
미입력

최신글이 없습니다.

최신글이 없습니다.

댓글목록5

이윰MOUNT님의 댓글

profile_image
안녕하세요. ㄷㅊㅎ님
해볼려고 시도는 해 봤는데... jsgrid로는 셀병합하여 표현하는 방법을 찾지 못하였습니다.
혹시라도 방법을 찾으시면 함께 공유 부탁드립니다.^^
감사합니다.

축하합니다. 첫댓글 포인트 31포인트를 획득하였습니다.

ㄷㅊㅎ님의 댓글의 댓글

profile_image
개발문서를 읽기는 했는데 영어를 잘못해서 그런가 전혀 방법을 모르겠더라구요 ㅠㅠ
임시방편으로 제이쿼리 이용해서 dom수정하는식으로 처리했는데 찝찝하네요..

red123님의 댓글의 댓글

profile_image
아니 숨은 용자가 여기 계셨군요.
저는 jsgrid 만지다 포기했건만...

혹 괜찮으시다면 어떻게 사용하시는지
팁이나 방법 공유좀 부탁 드려도 될까요? ^^a

시간이.. 되신다면... 말이죠... ㅎ

ㄷㅊㅎ님의 댓글의 댓글

profile_image
아 말그대로 일단 jsgrid로 테이블을 작성한다음에
셀 합치고자 하는부분을 제이쿼리 이용해서 dom을 수정한거에요..ㅠㅠ
정말 단순히 임시방편...

코드는 아래와 같습니다.

   $("#board-list").jsGrid({
            filtering      : false,
            editing        : false,
            sorting        : false,
            paging         : true,
            autoload       : true,
            controller     : db,
            deleteConfirm  : "정말로 삭제하시겠습니까?\n한번 삭제된 데이터는 복구할수 없습니다.",
            pageButtonCount: 5,
            pageSize       : 15,
            width          : "100%",
            height         : "auto",
            fields         : [
                { name: "체크", type: "text", width: 40 },
                { name: "객실명", type: "text", width: 200 },
                { name: "크기", type: "text", width: 100 },
                { name: "최소", type: "text", width: 100, headercss: "sub" },
                { name: "최대", type: "text", width: 100, headercss: "sub" },
                { name: "주중1", type: "text", width: 100, headercss: "sub" },
                { name: "주말1", type: "text", width: 100, headercss: "sub" },
                { name: "주중2", type: "text", width: 100, headercss: "sub" },
                { name: "주말2", type: "text", width: 100, headercss: "sub" },
                { name: "주중3", type: "text", width: 100, headercss: "sub" },
                { name: "주말3", type: "text", width: 100, headercss: "sub" },
                { name: "특정일", type: "text", width: 100 },
                { name: "관리", type: "text", align: "center", width: 110, headercss: "set-btn-header", css: "set-btn-field" }
            ]
        });
    
        var $chk = $(".jsgrid-table th:first-child");
        if ($chk.text() == '체크') {
            var html = '<label for="chkall" class="checkbox"><input type="checkbox" name="chkall" id="chkall" value="1" onclick="check_all(this.form)"><i></i></label>';
            $chk.html(html);
        }
    
    
        // 테이블 셀병합
        var $row = $(".jsgrid-header-row"); // 병합할 행
        var $sub = $row.find("th").filter(".sub"); // 행에서 하위표시 하고자 하는 셀
        var subHtml = '';
    
        $row.after("<tr class='sub-row jsgrid-header-row'></tr>"); // 병합을 위해 1행 추가
        $row.find("th").not(".sub").attr("rowspan","2"); // 하위요소가 아닌 셀에 rowspan으로 병합
        $row.siblings(".sub-row").append($sub); // 새로 생성된 행으로 하위요소 이동
        $row.find("th").eq(2).after("<th colspan='2'>기준인원</th><th colspan='2'>비수기</th><th colspan='2'>준성수기</th><th colspan='2'>성수기</th>") // 하위요소들을 묶을 상위셀 추가
        
        $.each($sub,function(i){
            $(this).text($(this).text().replace(/[0-9]/g,'')) //jsgrid fileds값의 분간을 위해 사용한 숫자 제거
        })

red123님의 댓글의 댓글

profile_image
대단하시네요 ^^
댓글 보고 저도 적용 한번 해봐야 겠어요!
이윰빌더 시즌4 질문과 답변 게시판입니다.

질문과 답변 게시판에는 가능한 이윰 관리자가 답변을 드리지 않습니다. 회원간 활성화 될수 있도록 도움 부탁드리며, 질문자는 원하는 답변이 달릴경우 꼭 채택하여 주시기 바랍니다.

상품구매 및 유료상품 문의는 1:1문의 게시판을 이용해 주시기 바랍니다.

1:1문의 바로가기 : https://eyoom.net/bbs/qalist.php

전체 1 건 - 1 페이지
사이트 내 전체검색