KendoUI 自定义CheckBoxList

不多说直接上代码

CSS完整代码：

     .e-selectboxs-container {
         display: table;
     }

     .e-selectbox {
         min-width: 100px;
         height: 30px;
         margin-top: 5px;
         margin-right: 10px;
         margin-bottom: 5px;
         display: inline-block;
     }

         .e-selectbox input.e-selectbox-input {
             display: none;
             margin: 3px 3px 3px 4px;
             box-sizing: border-box;
             padding:;
         }

             .e-selectbox input.e-selectbox-input + label.e-selectbox-label {
                 position: relative;
                 width: 100%;
                 height: 100%;
                 background-color: #9c9c9c;
                 border-radius: 5px;
                 color: #fdfdfd;
                 text-align: center;
                 cursor: pointer;
                 font-weight: normal;
                 font-size: 14px;
                 line-height: 30px;
             }
             .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label-Level1 {
                 background-color: #FF6666 !important;
             }
            .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label-Level1 {
                 background-color:#FF6666 !important;
             }
             .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label-Level2 {
                 background-color: #FF9933 !important;
             }
            .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label-Level2 {
                 background-color:#FF9933 !important;
             }
             .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label-Level3 {
                 background-color: #FFCC33 !important;
             }
            .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label-Level3 {
                 background-color:#FFCC33 !important;
             }

            .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label {
                 background-color: #607ecb;
             }

             .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label {
                 background-color: #607ecb;
             }

         .e-selectbox label.e-selectbox-label::before {
             content: attr(data-content);
             display: inline-block;
         }

         /*.e-selectbox input.e-selectbox-input:checked + label {
             background-color: #607ecb;
         }*/

     .msglevelitems .e-selectbox label.e-selectbox-label {
         min-width: 240px;
     }

     .e-selectbox .top-left-symbol {
         display: inline-block !important;
         position: absolute;
         top: 0px;
         left: 0px;
         float: left;
         margin-bottom: 0px;
         z-index:;
         font-size: 17px;
         min-width: 10px;
         height: 30px;
         background-color: #9c9c9c;
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
     }

     .e-selectbox .top-right-symbol {
         display: inline-block !important;
         border-top: 30px solid #777;
         border-left: 30px solid rgba(255,255,255,0);
         position: absolute;
         top: 0px;
         right: 0px;
         float: right;
         margin-bottom: -40px;
         z-index:;
     }

     .e-selectbox .bottom-right-symbol {
         display: inline-block !important;
         border-bottom: 30px solid #777;
         border-left: 30px solid rgba(255,255,255,0);
         position: absolute;
         bottom: 0px;
         right: 0px;
         float: right;
         z-index:;
     }

     .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label .top-right-symbol {
         border-top: 21px solid #5246e2 !important;
     }

     .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label .bottom-right-symbol {
         border-bottom: 21px solid #5246e2 !important;
     }

     .e-selectbox input.e-selectbox-input:checked + label.e-selectbox-label .top-left-symbol {
         background-color: #607ecb !important;
     }

     .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .top-right-symbol {
         border-top: 21px solid #5246e2 !important;
     }

     .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .bottom-right-symbol {
         border-bottom: 21px solid #5246e2 !important;
     }

     .e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .top-left-symbol {
         background-color: #607ecb !important;
     }

     .e-selectbox .top-right-symbol-content :hover {
         font-size: 20px;
     }

     .bottom-right-symbol[hasselect="1"] {
         border-bottom: 21px solid #5246e2 !important;
     }

         .bottom-right-symbol[hasselect="1"] + span.top-right-symbol {
             border-top: 21px solid #5246e2 !important;
         }

             .bottom-right-symbol[hasselect="1"] + span.top-right-symbol + span.top-left-symbol {
                 background-color: #5246e2 !important;
             }
     /*.e-selectbox input.e-selectbox-input:hover + label.e-selectbox-label .bottom-right-symbol {
         border-bottom: 21px solid #5246e2 !important;
     }*/
     .e-selectbox .bottom-right-symbol-content :hover {
         font-size: 20px;
     }

     .e-selectbox .top-right-symbol-content {
         display: inline-block !important;
         width: 15px;
         height: 15px;
         position: absolute;
         top: 0px;
         right: 0px;
         float: right;
         margin-top: -8px;
         z-index:;
         font-size: 12px;
         color: #eee;
     }

     .e-selectbox .bottom-right-symbol-content {
         display: inline-block !important;
         width: 15px;
         height: 15px;
         position: absolute;
         bottom: 0px;
         right: 0px;
         float: right;
         z-index:;
         font-size: 12px;
         color: #eee;
         margin-bottom: 6px;
     }

自定义组件JS代码：

 (function () {
     var kendo = window.kendo,
         ui = kendo.ui,
         Widget = ui.Widget,
         CHANGE = "change";

     var ESelectBoxs = Widget.extend({
         init: function (element, options) {
             var that = this;
             kendo.ui.Widget.fn.init.call(that, element, options);
             $(element).addClass('e-selectboxs-container');
             that._dataSource();
             that._userdialogBind();
         },
         options: {
             name: "ESelectBoxs",
             inputType: "checkbox",
             dataTextField: "",
             dataValueField: "",
             selectedFunc: function (datas) {
             },
             selectBoxCss:"",
             boxName:'selectBoxName',
             autoBind: true,
             template: "",
             value: null,
             drawTile: function (container) {
             },
             lableClick: function (dom,data,target) {
             }
         },
         value: function (value) {
             var that = this;
             if (value === undefined) {
                 return that._value;
             }
             that._update(value);
             that._old = that._value;
         },
         refresh: function () {
             var that = this,
                 view = that.dataSource.view();
             that.element.html("");
             $.each(view, function (i, item) {
                 that.element.append(that._drawOrg(item,i));
             })
             ;
         },
         draw: function () {
             var that = this;

         },
         setData: function (data) {
             var that = this;
             that.dataSource = kendo.data.DataSource.create(data);
             that.dataSource.read();
             that.refresh();
         },
         _dataSource: function () {
             var that = this;
             that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
             that.dataSource.bind(CHANGE, function () {
                 that.refresh();
             });
             if (that.options.autoBind) {
                 that.dataSource.fetch();
             }
         },
         _drawOrg: function (item,index) {
             var that = this;
             var container = $('<div class="e-selectbox" data-id="' + (that.options.dataValueField ? item[that.options.dataValueField] : index) +'"></div>');
             container.data("item", item);
             var id = that.options.boxName + ( that.options.dataValueField ? item[that.options.dataValueField] : index);
             var cont = '<input class="e-selectbox-input" type="' + that.options.inputType + '" id="' + id + '" name="' + that.options.boxName + '" />\
                 <label class="e-selectbox-label ' + (typeof(that.options.selectBoxCss)=="function"?that.options.selectBoxCss(item, index) :  that.options.selectBoxCss) + '" for= "' + id + '" data-content= "' + item[that.options.dataTextField] + '"></label>';
             container.html(cont);
             that.options.drawTile(container);
             return container;
         },
         _userdialogBind: function () {
             var that = this;
             $(that.element).on("click", '.e-selectbox', function (e) {
                 var dataitem = $(this).data("item");
                 var domcontainer = $(this);
                 if ($(e.target).hasClass('e-selectbox-label')) {
                     that.options.lableClick(domcontainer, dataitem, e.target);
                 } else if ($(e.target).hasClass('e-selectbox-input')) {

                 }
                 else {
                     e.cancelBubble = true;
                     e.stopPropagation();
                     return false
                 }
             });
         }
     });
     kendo.ui.plugin(ESelectBoxs);
 })(jQuery);

组件使用：

 $(_ViewName + " .msglevel").kendoESelectBoxs({
                         dataSource:d.Data,
                         inputType: "radio",
                         dataTextField: "LevelName",
                         dataValueField: "Level",
                         selectedFunc: function (datas) {
                         },

                         selectBoxCss: function(item,index){
                             switch(item.Level){
                                 case 1:return "e-selectbox-label-Level1";
                                     break;
                                 case 2:return "e-selectbox-label-Level2";
                                     break;
                                 case 3:return "e-selectbox-label-Level3";
                                     break;
                                 case 4:return "";
                                     break;
                             }
                         },
                         boxName: 'msglevel',
                         autoBind: true,
                         template: "",
                         value: null,
                         drawTile: function (container) {
                         },
                         lableClick: function (dom, data, target) {
                             $(_ViewName + ' .msglevelitemsdiv').show();
                             $(_ViewName + " .msglevelitems").kendoESelectBoxs({
                                 dataSource: data.Items,
                                 inputType: "radio",
                                 dataTextField: "EventName",
                                 dataValueField: "ID",
                                 selectedFunc: function (datas) {
                                 },
                                 selectBoxCss: function(item,index){
                                     switch(item.Level){
                                         case 1:return "e-selectbox-label-Level1";
                                             break;
                                         case 2:return "e-selectbox-label-Level2";
                                             break;
                                         case 3:return "e-selectbox-label-Level3";
                                             break;
                                         case 4:return "";
                                             break;
                                     }
                                 },
                                 boxName: 'msglevelitems',
                                 autoBind: true,
                                 template: "",
                                 value: null,
                                 drawTile: function (container) {
                                     var data = $(container).data("item");
                                     $(container).data('Category',data.Category);
                                 },
                                 lableClick: function (dom, data, target) {
                                     $.each(EmergencyEventUserLimit,function(i,val){
                                         var EventData= $('label[data-content='+val.DepartMent+']').parent().data('item');
                                         if(EventData!=null){
                                             EventData.SelcetedCount= 0;
                                             $('label[data-content='+val.DepartMent+']').parent().data('item',EventData);
                                             $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol').attr("hasselect", 0);
                                             $('label[data-content='+val.DepartMent+']').parent().find('input[name^="Departments"]').prop("checked", false);
                                             $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol-content').text(EventData.SelcetedCount);
                                             if(val.Event==data.EventName){//当前事件该部门全选中人
                                                 var EventData= $('label[data-content='+val.DepartMent+']').parent().data('item');
                                                 EventData.SelcetedCount= EventData.AllUserCount;
                                                 $('label[data-content='+val.DepartMent+']').parent().data('item',EventData);
                                                 $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol').attr("hasselect", 1);
                                                 $('label[data-content='+val.DepartMent+']').parent().find('input[name^="Departments"]').prop("checked", true);
                                                 $('label[data-content='+val.DepartMent+']').parent().find('.bottom-right-symbol-content').text(EventData.SelcetedCount);
                                             }}

                                     });
                                     _calcSelectedUser();
                                 }
                             }).data("kendoESelectBoxs");
                             _setMsgTemplate(data.Level);
                             _setCheckedUser(data.Level);
                         }
                     }).data("kendoESelectBoxs");

代码实现效果：