메뉴 건너뛰기

xe 확장변수(체크박스)를 체크한 순서대로 값 저장하기

Average Rating:
8.0/10 2명 참여
Rate this page:
익명 (9)   익명 (7)  
평점 한줄평 글쓴이 작성날짜
7
(-42681) 04/22 14:29
9
0 (-50939) 02/02 19:25
캡처.PNG


* 글을 저장할 때, 확장 변수(체크박스)를 순서대로 저장하는 방법입니다.

* 3가지 과정을 거칩니다.


캡처2.PNG


체크박스의 표시 순서대로 체크한 값이 DB에 저장하는 것이 기본입니다.


아래의 코드로 수정하면 체크박스 체크시에 새로운 <ul>에 토글 방식으로 체크 항목이 추가되며 그 순서대로 DB에 저장됩니다.


원리는 아래와 같습니다.


각 input 의 name="extra_vars1[]" 으로 묶여 저장되는데 원래 <li>로 표시된 input 체크박스에서 이 트리거를 제거하였습니다.



1.

xe/classes/extravar/Extravar.class.php

368번째 줄


   // multiple choice
   case 'checkbox' :
    $buff[] = '<ul>';

    //일쌤 체크옵션 span으로 순서대로 추가하여 표시
    $items = $this->_getTypeValue($type, $this->getValueHTML());
    $items_new = array(); //2차원 배열에 value값과 tmp_id임시 번호
    $items_span =''; // span으로 html코드 완성

    foreach($default as $v)
    {
     $checked = '';
     if($value && in_array(trim($v), $value))
     {
      $checked = ' checked="checked"';
     }

     // Temporary ID for labeling
     $tmp_id = $column_name . '-' . $id_num++;

     //$buff[] ='  <li><input type="checkbox"  data-class="'.$column_name.'" class="test" name="' . $column_name . '[]" id="' . $tmp_id . '" value="' . htmlspecialchars($v, ENT_COMPAT | ENT_HTML401, 'UTF-8', false) . '" ' . $checked . ' /><label for="' . $tmp_id . '">' . $v . '</label></li>';
     $buff[] ='  <li><input type="checkbox"  data-class="'.$column_name.'" class="test" id="' . $tmp_id . '" value="' . htmlspecialchars($v, ENT_COMPAT | ENT_HTML401, 'UTF-8', false) . '" ' . $checked . ' /><label for="' . $tmp_id . '">' . $v . '</label></li>';


     //일쌤 체크옵션 span으로 순서대로 추가하여 표시
     foreach($items as $key => $item)
     {
      if($checked && $item == $v) {
       //체크된 항목들의 span형태
       //$items_span.='<span id="item_'.$tmp_id.'" style="margin-right: 10px;">'.$i.'</span>';
       $items_new[$key][0] = $v; //값
       $items_new[$key][1] = $column_name; //extra_var1 변수값 저장의 트리거가 됨, 나중에 name 필드에서 extra_var1[]가 되어야 함
       $items_new[$key][2] = $tmp_id; //임시번호
      }
     }
    }
    
    //일쌤 체크옵션 span으로 순서대로 추가하여 표시
    ksort($items_new); //배열 번호순으로 정렬
    foreach($items_new as $i)
    {
     //$items_span.='<span id="item_'.$i[1].'" style="margin-right: 10px;">'.$i[0].'</span>';
     //$items_span.='<input disabled name="'.$i[1].'[]" id="item_'.$i[2].'" style="margin-right: 10px;" value="'.$i[0].'">';
     $items_span.='<input type="hidden" name="'.$i[1].'[]" id="item_'.$i[2].'" style="margin-right: 10px;" value="'.$i[0].'"><label id="label_'.$i[2].'" for="item_'.$i[2].'">'.$i[0].'</label>';

     
    }
     //$items_span.='<input name="extra_vars1[]" id="item_'.'" style="margin-right: 10px;" value="test">';
    
    //$items_span = print_r($items_new, true);
    $buff[] = '</ul><ul id="newDiv_'.$column_name.'">'.$items_span.'</ul>';
    break;



2.

xe/modules/board/skins/rest_default/js/extra_order.js

파일 새로 작성


jQuery(function($){ //※ jQuery(함수)가 시작된다는 뜻입니다.
        $("input[id*='extra_vars']" ).click(function () {
  //if($("input[name*='extra_vars']" ).prop('checked')==true)(function () {
            //general stuff must happen everytime class is clicked
            //get the className from data- attr
            var className = $(this).data('class');// $(this).attr('name');
   var idName = $(this).attr('id');
   var value = $(this).val();

            //toggling to change color
            $(this).toggleClass(className);//.toggleClass(className + '1');

            //check if its clicked already using data- attribute
            //if ($(this).data("clicked")) {
   if($(this).prop('checked') == true && $("#item_" + idName).length == 0) {
                //new table - note that I've added an id to it indicate where it came from
                //var new_item = '<span id="item_'+idName+'" style="margin-right:10px">'+value+'</span>';
                var new_item = '<input type="hidden" name="'+className+'[]" id="item_'+idName+'" style="margin-right: 10px;" value="'+value+'"><label id="label_'+idName+'" for="item_'+idName+'">'+value+'</label>';

                //append table               
                $("#newDiv_"+className).append(new_item);

            } else {
                //remove it if yes
                $("#newDiv_"+className).find("#item_" + idName).remove();
    $("#newDiv_"+className).find("#label_" + idName).remove();
            }
            //reverse the data of clicked
            $(this).data("clicked", !$(this).data("clicked"));
        });
}); //※ jQuery(함수)가 끝났다는 뜻입니다.


3.

xe/modules/board/skins/rest_default/write_form.html

맨위에 한줄 추가


<load target="js/extra_order.js" />



원본을 잘 챙겨두기 바랍니다.


제목 날짜
Star Rating 별점 위젯 업데이트 정보   2014.03.09
modules/editor/tpl.js/uploader.js  
Zeroclipboard 적용하기   file
    10
xe jQuery 최신버전 사용하기 CDN  
    10
http://www.bootstrapcdn.com/   file
태그 목록