一行多列的下拉多选框
程序员文章站
2024-01-01 10:00:22
...
一行多列的下拉多选框
很简单的一行多列的下拉多选框，就当是学习编写jquery插件的例子，该例子依赖jquery
相关js代码：
/**
* 下拉多选插件，支持一行显示过个input框，显示多行
* by warhorse
*/
(function($){
"use strict";
var SelectCheckBox = function(element, options){
this.$element = $(element);
this.options = $.extend({}, SelectCheckBox.DEFAULTS, options); //使用jQuery.extend 覆盖插件默认参数
// 多选框的名称
if(!this.options.inputName){
this.options.inputName = this.$element.attr("name");
if(!this.options.inputName){
this.options.inputName = this.$element.attr("id");
this.options.inputName = this.options.inputName;
}
}
// 获取并转换list为数组，支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"，支持对象{1:'aa', 2:'bb'}
if(!this.options.list){
this.options.list = this.$element.attr("list");
}
if(this.options.list && !$.isArray(this.options.list)){ // 1:aa;2:bb
var list = [];
var listType = typeof this.options.list;
if(listType === 'string'){
var entries = this.options.list.split(';');
for(var i = 0; entries && i < entries.length; i++){
var entry = entries[i];
var values = entry.split(":");
list.push({'code': values[0], 'name':values[1]});
}
}else if(listType === 'object'){
for(var key in this.options.list){
list.push({'code': key, 'name':this.options.list[key]});
}
}
//
this.options.list = list;
}
// 获取并转换data，支持数组类型[1,2,3]，支持字符串类型："1,2,3"
if(!this.options.data){
this.options.data = this.$element.attr("data");
}
if(this.options.data && !$.isArray(this.options.data)){
this.options.data = this.options.data.split(',');
}
};
SelectCheckBox.DEFAULTS = {
list: null, // 支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"
data: '', // 支持数组类型[1,2,3]，支持字符串类型："1,2,3"
col: 4, //默认一行4个
formatter: null,
seperator: '，',
noneSelectedText: '请选择',
width: 100,
height: 100,
onchange: null
};
SelectCheckBox.prototype.create = function () {
var opts = this.options;
// li的宽度百分比
var liWidth = 100 / opts.col;
liWidth += '%';
var width = this.$element.attr("width");
if(!width){
width = this.$element.width();
}
var lis = '';
var title = ''; // 选中值对应的文字
for(var i = 0; i < opts.list.length; i++){
var entry = opts.list[i];
var checked = false;
for(var j = 0; opts.data && j < opts.data.length; j++){
if(entry['code'] == opts.data[j]){
checked = true;
title += entry['name'] + opts.seperator;
}
}
if(opts.formatter){
var inputHtml = opts.formatter.call(this, entry, checked);
lis += '<li align="left" style="width:'+liWidth+'">'+inputHtml+'</li>';
}else{
var checkedStr = checked ? 'checked="checked"' : '';
lis += '<li align="left" style="width:'+liWidth+'"><label><input type="checkbox" name="'+opts.inputName+'" value="'+entry['code']+'" '+checkedStr+'/>'+entry['name']+'</label></li>';
}
}
if(title){
if(opts.seperator){
title = title.substring(0, title.length - opts.seperator.length);
}
}else{
title = opts.noneSelectedText;
}
// 主要的html代码
var div = '<div class="selectCheckbox" id="scb_'+opts.inputName+'" style="width:100%; height:100%;cursor:pointer;">'
+ '<div class="inputDiv" style="width:'+width+'px;overflow:hidden;">'
+ '<p>'+title+'</p>'
+ '</div>'
+ '<div class="selectDiv" style="position:absolute; width:'+width+'px; display: none;" >'
+ '<ul>'
+ lis
+ '</ul>'
+ '</div>'
+ '</div>';
this.$element.append(div);
};
// 绑定事件
SelectCheckBox.prototype.bindEvent = function(){
var self = this;
var $this = this.$element;
var opts = this.options;
// 绑定事件
var inputDiv = $this.find(".inputDiv");
var selecDiv = $this.find(".selectDiv");
// 点击显示下拉框事件
inputDiv.bind('click', function(){
selecDiv.toggle();
});
// 鼠标离开选择面板隐藏下拉框事件
$this.bind('mouseleave',function(){
selecDiv.hide();
});
// 选择值后将选中的值显示在显示框上的事件
selecDiv.find("input").bind('click',function(){
self.fefresh();
});
};
// 刷新显示
SelectCheckBox.prototype.fefresh = function(){
var self = this;
var opts = this.options;
var $this = this.$element;
var data = [];
var title = '';
$this.find("input:checked").each(function(){
title += $(this).parent("label").text() + opts.seperator;
data.push($(this).val());
});
if(title){
if(opts.seperator){
title = title.substring(0, title.length - opts.seperator.length);
}
}else{
title = opts.noneSelectedText;
}
$this.find(".selectCheckbox").find(".selectDiv").prev(".inputDiv").find("p").text(title);
// 执行回调函数
if(opts.onchange){
opts.onchange.call(self, data.toString());
}
//
opts.data = data;
};
// 全不选
SelectCheckBox.prototype.clear = function(){
this.$element.find("input").attr("checked", false);
this.fefresh();
};
// 全选
SelectCheckBox.prototype.selectAll = function(){
this.$element.find("input").attr("checked", true);
this.fefresh();
};
// 设置选中的值
SelectCheckBox.prototype.setData = function(data){
if(data && !$.isArray(data)){
data = data.split(',');
}
if(data && data.length > 0){
this.$element.find("input").each(function(){
var val = $(this).val();
if($.inArray(val, data) > -1){
$(this).attr("checked", true);
}
});
//
this.fefresh();
}
return this;
};
// 获取选中的值
SelectCheckBox.prototype.getSelected = function(){
return this.options.data;
};
$.fn.selectCheckBox = function(options){
var $this = $(this);
// 判断是否初始化过的依据
var scb = $this.data('selectCheckBox');
if(!scb){
var opts = typeof options == 'object' && options;
// 初始化并缓存
$this.data('selectCheckBox', (scb = new SelectCheckBox(this, opts)));
// 创建节点
scb.create();
// 绑定事件
scb.bindEvent();
}
// 调用方法
if (typeof options === 'string') {
if(scb){
var fn = scb[options];
if (!fn) {
throw ("selectCheckBox - No such method: " + options);
}
var args = $.makeArray(arguments).slice(1);
return fn.apply(scb, args);
}
}
return scb;
};
})(jQuery);相关css
.selectCheckbox .inputDiv{
height:20px;
line-height:20px;
padding:2px 5px;
border:1px solid #CFCFCF;
background-color: rgba(255, 255, 255, 1);
background-image: url('${ctx}/resource/images/arrow3_d.png');
background-repeat: no-repeat;
background-position: 99% 50%;
}
.selectCheckbox .selectDiv{
padding:2px 5px;
border:1px solid #CFCFCF;
background-color: #F8F8F8;
z-index: 1000;
height: auto;
line-height: 31px;
}
.selectCheckbox li{
list-style-type: none;
float: left;
}调用方式：
- html写法
<div name="outOrgType"></div>- 调用js写法：
$("div[name='outOrgType']").selectCheckBox({
list: '1:aa;2:bb;3:cc', // 支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"
data: '1,2', // 支持数组类型[1,2,3]，支持字符串类型："1,2,3"
col: 4, //默认一行4个
formatter: null,
seperator: '，', // 标题显示的分隔符
noneSelectedText: '请选择', //没有选项的时候显示的标题
onchange: null // 点击选中项的回调函数
});