`
huangyongxing310
  • 浏览: 495992 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

CheckBox组件化

 
阅读更多

//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组件.zip”压缩包中,我们主要关注的是Checkbox组件,它是Element UI中用于实现多选功能的关键元素。在描述中提到的“基于vue的element组件Checkbox多选框【竖向多列】展示”,意味着我们将讨论...

    自制flash checkbox多选组件

    在本文中,我们将深入探讨如何制作一个自定义的Flash AS3多选组件,特别是基于给定的文件"自制flash checkbox多选组件"。这个组件允许用户在交互式应用程序中进行多选项选择,提供了灵活和可定制的功能。我们将讨论...

    dtree组件 带checkbox

    **dtree组件与Checkbox功能详解** dtree组件是一款基于JavaScript实现的树形控件,它提供了丰富的功能,便于用户在Web应用中展示层次结构的数据。在这个特定的案例中,我们关注的是带有Checkbox功能的dtree,这使得...

    Android中自定义Checkbox组件实例

    因此,自定义Checkbox组件变得很有必要。本实例将指导你如何通过两张图片来实现一个美观的自定义Checkbox。 首先,自定义Checkbox的基本思路是利用Android的Drawable资源,特别是StateListDrawable(选择器),它...

    checkbox多项选中及取消选中

    如果使用React、Vue或Angular等现代前端框架,可以利用它们的数据绑定和组件化特性,更方便地管理 `checkbox` 的状态和交互。 综上所述,实现 `checkbox` 的多项选中及取消选中,需要理解 `checkbox` 的基本用法,...

    javafx combox内嵌checkbox

    JavaFX是Oracle公司推出的用于构建桌面、Web以及移动平台的富客户端应用的开源框架。它提供了丰富的用户界面组件,使得...这种设计方式让开发者能够根据需求自由地定制UI组件,创建出符合业务逻辑的定制化选择控件。

    带checkBox的treeView

    1. CheckBox组件:在UI设计中,CheckBox用于让用户在多个选项中选择一个或多个。当用户点击CheckBox时,它的状态会改变,显示为选中或未选中。 2. 结合TreeView:将CheckBox与TreeView结合,每个树节点都可以包含一...

    自定义iOS中的Checkbox

    在标准的UIKit框架中,没有直接提供Checkbox组件,但可以通过组合其他UI元素,如UIButton和UIImageView,来自定义实现。本项目正是基于这样的需求,实现了自定义的iOS Checkbox,支持单选框功能。 自定义Checkbox的...

    checkbox按下前弹出是否确认对话框

    在IT行业中,用户界面(UI)的设计和交互性是至关重要的。"Checkbox",或称为复选框,是用户界面中的基本元素之一,通常用于让用户选择一...通过理解和运用这些概念,我们可以创建更符合用户需求、更人性化的应用程序。

    从xml中改变checkBox大小和形状

    本主题聚焦于如何通过XML来改变CheckBox的大小和形状,以满足个性化设计的需求。CheckBox作为用户界面中的一个常见组件,常用于实现二选一的选择功能。在Android中,我们可以通过自定义样式和修改XML属性来实现对...

    checkbox美化插件包

    然而,原生的checkbox样式通常较为简单,可能无法满足现代设计对美观性和个性化的需求。因此,开发人员会借助第三方插件来美化这些元素,以增加视觉吸引力和交互性。 icheck-1.x 是一个知名的checkbox和radio按钮...

    checkbox 设定文字和选框之间的距离及自定义样式

    最后,将自定义样式应用到Checkbox组件上: ```xml &lt;CheckBox android:id="@+id/my_checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="复选框" style="@...

    android组件 RadioButton,CheckBox,Toast具体实例

    在Android开发中,RadioButton、CheckBox和Toast是三个非常基础且重要的组件,它们各自在不同的场景下发挥着关键作用。下面将分别对这三个组件进行详细解释,并通过实例展示它们的使用方法。 **RadioButton** 是...

    combox 列表嵌套checkbox

    在IT领域,尤其是在Windows ...这种自定义控件的设计和实现是软件开发中的一个重要实践,它体现了面向对象编程和组件复用的思想。在实际开发中,这样的控件还可以根据需求进一步定制,如添加分组功能、搜索过滤等。

    ListView CheckBox

    CheckBox则是提供多选功能的组件。当这两者结合时,可以实现用户在ListView中进行多项选择,例如全选、取消选中以及删除操作。以下是关于"ListView CheckBox"的相关知识点详解: 1. **ListView的使用**: - `...

    WPF ListView控件中CheckBox全选联动

    这是一种软件设计模式,它将业务逻辑、用户界面和数据模型分离,使代码更加模块化,更易于测试和维护。在MVVM中,ViewModel作为View和Model之间的桥梁,负责处理View与Model之间的交互。 在ListView中添加CheckBox...

    ListVIew 实现Checkbox多选

    在上面的代码中,我们创建了一个ViewHolder类来缓存复用的视图组件,以提高性能。同时,我们使用SparseBooleanArray来存储每一项Checkbox的选中状态,这是一种轻量级的数据结构,适合存储稀疏的布尔值。 `getView()...

    checkbox 三态【转】

    此外,开源社区中还存在许多库和框架,如Apache Pivot、JFreeChart等,它们提供了更高级的Checkbox组件,可能包含三态支持。这些库通常封装了复杂的逻辑,使得在实际项目中实现三态Checkbox变得更加简单。 在实际...

    Lwuit中CheckBox、ComboBox组件的使用说明

    CheckBox组件是用户界面中常见的一种选择控件,通常用于提供多个可选的选项。在LWUIT中,你可以通过以下步骤创建和使用CheckBox: 1. **导入相关类**:首先,你需要导入`com.sun.lwuit.CheckBox`类来创建CheckBox...

    checkbox和gridview的结合

    在IT领域,尤其是在Android开发中,`CheckBox`和`GridView`是两个常见的UI组件,它们在构建用户界面时起着至关重要的作用。`CheckBox`是一种复选框控件,允许用户进行多选操作,而`GridView`则是一个网格视图,能够...

Global site tag (gtag.js) - Google Analytics