Jquery多选数据字典插件

Jquery多选数据字典插件[@more@]

/**
*多选的数据字典
*Date: 2012-04-10
*孙伟
*/
(function($){
$.fn.dropdownlist=function(opts){
var settings = {
id:'',
width:100,
listboxwidth:0,
listboxmaxheight:200,
listboxalign:'auto',
columns:1,
checkbox:false,
maxchecked:3,
selectedtext:'',
requiredvalue:[],
disabled:false,
selectclass:'ddl-select',
listboxclass:'ddl-listbox',
selected:[],
name : "",
data:{},
url:"",
code:"",
onchange:null
};
//继承用户自定义属性
var options = $.extend(settings,opts);
//禁止事件
var stopBubble=function (a) {
var a = a || window.event;
if (a.stopPropagation) {
a.stopPropagation()
} else {
window.event.cancelBubble = true
}
};
//
if(navigator.userAgent.toLowerCase().indexOf('msie 6.0')!=-1)
{
select.mouseover(function(){
if(!select.hasClass('hover'))select.addClass('hover');
}).mouseout(function(){
if(select.hasClass('hover'))select.removeClass('hover');
});
}
var $this = $(this);
var select;
var selectInput;
//这个是多选字典的div的id，必须是唯一的
var selectDivId = $this.attr("id");
var hide = true;
$this.empty();
//window[settings.id]={};
//var objid = eval(settings.id);
//objid.οnchange=settings.onchange;
//字典回调函数
var callBack = function(result){
if(result.exception==undefined){
options.data = {};
var resultJson = result.multiDictList;
for(var i=0;i var key = resultJson[i]['key'];
var value = resultJson[i]['value'];
options.data[key] = value;
}
//initData();
//初始化
initData(options.data,options.selected);
//objid.text = select.attr('selectedText');
//objid.value = select.attr('selectedValue');
}else{
alertShow(result.exception.message);
}
}
/**
* 获取项目根目录
* @return 返回项目根目录
*/
var getProjectBasePath = function(){
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8083
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名，如：/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return (localhostPaht+projectName);
}

$.post(getProjectBasePath()+"/base/multiSelectDict.action",{"multiDict.code":options.code},callBack);

//初始化数据
var initData = function(mdata,selectedValue){
select = $('

',
{'class':(options.disabled?options.disabledclass:options.selectclass),
'width':options.width,
'click':function(evt){
$('.ddlclass').hide();
if(options.disabled)return;
var $thispos = $(this).offset();
var $thisheight = $(this).outerHeight();
var $lb = $('div.'+options.listboxclass,$this);
var $lbheight = $lb.outerHeight();
var $lbwidth = $lb.outerWidth();
var lbtop = (($thispos.top + $thisheight + $lbheight)>$(document).height() && $thispos.top>$lbheight)?
$thispos.top-$lbheight:$thispos.top + $thisheight;
var posright = $thispos.left+$(this).outerWidth()-$lbwidth;
var posleft = $thispos.left;
var lbleft = $lbwidth+$thispos.left>$(document).width()?posright:posleft;
switch(options.listboxalign){
case 'left':
lbleft = posleft;
break;
case 'right':
lbleft = posright;
break
default:
break;
}
if(hide){
$("#"+$this.attr("id")+"_select").show();
hide = false;
}else{
$("#"+$this.attr("id")+"_select").hide();
hide = true;
}
//$('div.'+options.listboxclass,$this).css({'top':lbtop,'left':lbleft}).show();
stopBubble(evt);
}
}).appendTo($this);

//绑定onchange事件
if(options.onchange){
//οnchange=""+options.onchange(this.text,this.value)+""
//隐藏的input，用来存字典的key串，这个是向后台提交的东西
selectInput = $("").appendTo($this);
//selectInput.onchange = function(){alert(10)};
}else{
//隐藏的input，用来存字典的key串，这个是向后台提交的东西
selectInput = $("").appendTo($this);
}

//获取select的宽度
options.listboxwidth = options.listboxwidth<=0?select.outerWidth():options.listboxwidth;

var listBoxDiv = $("

");
listBoxDiv.attr("id",$this.attr("id")+"_select");
listBoxDiv.attr("style","position:absolute;width:"+options.listboxwidth+"px;overflow:hidden;overflow-y:auto;display:none;z-index:1000;");
var listBoxTable = $("");
var listBoxTbody = $("");
var selectKey = "";
var selectValue = "";
//默认哪些选中的
for(var i=0;i if(i==0){
selectKey = options.selected[i];
}else{
selectKey = selectKey + "," + options.selected[i];
}
}
selectInput.attr("value",selectKey);
$.each(mdata,function(k,v){
//默认哪些选中的
for(var i=0;i if(k==options.selected[i]){
selectValue = selectValue + "," + v;
}
}
var listTr = $("");

if(options.checkbox){
var selected = options.selected;
var listTd0 = $("");
listTd0.attr("width","22");
var checkedFlag = true;
//默认选中的
for(var i=0;i if(k==selected[i]){
listTd0.append($(""));
checkedFlag = false;
break;
}else{
continue;
}
}
if(checkedFlag){
listTd0.append($(""));
}
listTr.append(listTd0);
}
var listTd1 = $("");
listTd1.click(function(){
var ckb=$(this).prev().find(":checkbox");
var ckbval=$(this).prev().find(":checkbox").attr("checked");
ckb.attr("checked",!ckbval);
})
listTd1.append(v);
listTr.append(listTd1);
listBoxTbody.append(listTr);
});
//回显显示值
if(selectValue!=""){
selectValue = selectValue.substring(1,selectValue.length);
select.empty();
select.append(selectValue);
select.attr("title",selectValue);
selectInput.attr("text",selectValue);
}else{
select.empty();
select.append(" select.attr("title","");
selectInput.attr("text","");
}
listBoxTable.append(listBoxTbody);
if(options.checkbox){
var tfoot = $(' ');
listBoxTable.append(tfoot);
var _btn = $('input',tfoot);
//确定按钮的点击事件
$(_btn[0]).click(function(){
var selectedKey = "";
var selectedValue = "";
$("input[name='"+selectDivId+"_checkbox']:checked").each(function(i){
if(i==0){
selectedKey = $(this).val();
selectedValue = $(this).attr("valuestr");
}else{
selectedKey = selectedKey + "," +$(this).val();
selectedValue = selectedValue + "," +$(this).attr("valuestr");
}
});
//设置select--前台显示
select.empty();
select.append(selectedValue);
select.attr("title",selectedValue);
//设置input--往后台
selectInput.attr("value",selectedKey);
selectInput.attr("text",selectedValue);
$("#"+$this.attr("id")+"_select").hide();
hide = true;
});
//取消按钮的点击事件
$(_btn[1]).click(function(){
$("#"+$this.attr("id")+"_select").hide();
hide = true;
});
}

listBoxDiv.append(listBoxTable);
$this.append(listBoxDiv);
};

/*$(document).mousedown(function(event){
var obj=$(this);
alert(event.srcElement);
//alert(event.target.id);
});*/
/*$(document).click(function(){
if(!hide){
$("#"+$this.attr("id")+"_select").hide();
hide = true;
}
});*/
//$(window).resize(function(){$("#"+$this.attr("id")+"_select").hide();});

var getValues = function(){

}
var setValues = function(values){
$("input[name='"+selectDivId+"_checkbox']").each(function(i){
$(this).attr("checked",false);
for(var j=0;j if($(this).val()==values[j]){
$(this).attr("checked",true);
}
}
});
var selectedKey = "";
var selectedValue = "";
//设置select--前台显示
select.empty();
select.append(selectedValue);
select.attr("title",selectedValue);
//设置input--往后台
selectInput.attr("value",selectedKey);
selectInput.attr("text",selectedValue);
$("input[name='"+selectDivId+"_checkbox']:checked").each(function(i){
if(i==0){
selectedKey = $(this).val();
selectedValue = $(this).attr("valuestr");
}else{
selectedKey = selectedKey + "," +$(this).val();
selectedValue = selectedValue + "," +$(this).attr("valuestr");
}
});
//设置select--前台显示
select.empty();
select.append(selectedValue);
select.attr("title",selectedValue);
//设置input--往后台
selectInput.attr("value",selectedKey);
selectInput.attr("text",selectedValue);
}
//返回的对象
var returnObj = {
getValues : getValues,
setValues : setValues
};
return returnObj;
};

})(jQuery);

用法：

var selectObj;
$(document).ready(function(){
selectObj = $('#multiSelect1').dropdownlist({

checkbox:true,//是否复选
width:400,
code:"PROD_PEACCU",
selected:"${dictTest}",
name : "role.dict"
});
function setValues(){
selectObj.setValues("1,2,3");
}

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/25261409/viewspace-1057871/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/25261409/viewspace-1057871/