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,只需要将组件代码引到项目中即 ...
随机推荐
- raft共识算法
raft共识算法 分布式一致性问题 如果说,服务器只有一个节点,那么,要保证一致性,没有任何问题,因为所有读写都在一个节点上发生.那如果server端有2个.3个甚至更多节点,要怎么达成一致性呢?下面 ...
- ORACLE数据库管理员的职责
ORACLE数据库管理员的职责 一．概述 ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控: (1). 每天对ORACLE数据库的运行状态,日志文件,备份情况,数据库的空间使用情 ...
- 七月在线爬虫班学习笔记（五）——scrapy spider的几种爬取方式
第五课主要内容有: Scrapy框架结构,组件及工作方式 单页爬取-julyedu.com 拼URL爬取-博客园 循环下页方式爬取-toscrape.com Scrapy项目相关命令-QQ新闻 1.S ...
- styled-components的基本使用
一.官网地址 https://www.styled-components.com/ 二.styled-components 1.styled-components 样式化组件,主要作用是它可以编写实际 ...
- NIO 概述 与 通信实例
NIO 简述: NIO是在jdk1.4之后加入的一种基于缓冲区(buffer)和通道(channel)的I/O方式, nio是同步非阻塞的i/o模式,同步是指线程不断地轮询i/o事件,非阻塞是在处理i ...
- DB9接口定义
注意公头和母头的引脚序号是不一样的.
- Linux中彻底删除Google-Chrome浏览器
sudo apt-get autoremove --purge google-chrome-stable 卸载chrome后, 删除-/.config/google-chrome,重新安装.
- Springboot添加定时任务
请参考这篇文章:https://blog.csdn.net/ysp_0607/article/details/71430281
- linux系统中文件的权限
查看文件权限的语句: 在终端输入:ls -l xxx.xxx (xxx.xxx是文件名) 那么就会出现相类似的信息,主要都是这些:-rw-rw-r-- 一共有10位数 其中: 最前面那个 - 代表的是 ...
- js string类型时间转换成Date类型
方法一: var t = "2015-03-16";var array = t.split("-");var dt = new Date(array[0], ...