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,只需要将组件代码引到项目中即 ...
随机推荐
- java类的理解和相关问题
---java抽象类 当我们定义的对象无法抽象或者不适合抽象为一个具体的类的时候 我们通常定义其为一个抽象类 like 衣服 (多种衣服) 手机 (多种手机) ---接口和抽象类的异同 对于概念上来说 ...
- 洛谷P1993 小K的农场
思路是差分约束+dfs版SPFA. 首先来思考差分约束的过程,将题目给出的式子进行转化: 农场a比农场b至少多种植了c个单位的作物, SPFA我们考虑跑最短路,那么要让SPFA中满足的式子就是if(d ...
- 【js高程学习笔记】Object类型
创建一组Object的实例的方式有两种: 方法一: var person = new Object(); person.name = '团子'; person.race = '猫'; person.s ...
- Linux内核数据结构之kfifo详解
本文分析的原代码版本: 2.6.24.4 kfifo的定义文件: kernel/kfifo.c kfifo的头文件: include/linux/kfifo.h kfifo是内核里面的一个First ...
- ansible-play中role的基本用法
#role应用 #roles跟调用角色的剧本文件应该与roles同级关系,即放在ansible目录下 #makir /root/ansible/roles/{nginx,http,ftp,mysql, ...
- Excel--------实用功能(数据对比)
--excel数据在sql中查询展示出来 SELECT * FROM (SELECT '101001' as code ,'上海宝山站' as name union allSELECT '102083 ...
- Problem A: STL——灵活的线性表
Description 数组和链表是我们熟知的两种线性结构,但是它们不够灵活(不能同时实现直接插入.删除和访问操作),给你若干种操作,你能通过一种灵活的容器,实现它们的功能吗? 操作1:Build a ...
- selenium中的上传文件
# 上传文件driver.find_element_by_xpath("//input[@value='上传文件']").send_keys(r"C:\Users\YKD ...
- bottle.py中的SimpleTemplate
import re class SimpleTemplate(object): re_block = re.compile(r'^\s*%\s*((if|elif|else|try|except|fi ...
- docker info 警告"WARNING: No swap limit support"
vim/etc/default/grub 找到 GRUB_CMDLINE_LINUX="" 在双引号里面输入cgroup_enable=memory swapaccount=1 然 ...