2016-11-10 9 views
0

다음 기능이있는 검도 UI 드롭 다운 목록이 필요합니다. 선별 확인란검도 UI 멀티 드롭 다운 필터 및 모든 옵션 선택

  1. 멀티 선택 드롭 다운은 한 번에 여러 옵션을 확인합니다.
  2. 모든 체크 박스를 헤더 템플릿으로 선택하십시오.이 템플릿을 클릭하면 모든 은 필터링 된 검색 결과가 선택됩니다.

Required Solution

나는 많은 참조를 통과하고 telrik에서 가까운 해결책을 찾을 수있다. 내 첫 번째 요구 사항이 충족됩니다. 여기에 코드 스 니펫을 첨부했습니다.

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
</head> 

<body> 

    <div id="example" role="application"> 
     <div class="demo-section k-header"> 
      <h2>Invite Attendees</h2> 
      <label for="required">Required</label> 
      <select id="required" multiple="multiple" data-placeholder="Select attendees..."> 
       <option selected>Steven White</option> 
       <option>Nancy King</option> 
       <option>Nancy Davolio</option> 
       <option>Robert Davolio</option> 
       <option>Michael Leverling</option> 
       <option>Andrew Callahan</option> 
       <option>Michael Suyama</option> 
       <option selected>Anne King</option> 
       <option>Laura Peacock</option> 
       <option>Robert Fuller</option> 
       <option>Janet White</option> 
       <option>Nancy Leverling</option> 
       <option>Robert Buchanan</option> 
       <option>Margaret Buchanan</option> 
       <option selected>Andrew Fuller</option> 
       <option>Anne Davolio</option> 
       <option>Andrew Suyama</option> 
       <option>Nige Buchanan</option> 
       <option>Laura Fuller</option> 
      </select> 
     </div> 
     <style> 
      .k-list .k-item {} 

      .k-item input {} 
     </style> 
     <script> 
      $(document).ready(function() { 
       var checkInputs = function (elements) { 
        elements.each(function() { 
         var element = $(this); 
         var input = element.children("input"); 

         input.prop("checked", element.hasClass("k-state-selected")); 
        }); 
       }; 
       // create MultiSelect from select HTML element 
       var required = $("#required").kendoMultiSelect({ 
        itemTemplate: "<input type='checkbox'/> #:data.text#", 
        autoClose: false, 
        dataBound: function() { 
         var items = this.ul.find("li"); 
         setTimeout(function() { 
          checkInputs(items); 
         }); 
        }, 
        change: function() { 
         var items = this.ul.find("li"); 
         checkInputs(items); 
        } 
       }).data("kendoMultiSelect"); 
      }); 
     </script> 
    </div> 
</body> 

</html> 

필터링 된 검색 결과를 선택하는 모든 옵션을 선택하면 어떻게 두 번째 요구 사항을 충족시킬 수 있습니까? 나는 kend ui Multi Select 옵션 자체를 찾고있다. 나는 jQuery 멀티 셀렉트 드롭에 관심이 없다. 도움을 기대하고 있습니다. 미리 감사드립니다.

답변

1

감사 : 이 코드를 사용합니다. 난 당신이 게시 한 코드에서 솔루션을 개발했습니다. 이 코드는 일부 사용자에게 매우 유용 할 수 있으므로이 코드를 공유합니다.

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
    <script> 
     $(document).ready(function() { 



      var data = [{"name":"Afghanistan"},{"name":"Åland Islands"},{"name":"Albania"},{"name":"Algeria"},{"name":"American Samoa"},{"name":"Andorra"},{"name":"Angola"},{"name":"Anguilla"},{"name":"Antarctica"},{"name":"Antigua and Barbuda"},{"name":"Argentina"},{"name":"Armenia"},{"name":"Aruba"},{"name":"Australia"},{"name":"Austria"},{"name":"Azerbaijan"},{"name":"Bahamas"},{"name":"Bahrain"},{"name":"Bangladesh"},{"name":"Barbados"},{"name":"Belarus"},{"name":"Belgium"},{"name":"Belize"},{"name":"Benin"},{"name":"Bermuda"},{"name":"Bhutan"},{"name":"Bolivia"},{"name":"Bonaire"},{"name":"Bosnia and Herzegovina"},{"name":"Botswana"},{"name":"Bouvet Island"},{"name":"Brazil"},{"name":"British Indian Ocean Territory"},{"name":"British Virgin Islands"},{"name":"Brunei"},{"name":"Bulgaria"},{"name":"Burkina Faso"},{"name":"Burundi"},{"name":"Cambodia"},{"name":"Cameroon"},{"name":"Canada"},{"name":"Cape Verde"},{"name":"Cayman Islands"},{"name":"Central African Republic"},{"name":"Chad"},{"name":"Chile"},{"name":"China"},{"name":"Christmas Island"},{"name":"Cocos (Keeling) Islands"},{"name":"Colombia"},{"name":"Comoros"},{"name":"Republic of the Congo"},{"name":"Democratic Republic of the Congo"},{"name":"Cook Islands"},{"name":"Costa Rica"},{"name":"Côte d'Ivoire"},{"name":"Croatia"},{"name":"Cuba"},{"name":"Curaçao"},{"name":"Cyprus"},{"name":"Czech Republic"},{"name":"Denmark"},{"name":"Djibouti"},{"name":"Dominica"},{"name":"Dominican Republic"},{"name":"Ecuador"},{"name":"Egypt"},{"name":"El Salvador"},{"name":"Equatorial Guinea"},{"name":"Eritrea"},{"name":"Estonia"},{"name":"Ethiopia"},{"name":"Falkland Islands"},{"name":"Faroe Islands"},{"name":"Fiji"},{"name":"Finland"},{"name":"France"},{"name":"French Guiana"},{"name":"French Polynesia"},{"name":"French Southern and Antarctic Lands"},{"name":"Gabon"},{"name":"Gambia"},{"name":"Georgia"},{"name":"Germany"},{"name":"Mali"},{"name":"Malta"},{"name":"Marshall Islands"},{"name":"Martinique"},{"name":"Mauritania"},{"name":"Mauritius"},{"name":"Mayotte"},{"name":"Mexico"},{"name":"Micronesia"},{"name":"Moldova"},{"name":"Monaco"},{"name":"Mongolia"},{"name":"Montenegro"},{"name":"Montserrat"},{"name":"Morocco"},{"name":"Mozambique"},{"name":"Myanmar"},{"name":"Namibia"},{"name":"Nauru"},{"name":"Nepal"},{"name":"Netherlands"},{"name":"New Caledonia"},{"name":"New Zealand"},{"name":"Nicaragua"},{"name":"Niger"},{"name":"Nigeria"},{"name":"Niue"},{"name":"Norfolk Island"},{"name":"North Korea"},{"name":"Northern Mariana Islands"},{"name":"Norway"},{"name":"Oman"},{"name":"Pakistan"},{"name":"Palau"},{"name":"Palestine"},{"name":"Panama"},{"name":"Papua New Guinea"},{"name":"Paraguay"},{"name":"Peru"},{"name":"Philippines"},{"name":"Pitcairn Islands"},{"name":"Poland"},{"name":"Portugal"},{"name":"Turks and Caicos Islands"},{"name":"Tuvalu"},{"name":"Uganda"},{"name":"Ukraine"},{"name":"United Arab Emirates"},{"name":"United Kingdom"},{"name":"United States"},{"name":"United States Minor Outlying Islands"},{"name":"United States Virgin Islands"},{"name":"Uruguay"},{"name":"Uzbekistan"},{"name":"Vanuatu"},{"name":"Venezuela"},{"name":"Vietnam"},{"name":"Wallis and Futuna"},{"name":"Western Sahara"},{"name":"Yemen"},{"name":"Zambia"},{"name":"Zimbabwe"}]; 

      var ds = new kendo.data.DataSource({ 
       data: data 
      }); 

      var checkInputs = function (elements) { 
       elements.each(function() { 
        var element = $(this); 
        var input = element.children("input"); 

        input.prop("checked", element.hasClass("k-state-selected")); 
       }); 
      }; 

      $("#items").kendoMultiSelect({ 
       dataValueField: "name", 
       dataTextField: "name", 
       dataSource: ds, 
       dataBound: function() { 
        var items = this.ul.find("li"); 
        setTimeout(function() { 
         checkInputs(items); 
        }); 
       }, 
       itemTemplate: "<input type='checkbox'/> #:data.name#", 
       headerTemplate: "<div><input type='checkbox' id='Header'><label> Select All</label></div>", 
       autoClose: false, 
       change: function() { 
        var items = this.ul.find("li"); 
        checkInputs(items); 
       } 
      }); 

      $('#Header').click(function() { 
       if ($(this).is(':checked')) { 
        $('#items_listbox').find("li").each(function() { 
         $(this).trigger("click"); 
         //$(this).find("input").prop("checked",true); 
        }); 
       } else { 
        $('#items_listbox').find("li").each(function() { 
         $(this).trigger("click"); 
         //$(this).find("input").prop("checked", false); 
        }); 
       } 
      }); 

      $('#containerDiv').keydown(function (e) { 
       $("#Header").attr("checked", false); 
      }); 

     }); 
    </script> 
</head> 

<body> 

    <div id="example" role="application"> 
     Type a country name: 
     <div id="containerDiv"><div id="items"></div></div> 
    </div> 
</body> 

</html> 
1

질문에 대한 이해에 따라 필터링 된 목록에서 선택을 수행하는 별도의 헤더가 필요합니다. 솔루션 Vispan 좋은 일에 대한

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" /> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" /> 

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script> 
</head> 

<body> 

    <div id="example" role="application"> 
     <div class="demo-section k-header"> 
      <h2>Invite Attendees</h2> 
      <label for="required">Required</label> 
      <input type="checkbox" id="Header" value="Header" /> 
      <select id="required" multiple="multiple" data-placeholder="Select attendees..."> 
       <option >Steven White</option> 
       <option>Nancy King</option> 
       <option>Nancy Davolio</option> 
       <option>Robert Davolio</option> 
       <option>Michael Leverling</option> 
       <option>Andrew Callahan</option> 
       <option>Michael Suyama</option> 
       <option >Anne King</option> 
       <option>Laura Peacock</option> 
       <option>Robert Fuller</option> 
       <option>Janet White</option> 
       <option>Nancy Leverling</option> 
       <option>Robert Buchanan</option> 
       <option>Margaret Buchanan</option> 
       <option>Andrew Fuller</option> 
       <option>Anne Davolio</option> 
       <option>Andrew Suyama</option> 
       <option>Nige Buchanan</option> 
       <option>Laura Fuller</option> 
      </select> 
     </div> 
     <style> 
      .k-list .k-item { 
      } 

      .k-item input { 
      } 
     </style> 
     <script> 
      $(document).ready(function() { 
       var checkInputs = function (elements) { 
        elements.each(function() { 
         var element = $(this); 
         var input = element.children("input"); 

         input.prop("checked", element.hasClass("k-state-selected")); 
        }); 
       }; 
       // create MultiSelect from select HTML element 
       var required = $("#required").kendoMultiSelect({ 
        itemTemplate: "<input type='checkbox'/> #:data.text#", 
        autoClose: false, 
        dataBound: function() { 
         var items = this.ul.find("li"); 
         setTimeout(function() { 
          checkInputs(items); 
         }); 
        }, 
        change: function() { 
         var items = this.ul.find("li"); 
         checkInputs(items); 
        } 
       }).data("kendoMultiSelect"); 


       $('#Header').click(function() { 
        if ($(this).is(':checked')) { 
         $('#required_listbox').find("li").each(function() { 
          $(this).trigger("click"); 
          //$(this).find("input").prop("checked",true); 
         }); 
        } 
        else { 
         $('#required_listbox').find("li").each(function() { 
          $(this).trigger("click"); 
          //$(this).find("input").prop("checked", false); 
         }); 
        } 
       }); 
      }); 
     </script> 
    </div> 
</body> 

</html> 
+0

해답을 제공해 주셔서 감사합니다. 이것은 제가 기대했던 것입니다.하지만 모든 선택 확인란은 드롭 다운 목록 안에 있어야합니다. 질문에 이미지를 추가했습니다. 어쨌든 고마워. – Nitheesh

+0

. 귀하가 게시 한 답변에 대한 솔루션 양식을 개발했습니다. – Nitheesh