On this page

listRender

기본


  • HTML (기본과 동일할 경우 이하 생략) 

        <div id="ex_tb1">
    </div>

  • JS code 

    var options = {
'url' : 'data/list.json',
'class' : "table",
'columns' :  [
        {
            key: "startNo",
            text :"#",
            class : "no",
        },
        {
            key: "first",
            text:"First"
        },
        {
            key: "last",
            text:"Last"
        },
        {
            key: "handle",
            text:"Handle",
        }
    ],
};
$("#ex_tb1").listRender(options);

  • 결과

탬플릿


  • JS code 

    var options = {
'url' : 'data/list.json',
'class' : "table",
'columns' :  [
        {
            key: "startNo",
            text :"#",
            class : "no",
        },
        {
            key: "first",
            text:"First"
        },
        {
            key: "last",
            text:"Last"
        },
        {
            key: "handle",
            text_templet : "@{handle}",
            text:"Handle",
        }
    ],
};
$("#ex_tb1").listRender(options);

  • 결과

페이징


  • HTML Paging 영역 추가 

    <div id="ex_tb3">
</div>
<div id="pagination">
</div>

  • JS code 

    var options = {
'url' : 'data/listpg.json',
'class' : "table",
'columns' :  [
        {
            key: "startNo",
            text :"#",
            class : "no",
        },
        {
            key: "first",
            text:"First"
        },
        {
            key: "last",
            text:"Last"
        },
        {
            key: "handle",
            text_templet : "@{handle}",
            text:"Handle",
        }
    ],
};
$("#ex_tb3").listRender(options);

  • 결과

페이징 2


  • HTML Paging 영역 추가 

    <div id="ex_tb4">
</div>
<div id="pagination2">
</div>

  • JS code 

    var options = {
'url' : 'data/listpg.json',
'class' : "table",
'paging' : {
    'target' : '#pagination2',
    'style' : 'spread'
},
'columns' :  [
        {
            key: "startNo",
            text :"#",
            class : "no",
        },
        {
            key: "first",
            text:"First"
        },
        {
            key: "last",
            text:"Last"
        },
        {
            key: "handle",
            text_templet : "@{handle}",
            text:"Handle",
        }
    ],
};
$("#ex_tb4").listRender(options);

  • 결과


  • HTML 검색 Form 추가 

    <form id="search_frm">
   <input type="text" name="keyword"/>
   <button type="button" id="searchBtn">검색</button>
</form>

  • JS Code 

    var options = {
'url' : 'data/listpg.json',
'class' : "table",
'columns' :  [
        {
            key: "startNo",
            text :"#",
            class : "no",
        },
        {
            key: "first",
            text:"First"
        },
        {
            key: "last",
            text:"Last"
        },
        {
            key: "handle",
            text_templet : "@{handle}",
            text:"Handle",
        }
    ],
'searchFrm' : "#search_frm",
'searchBtn' : "#searchBtn"
};
$("#ex_tb3").listRender(options);

  • Parameter Result

    • Before : startPage=1&recordCount=10 (searchFrm , searchBtn 옵션 적용전)
    • After : startPage=1&recordCount=10&keyword=검색어 (searchFrm , searchBtn 옵션 적용전)

  • 주의사항

    searchBtn 옵션을 지정하지 않을경우 리스트에 검색값이 정상적으로 전달되지 않는다.

    하여 searchFrm 을 지정시에 필수로 searchBtn 지정 필요

내장 함수 접근


  • JS Code 

    var options = {
'url' : 'data/listpg.json',
'class' : "table",
'columns' :  [
        {
            key: "startNo",
            text :"#",
            class : "no",
        },
        {
            key: "first",
            text:"First"
        },
        {
            key: "last",
            text:"Last"
        },
        {
            key: "handle",
            text_templet : "@{handle}",
            text:"Handle",
        }
    ],
'searchFrm' : "#search_frm",
'searchBtn' : "#searchBtn"
};
var listRender = $("#ex_tb3").listRender(options);
console.log("searchParam",listRender.searchParam);
console.log("requestResult",listRender.requestResult);

  • Result

    • searchParam 현재 리스트 호출시 파라미터값 호출

      {startPage: 1, recordCount: 10}

    • requestResult 입력된 URL 의 Response 값 호출

      { "result": { "list": [ { "first": "경환", "last": "성", "handle": "softleaf", "startNo": 20 }, { "first": "병일", "last": "이", "handle": "hslbi", "startNo": 19 }, { "first": "현철", "last": "박", "handle": "hc.park", "startNo": 18 }, { "first": "만석", "last": "김", "handle": "manpro", "startNo": 17 }, { "first": "화진", "last": "진", "handle": "wichkki", "startNo": 16 }, { "first": "경아", "last": "진", "handle": "ka.jin", "startNo": 15 }, { "first": "미진", "last": "정", "handle": "mj.jung", "startNo": 14 }, { "first": "한욱", "last": "함", "handle": "hamakun", "startNo": 13 }, { "first": "상웅", "last": "이", "handle": "sw.lee", "startNo": 12 }, { "first": "민규", "last": "차", "handle": "mk.cha", "startNo": 11 } ], "totalCount": 20 } }

detailRender

EDIT MODE DETAIL MODE ADD MODE

기본


  • HTML (기본과 동일할 경우 이하 생략) 

    <form name="edit_frm" id="edit_frm" method="post">
    <input type="hidden" name="idx" value="0">
    <table>
        <tr>
           <th>일반</th>
           <td><input type="text" name="subject"></td>
        </tr>
        <tr>
           <th>숫자</th>
           <td><input type="number" name="number"></td>
        </tr>
        <tr>
            <th>셀렉트 박스</th>
            <td><select name="select_test"></select></td>
        </tr>
        <tr>
            <th>체크 박스</th>
            <td>
                <label>check1 <input type="checkbox" name="check1" value="Y"></label>
            </td>
        </tr>
        <tr>
            <th>텍스트 아레아</th>
            <td><textarea name="contents" maxlength="300"></textarea></td>
        </tr>
        <tr>
            <th>텍스트 템플릿</th>
            <td id='text_sample'></td>
        </tr>
    </table>
</form>

  • JS code 

    var options = {
'url' : 'data/detail.json',
'mode' : 'edit', //'edit','detail','add'
'columns' :  [
        {
            name: "select_test",
            data: [
                    {'idx':'' , 'text': '선택없음'},
                    {'idx':1 , 'text': '1_text'},
                    {'idx':2 , 'text': '2_text'},
                    {'idx':3 , 'text': '3_text'},
                  ],
        },
        {
            id:"text_temp",
            viewmode: true,
            text_templet: "{time} / {user_name}",
        }
    ]
};
$("#edit_frm").detailRender(options);

  • 결과

    제목
    숫자
    셀렉트박스
    체크박스
    내용
    텍스트 템플릿

커스텀 셀렉트


  • HTML SELECT BOX 커스텀 

    <link href="custom.select.css" rel="stylesheet">
<div class="custom-select">
  <select name="select_test" class="select"></select>
  <button type="button" class="select-selected">선택하기</button>
</div>

  • JS code 

        var options2 = {
        'url' : 'data/detail.json',
        'mode' : 'edit',  //'edit','detail','add'
        'customSelect' : true,
        'columns' :  [
            {
                name: "select_test",
                data: [
                    {'idx':'' , 'text': '선택없음'},
                    {'idx':1 , 'text': '1_text'},
                    {'idx':2 , 'text': '2_text'},
                    {'idx':3 , 'text': '3_text'},
                ],
            }
        ]
    };
    $("#edit_frm2").detailRender(options2);

  • 결과

    셀렉트박스

배열


  • HTML 검색 Form 추가 

    <tr>
    <th>배열</th>
    <td id="array_zone">
        <div class="array_row">
            <input type="text" name="url[]">
            <input type="text" name="option[]">
            <button type="button" class="add_btn" data-target="array_zone">추가</button>
            <button type="button" class="remove_btn" data-target="array_zone">삭제</button>
        </div>
    </td>
</tr>

  • JS Code 

    var options3 = {
        'url' : 'data/detail.json',
        'mode' : 'edit', //'edit','detail','add'
        'columns' :  [
            {
                id:"array_zone",                  //리스트 를 노출할 대상 id 로 고정 name 사용 불가
                key : "array_data",              //데이터 키
                is_array : true,                    //불러오는 데이터및 노출 데이터가 array일 경우
                row_target : ".array_row",                //복사 주체가 되는 원본 클래스 대상의 하위에 존재 해야 함
                add_class : "add_btn",                  //추가 버튼 클래스 추가버튼의 경우 최상위에만    * 버튼에 대한 기능은 플러그인에서 지정하지 않는다. 노출 여부만 설정
                remove_class : "remove_btn",            //삭제 버튼 클래스 복사되는 열에 존재
                colums : [
                    {name : "url[]" , type : "link"},          //하위 리스트에서 데이터를 노출할 input name  하위 리스트의 경우 input 무조건 배열 형식의 이름 작성 필요
                    {name : "option[]"}        //id 대상 지정은 지원하지 않는다.
                ],
            }
        ]
    };
var detailRender = $("#edit_frm3").detailRender(options3);

  • 결과

    배열

내장 함수 접근


  • JS Code 

    console.log("detailRender",detailRender.requestResult);

  • Result

  • requestResult 입력된 URL 의 Response 값 호출

    { "result": { "idx": 70, "select_test": 5, "check1": "Y", "subject": "제목", "contents": "TEXTAREA 내용 입니다", "just_text" : "단순 문자열", "number": 10000, "time": "2024-08-28 11:04:38", "user_name": "SoftLeaf", "array_data": [ { "url": "exam_arr1", "option" : "op1" }, { "url": "exam_arr2", "option" : "op2" } ] } }