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");
代码实现效果：
KendoUI 自定义CheckBoxList的更多相关文章
- KendoUI 自定义验证：
Html: <label>@LogicNameAttribute.GetLogicName(typeof(Reward).GetProperty("ExtraRewardMone ...
- Yii提供的Htmler助手checkboxList可自定义Checkbox输出格式
foreach($catetags as $cate){ echo Html::checkboxList('category_id','',$cate,['item'=>'customCheck ...
- KendoUI系列：Window
1.基本使用 <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css") ...
- CheckBoxList控件
主要介绍:自定义数据.绑定数据库数据.全选,取消全选. 这种方法是绑定已经给定(自定义)的字段(这种方法是绑定给定的值,就是在编写控件时给Text赋的值): 前台代码: <asp:CheckBo ...
- JAVAEE——struts2_04：自定义拦截器、struts2标签、登陆功能和校验登陆拦截器的实现
一.自定义拦截器 1.架构 2.拦截器创建 //拦截器:第一种创建方式 //拦截器生命周期:随项目的启动而创建,随项目关闭而销毁 public class MyInterceptor implemen ...
- [ SSH框架 ] Struts2框架学习之四（自定义拦截器）
一.Struts2的拦截器 1.1 拦截器概述 拦截器,在AOP( Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截 ...
- KendoUi 学习笔记(二) Grid
Kendo.ui.Grid Kendo Ui Grid控件,继承至Widget. 一.构造 allowCopy Boolen|Object (默认:false) 当他设置true, ...
- KendoUi 学习笔记一
本系列主要是记录KendoUI的学习过程. KendoUi的特点有以下特点: 1. 70+UI控件 控件有DataGrids,DropDowns,Menus和Buttons,还有一些商业的控件,比如C ...
- 开发kendo-ui弹窗组件
摘要: kendo-ui中只是提供了windwo插件,并没有提供页内弹窗插件.现在分享项目中自己定制的基于window组件的弹窗插件,如果你的项目也是用的kendo-ui,只需要将组件代码引到项目中即 ...
随机推荐
- Data assimilation
REF: https://en.wikipedia.org/wiki/Data_assimilation Data assimilation is the process by which obser ...
- 修改AD中PCB各层的透明度
1.采用的Altium designer 版本为AD16: 2.进入PCB编辑页面,快捷键Ctrl+D,进入视图配置: 3.选择“透明度”,设置选中的层.对象所需的透明度:(横向可以连续选择多个对象, ...
- EFCore Owned Entity Types，彩蛋乎？鸡肋乎？之鸡肋篇
鸡肋 鸡肋(Chicken ribs),现代汉语词语,出自<三国志·魏书·武帝纪>裴松之注引<九州春秋>曰:"夫鸡肋,弃之如可惜,食之无所得,以比汉中,知王欲还也.& ...
- 在eclispe上git 代码滚回
1.项目 - 鼠标右键 - team - show in history: 2.history窗口 - 选择需要回滚到的版本 - reset - hard:3.项目 - 鼠标右键 - team - p ...
- 运维架构之httpd
Web Service 传输层:提供进程地址 Port number tcp:传输控制协议,面向连接,通信前需建立虚拟链路,结束后拆除:0-65535 udp:用户数据报协议,无连接:0-65535 ...
- python中对文件、文件夹，目录的基本操作
一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...
- 常用的数组函数-S
header('content-type:text/html;charset=utf-8'); //声明一个数组 $arr=['one'=>'aaa','two'=>'bbb','thre ...
- 解决linux root 认证失败的问题
https://jingyan.baidu.com/article/3052f5a1f1b17c97f31f8688.html
- 刚下了VS2010不会用，求大神指点迷津
刚下了VS2010不会用,求大神指点迷津 [菌菌][C语言MOOC]第七周计算分数精确值(10分) thinkphp3.1Calltoamemberfunctionget()onnull java提示 ...
- 单例模式 | 程序员都想要探索的 Javascript 设计模式
最近打算系统的学习 Javascript 设计模式,以便自己在开发中遇到问题可以按照设计模式提供的思路进行封装,这样可以提高开发效率并且可以预先规避很多未知的问题. 先从最基本的单例模式开始 什么是单 ...