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