Slickgrid의 드롭 다운 목록에있는 체크 박스 옵션

Question

맞춤형 Slick.Editor을 사용하여 옵션/드롭 다운 목록에 확인란을 추가하면 어떻게 그리드의 열에있는 클릭 이벤트에 첨부 된 드롭 다운 목록에서 여러 값을 선택할 수 있습니까?

Answer 1

/* 
 
\t Dropdown with Multiple checkbox select with jQuery - May 27, 2013 
 
\t (c) 2013 @ElmahdiMahmoud 
 
\t license: http://www.opensource.org/licenses/mit-license.php 
 
*/ 
 

 
$(".dropdown dt a").on('click', function() { 
 
    $(".dropdown dd ul").slideToggle('fast'); 
 
}); 
 

 
$(".dropdown dd ul li a").on('click', function() { 
 
    $(".dropdown dd ul").hide(); 
 
}); 
 

 
function getSelectedValue(id) { 
 
    return $("#" + id).find("dt a span.value").html(); 
 
} 
 

 
$(document).bind('click', function(e) { 
 
    var $clicked = $(e.target); 
 
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); 
 
}); 
 

 
$('.mutliSelect input[type="checkbox"]').on('click', function() { 
 

 
    var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(), 
 
    title = $(this).val() + ","; 
 

 
    if ($(this).is(':checked')) { 
 
    var html = '<span title="' + title + '">' + title + '</span>'; 
 
    $('.multiSel').append(html); 
 
    $(".hida").hide(); 
 
    } else { 
 
    $('span[title="' + title + '"]').remove(); 
 
    var ret = $(".hida"); 
 
    $('.dropdown dt a').append(ret); 
 

 
    } 
 
});

body { 
 
    font: normal 14px/100% "Andale Mono", AndaleMono, monospace; 
 
    color: #fff; 
 
    padding: 50px; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    background-color: #374954; 
 
} 
 

 
.dropdown { 
 
    position: absolute; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
a { 
 
    color: #fff; 
 
} 
 

 
.dropdown dd, 
 
.dropdown dt { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.dropdown ul { 
 
    margin: -1px 0 0 0; 
 
} 
 

 
.dropdown dd { 
 
    position: relative; 
 
} 
 

 
.dropdown a, 
 
.dropdown a:visited { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    outline: none; 
 
    font-size: 12px; 
 
} 
 

 
.dropdown dt a { 
 
    background-color: #4F6877; 
 
    display: block; 
 
    padding: 8px 20px 5px 10px; 
 
    min-height: 25px; 
 
    line-height: 24px; 
 
    overflow: hidden; 
 
    border: 0; 
 
    width: 272px; 
 
} 
 

 
.dropdown dt a span, 
 
.multiSel span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding: 0 3px 2px 0; 
 
} 
 

 
.dropdown dd ul { 
 
    background-color: #4F6877; 
 
    border: 0; 
 
    color: #fff; 
 
    display: none; 
 
    left: 0px; 
 
    padding: 2px 15px 2px 5px; 
 
    position: absolute; 
 
    top: 2px; 
 
    width: 280px; 
 
    list-style: none; 
 
    height: 100px; 
 
    overflow: auto; 
 
} 
 

 
.dropdown span.value { 
 
    display: none; 
 
} 
 

 
.dropdown dd ul li a { 
 
    padding: 5px; 
 
    display: block; 
 
} 
 

 
.dropdown dd ul li a:hover { 
 
    background-color: #fff; 
 
} 
 

 
button { 
 
    background-color: #6BBE92; 
 
    width: 302px; 
 
    border: 0; 
 
    padding: 10px 0; 
 
    margin: 5px 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl class="dropdown"> 
 
    
 
    <dt> 
 
    <a href="#"> 
 
     <span class="hida">Select</span>  
 
     <p class="multiSel"></p> 
 
    </a> 
 
    </dt> 
 
    
 
    <dd> 
 
     <div class="mutliSelect"> 
 
      <ul> 
 
       <li> 
 
        <input type="checkbox" value="Apple" />Apple</li> 
 
       <li> 
 
        <input type="checkbox" value="Blackberry" />Blackberry</li> 
 
       <li> 
 
        <input type="checkbox" value="HTC" />HTC</li> 
 
       <li> 
 
        <input type="checkbox" value="Sony Ericson" />Sony Ericson</li> 
 
       <li> 
 
        <input type="checkbox" value="Motorola" />Motorola</li> 
 
       <li> 
 
        <input type="checkbox" value="Nokia" />Nokia</li> 
 
      </ul> 
 
     </div> 
 
    </dd> 
 
    <button>Filter</button> 
 
</dl>

당신이

같은 뭔가를 찾고 계십니까