- 浏览: 498704 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
//allFlag,是否有全选
//elementId,
//dataList,[{id:3,showValue:'test3'},{id:4,showValue:'test4'}];
function makeCheckBox(allFlag, elementId, dataList) {
var html = "";
if (allFlag) {
html = html + "<input id='checkBox_all_" + elementId + "' type='checkbox' class='group_" + elementId + "' value='0' checkType='0'>";
html = html + "<label for='checkBox_all_" + elementId + "' >全部</label>";
}
$.each(dataList, function (i) {
html = html + "<input id='" + elementId + '_' + dataList[i].id + "' type='checkbox' class='group_" + elementId + "' value='" + dataList[i].id + "' checkType='1'>";
html = html + "<label for='" + elementId + '_' + dataList[i].id + "'>" + dataList[i].showValue + "</label>";
});
$('#' + elementId).html(html);
//全选处理
$('#' + elementId + ' input[checkType=0]').on("click", function () {
var id = $(this).attr('id');
var className = $(this).attr('class');
if ($('#' + id).is(':checked')) {
$('input[class=' + className + ']').prop("checked", true);
} else {
$('input[class=' + className + ']').prop("checked", false);
}
});
//各选项处理
$('#' + elementId + ' input[checkType=1]').on('click', function () {
var className = $(this).attr('class');
var len1 = $('input[class=' + className + ']' + '[checkType=1]').length;
var len2 = $('input[class=' + className + ']' + '[checkType=1]:checked').length;
if (len1 == len2) {
$('input[class=' + className + ']' + '[checkType=0]').prop("checked", true);
} else {
$('input[class=' + className + ']' + '[checkType=0]').prop("checked", false);
}
});
}
function setCheckBoxByIdList(elementId, idList) {
var len = idList.length;
$('#' + elementId + ' input[class=group_' + elementId + ']').prop("checked", false);
if (len == 0) {
return;
}
for (var i = 0; i < len; i++) {
$('#' + elementId + ' input[class=group_' + elementId + ']' + '[value=' + idList[i] + ']').prop("checked", true);
}
var len1 = $('#' + elementId + ' input[class=group_' + elementId + ']' + '[checkType=1]').length;
var len2 = $('#' + elementId + ' input[class=group_' + elementId + ']' + '[checkType=1]:checked').length;
if (len1 == len2) {
$('#' + elementId + ' input[class=group_' + elementId + ']' + '[checkType=0]').prop("checked", true);
} else {
$('#' + elementId + ' input[class=group_' + elementId + ']' + '[checkType=0]').prop("checked", false);
}
}
function setCheckBoxByIdsString(elementId, idsString) {
if (!idsString) {
console.error("idsString = " + idsString + ",不符合要求(idsString='1,2,3,4...)'");
return;
}
if (idsString == '') {
$('#' + elementId + ' input[class=group_' + elementId + ']').prop("checked", false);
return;
}
var idList = idsString.split(',');
setCheckBoxByIdList(elementId, idList);
}
function getCheckBoxDataList(allFlag, elementId) {
var dataList = [];
if (allFlag) {
$('#' + elementId + ' input[class=group_' + elementId + ']' + ':checked').each(function () {
var data = {};
var showValue = $(this).next("label").text();
var id = $(this).val();
data.id = id;
data.showValue = showValue;
dataList.push(data);
});
} else {
$('#' + elementId + ' input[class=group_' + elementId + ']' + '[checkType=1]:checked').each(function () {
var data = {};
var showValue = $(this).next("label").text();
var id = $(this).val();
data.id = id;
data.showValue = showValue;
dataList.push(data);
});
}
return dataList;
}
function getCheckBoxShowValueList(allFlag, elementId) {
var dataList = [];
if (allFlag) {
$('#' + elementId + ' input[class=group_' + elementId + ']' + ':checked').each(function () {
var showValue = $(this).next("label").text();
dataList.push(showValue);
});
} else {
$('#' + elementId + ' input[class=group_' + elementId + ']' + '[checkType=1]:checked').each(function () {
var showValue = $(this).next("label").text();
dataList.push(showValue);
});
}
return dataList;
}
function getCheckBoxIdList(allFlag, elementId) {
var dataList = [];
if (allFlag) {
$('#' + elementId + ' input[class=group_' + elementId + ']' + ':checked').each(function () {
var id = $(this).val();
dataList.push(id);
});
} else {
$('#' + elementId + ' input[class=group_' + elementId + ']' + '[checkType=1]:checked').each(function () {
var id = $(this).val();
dataList.push(id);
});
}
return dataList;
}
function getCheckBoxShowValueString(allFlag, elementId) {
var dataList = getCheckBoxShowValueList(allFlag, elementId);
var dataString = dataList.join(',');
return dataString;
}
function getCheckBoxIdString(allFlag, elementId) {
var dataList = getCheckBoxIdList(allFlag, elementId);
var dataString = dataList.join(',');
return dataString;
}
///*
// * 修改页面,获取checkBox列表 @param elementId 所在div的ID @param basicCode 基础数据编码 @param
// * name checkBox 名称 @param isall ture 加载"全部"选项 @param checkedId 被选中的复选框id
// * 用来判断修改页面初始化的时候要不要被选中
// *
// * input自定义属性:checkType 0(全部) 1(子类复选框) @returns
// */
//function getEditCheckBox(isall,elementId,basicCode,name,checkedId){
// getCheckBox(isall,elementId,basicCode,name);
// var data = checkedId.split(',');
// setTimeout(function(){
// for(var i = 0;i<data.length;i++){
// $('#'+elementId+' input[value='+data[i]+']').prop("checked",true);
// };
// },1000)
//
//}
//
///*
// * 获取单选复选框被选择的id @param elementClass input的class return idStr "XX,XX,XX"
// * id拼起来的字符串
// *
// * @returns
// */
//function getCheckedId(elementClass){
// var elementCls=$("input[class='"+elementClass+"']:checked");
// var elementLen = elementCls.length;
// var idStr = "";
// elementCls.each(function(i){
// idStr = idStr+$(this).val();
// if(i!=elementLen-1){
// idStr = idStr+",";
// }
// });
// return idStr;
//}
//
///*
// * 获取单选复选框被选择的id @param elementClass input的class return idStr "XX,XX,XX"
// * id拼起来的字符串
// *
// * @returns
// */
//function getCheckedName(elementClass){
// var elementCls=$("input[class='"+elementClass+"']:checked");
// var elementLen = elementCls.length;
// var idStr = "";
// elementCls.each(function(i){
// idStr = idStr+$(this).next("label").text();
// if(i!=elementLen-1){
// idStr = idStr+",";
// }
// });
// return idStr;
//}
//
//
//function setCheckedByIds(elementId,checkedId){
// var data = checkedId.split(',');
//
// $('#'+elementId+' input').prop("checked",false);
//
// for(var i = 0;i<data.length;i++){
// $('#'+elementId+' input[value='+data[i]+']').prop("checked",true);
// }
//
// var len = $('#'+elementId).closest('li').find('input[checktype=1]').length;
// var checkedLen = $('#'+elementId).closest('li').find('input[checktype=1]:checked').length;
// if(len == checkedLen ){
// $('#'+elementId).closest('div').find('input[checktype=0]').prop("checked",true);
// }else{
// $('#'+elementId).closest('div').find('input[checktype=0]').prop("checked",false);
// }
//
//}
//
//
///*
// * 获取单选复选框被选择的Data @param elementClass input的class return idStr "XX,XX,XX"
// * id拼起来的字符串
// *
// * @returns
// */
//function getCheckedData(elementClass){
// var dataTemp = [];
// var elementCls=$("input[class='"+elementClass+"']");
// // var elementLen = elementCls.length;
// // var idStr = "";
// elementCls.each(function(i){
// dataTemp.push({value:$(this).val(),
// labelText:$(this).next("label").text()
// })
// });
// return dataTemp;
//}
//
///*
// * 添加页面:圆形的单选框初始化
// *
// * param:b 0:不带<b> 1:带<b> b是用来放颜色块的
// *
// */
//function getRadio(divId,basicCode,name,b){
// $.ajax({
// type : 'post',
// url : '/basicData/detailListByBasicCode',
// dataType : "json",
// data : {basicCode:basicCode},
// success: function(result){
// var html="";
// if(b){
// $.each(result,function(i){
// html=html+"<input id='"+result[i].detailCode+"' type='radio' name='"+name+"' value='"+result[i].id+"' >";
// html=html+"<label for='"+result[i].detailCode+"' ><b></b>"+result[i].detailName+"</label>";
// });
// }else{
// $.each(result,function(i){
// html=html+"<input id='"+result[i].detailCode+"' type='radio' name='"+name+"' value='"+result[i].id+"' >";
// html=html+"<label for='"+result[i].detailCode+"' >"+result[i].detailName+"</label>";
// });
// }
//
// $('#'+divId).html(html);
// }
// });
//};
//
//
///*
// * 修改页面:圆形的单选框初始化
// *
// * param:b 0:不带<b> 1:带<b> b是用来放颜色块的 param:elementId 所在div id @param checkedId
// * 被选中的复选框id 用来判断修改页面初始化的时候要不要被选中
// *
// */
//function getEditRadio(elementId,basicCode,name,b,checkedId){
// getRadio(elementId,basicCode,name,b);
// setTimeout(function(){
// $('#'+elementId+' input[value='+checkedId+']').prop("checked",true);
// },1000);
//}
//
//function setRadioByIds(elementId,checkedId){
// $('#'+elementId+' input[value='+checkedId+']').prop("checked",true);
//}
//
///*
// * "全部"的状态 1.选全部 其他全被选中 2.取消全部 其他input被取消 3.其他全部被选中 "全部"的状态被选中 4.其他有一个没被选中
// * "全部"的状态为未被选中 @param id @param name @returns
// */
//function checkstatus(id,name){
// console.log(name)
// if($('#'+id).is(':checked')) {
// $("input[class='"+name+"']").prop("checked",true);
// }else{
// console.log("false");
// $("input[class='"+name+"']").prop("checked",false);
// }
//}
//
//
//// $('.uploadImged').on('hover')
//
//// window.onload=function(){
//// $('.initLoading').remove();
//// }
//
//
///**
// * 表格编辑拓张
// */
// $.extend($.fn.datagrid.methods, {
// editCell: function(jq,param){
// return jq.each(function(){
// var opts = $(this).datagrid('options');
// var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
// for(var i=0; i<fields.length; i++){
// var col = $(this).datagrid('getColumnOption', fields[i]);
// col.editor1 = col.editor;
// if (fields[i] != param.field){
// col.editor = null;
// }
// }
// $(this).datagrid('beginEdit', param.index);
// for(var i=0; i<fields.length; i++){
// var col = $(this).datagrid('getColumnOption', fields[i]);
// col.editor = col.editor1;
// }
// });
// }
//});
//
//
//
//function endEditing(gridid){
// if (editIndex == undefined){return true}
// if ($(gridid).datagrid('validateRow', editIndex)){
// $(gridid).datagrid('endEdit', editIndex);
// editIndex = undefined;
// return true;
// } else {
// return false;
// }
//}
//
//
//// 删除上传的图片
//
//$('.imgListUl').on('mouseover','.uploadImged',function(){
// $(this).find('.deleteImgBanner').show();
//}).on('mouseout','.uploadImged',function(){
// $(this).find('.deleteImgBanner').hide();
//}).on('click','.uploadImged .deleteImgBanner',function(){
// $(this).closest('li.uploadImged').remove();
//})
// # sourceURL=common.js
相关推荐
在给定的“checkbox组件.zip”压缩包中,我们主要关注的是Checkbox组件,它是Element UI中用于实现多选功能的关键元素。在描述中提到的“基于vue的element组件Checkbox多选框【竖向多列】展示”,意味着我们将讨论...
在本文中,我们将深入探讨如何制作一个自定义的Flash AS3多选组件,特别是基于给定的文件"自制flash checkbox多选组件"。这个组件允许用户在交互式应用程序中进行多选项选择,提供了灵活和可定制的功能。我们将讨论...
**dtree组件与Checkbox功能详解** dtree组件是一款基于JavaScript实现的树形控件,它提供了丰富的功能,便于用户在Web应用中展示层次结构的数据。在这个特定的案例中,我们关注的是带有Checkbox功能的dtree,这使得...
因此,自定义Checkbox组件变得很有必要。本实例将指导你如何通过两张图片来实现一个美观的自定义Checkbox。 首先,自定义Checkbox的基本思路是利用Android的Drawable资源,特别是StateListDrawable(选择器),它...
如果使用React、Vue或Angular等现代前端框架,可以利用它们的数据绑定和组件化特性,更方便地管理 `checkbox` 的状态和交互。 综上所述,实现 `checkbox` 的多项选中及取消选中,需要理解 `checkbox` 的基本用法,...
JavaFX是Oracle公司推出的用于构建桌面、Web以及移动平台的富客户端应用的开源框架。它提供了丰富的用户界面组件,使得...这种设计方式让开发者能够根据需求自由地定制UI组件,创建出符合业务逻辑的定制化选择控件。
1. CheckBox组件:在UI设计中,CheckBox用于让用户在多个选项中选择一个或多个。当用户点击CheckBox时,它的状态会改变,显示为选中或未选中。 2. 结合TreeView:将CheckBox与TreeView结合,每个树节点都可以包含一...
在标准的UIKit框架中,没有直接提供Checkbox组件,但可以通过组合其他UI元素,如UIButton和UIImageView,来自定义实现。本项目正是基于这样的需求,实现了自定义的iOS Checkbox,支持单选框功能。 自定义Checkbox的...
本主题聚焦于如何通过XML来改变CheckBox的大小和形状,以满足个性化设计的需求。CheckBox作为用户界面中的一个常见组件,常用于实现二选一的选择功能。在Android中,我们可以通过自定义样式和修改XML属性来实现对...
然而,原生的checkbox样式通常较为简单,可能无法满足现代设计对美观性和个性化的需求。因此,开发人员会借助第三方插件来美化这些元素,以增加视觉吸引力和交互性。 icheck-1.x 是一个知名的checkbox和radio按钮...
在IT行业中,用户界面(UI)的设计和交互性是至关重要的。"Checkbox",或称为复选框,是用户界面中的基本元素之一,通常用于让用户选择一...通过理解和运用这些概念,我们可以创建更符合用户需求、更人性化的应用程序。
最后,将自定义样式应用到Checkbox组件上: ```xml <CheckBox android:id="@+id/my_checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="复选框" style="@...
在Android开发中,RadioButton、CheckBox和Toast是三个非常基础且重要的组件,它们各自在不同的场景下发挥着关键作用。下面将分别对这三个组件进行详细解释,并通过实例展示它们的使用方法。 **RadioButton** 是...
在IT领域,尤其是在Windows ...这种自定义控件的设计和实现是软件开发中的一个重要实践,它体现了面向对象编程和组件复用的思想。在实际开发中,这样的控件还可以根据需求进一步定制,如添加分组功能、搜索过滤等。
CheckBox则是提供多选功能的组件。当这两者结合时,可以实现用户在ListView中进行多项选择,例如全选、取消选中以及删除操作。以下是关于"ListView CheckBox"的相关知识点详解: 1. **ListView的使用**: - `...
在上面的代码中,我们创建了一个ViewHolder类来缓存复用的视图组件,以提高性能。同时,我们使用SparseBooleanArray来存储每一项Checkbox的选中状态,这是一种轻量级的数据结构,适合存储稀疏的布尔值。 `getView()...
此外,开源社区中还存在许多库和框架,如Apache Pivot、JFreeChart等,它们提供了更高级的Checkbox组件,可能包含三态支持。这些库通常封装了复杂的逻辑,使得在实际项目中实现三态Checkbox变得更加简单。 在实际...
CheckBox组件是用户界面中常见的一种选择控件,通常用于提供多个可选的选项。在LWUIT中,你可以通过以下步骤创建和使用CheckBox: 1. **导入相关类**:首先,你需要导入`com.sun.lwuit.CheckBox`类来创建CheckBox...
这是一种软件设计模式,它将业务逻辑、用户界面和数据模型分离,使代码更加模块化,更易于测试和维护。在MVVM中,ViewModel作为View和Model之间的桥梁,负责处理View与Model之间的交互。 在ListView中添加CheckBox...
在IT领域,尤其是在Android开发中,`CheckBox`和`GridView`是两个常见的UI组件,它们在构建用户界面时起着至关重要的作用。`CheckBox`是一种复选框控件,允许用户进行多选操作,而`GridView`则是一个网格视图,能够...