自己定义的下拉多选的链表匡
文件一：
/**
* @description:创建简单的select下拉菜单。
*/
(function($) {
/**
* @description:初始select标签。
* @param:target dom组件。
*/
function init(target) {
/**
* $(target) 设置定位的方式为绝对定位
*/
//$(target).css({"position":"absolute"});
/**
* 封装成checkbox的形式
*/
var kk=$.data(target, 'selectcheckbox');
$(target).attr('comTagName','selectcheckbox');
var opts = $.data(target, 'selectcheckbox').options;
var width = opts.width;
var selectcheckbox=opts.selectcheckbox;
/**
* 看原来是否有INput
*/
if(!selectcheckbox){
/**
* 设置成博能编辑
*/
selectcheckbox = $('<input class="singelSelect" style="width:' + width+ 'px;" />');
$(target).append(selectcheckbox);
}else{
selectcheckbox.empty();
}
selectcheckbox.unbind("click").bind("click",function(){
request(target);
});
var _id = $(target).attr("id");
// 添加验证的属性
if (opts.rules.validateCls) {
$(selectcheckbox).addClass(opts.rules.validateCls);
}
if (opts.rules.required) {
$(selectcheckbox).attr('required', opts.rules.required);
}
if (opts.rules.missingMessage) {
$(selectcheckbox).attr('missingMessage', opts.rules.missingMessage);
}
if (opts.rules.validType) {
$(selectcheckbox).attr('validType', opts.rules.validType);
}
if (opts.rules.invalidMessage) {
$(selectcheckbox).attr('validType', opts.rules.invalidMessage);
}
// end 添加验证的属性
if(opts.name){
_id=opts.name;
}
if (_id) {
$(selectcheckbox).attr("name", _id+"value");
}
debugger;
var hiddren_input=null;
hiddren_input=$('<input style="display:none;" id="'+_id+'" name='+_id+'>');
$(target).append(hiddren_input);
$(hiddren_input).val(opts.initVal);
/**
* 进行回显示
*/
var ini_value='|'+$('#'+_id+'[name='+_id+']').val()+'|';
var data=opts.data;
if(data){
var returnValues2=[];
for ( var i = 0, len = data.length; i < len; i++) {
var r=data[i];
if(ini_value.indexOf("|"+r.id+"|")>=0){
returnValues2.push(r.text);
}
}
$(selectcheckbox).val(returnValues2.join("||"));
}
if(opts.disabled){
$(selectcheckbox).attr('disabled', 'disabled');
}
return {
selectcheckbox : selectcheckbox
};
}
/**
* @description:请求数据
*
* 是应用于访问数据库的操作
*/
function request(target) {
/**
* 获取操作的数据
*/
var opts = $.data(target, 'selectcheckbox').options;
/**
* 执行创造之前的方法
*/
opts.onBeforeRequest.call(target);
/**
* 如果原来有数据则
*/
if (opts.data) {
initOpts(target);
//bindEvents(target);
opts.onRequestSuccessful.call(target,opts.data);
} else if (opts.url) {
var ajaxCfg = {
url : opts.url,
method : opts.method || 'POST',
params : opts.queryParams,
scope : target,
success : function(data) {
if(data.result){
opts.data=opts.dataFilter(data);
initOpts(target);
bindEvents(target);
opts.onRequestSuccessful.call(target,opts.data);
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
};
$.util.sendManager.send(ajaxCfg);
}
}
/**
* @description:初始options
*/
function initOpts(target) {
var opts = $.data(target, 'selectcheckbox').options;
var selectcheckbox = $.data(target, 'selectcheckbox').selectcheckbox;
// disabled 为true表示该组件不可用。
if (!opts.disabled)
selectcheckbox.removeAttr('disabled');
var data = opts.data;
/**
*创建对象
*/
var select_div=$('<div style="border:solid 1px;font-size:14px;width:auto;dispaly:block;background-color:#FFEBCD;float:left;position:relative;left:0px;top:0px;z-index:10007"></div>');
var cityObj = selectcheckbox;
var cityOffset = selectcheckbox.offset();
select_div.css({
position : 'absolute',
zIndex : 999,
left : cityOffset.left + "px",
top : cityOffset.top + cityObj.outerHeight() + "px",
width:cityOffset.width
}).slideDown("fast");
var _id=opts.name;
var ini_value='|'+$('#'+_id+'[name='+_id+']').val()+'|';
if (data) {
for ( var i = 0, len = data.length; i < len; i++) {
var r=data[i];
debugger;
var checkbox_i=$('<div ids="inner_checkbox_inner_div_selectchechbox'+r.id+'"><input id="inner_checkbox_inner_div_selectchechbox'+r.id+'" style="float:left;text-align:left;" type="checkbox" class="inner_checkbox_inner_div_selectchechbox"
value="' + r.id + '" text="'+r.text+'">' + r.text+ '</div>');
if(ini_value.indexOf("|"+r.id+"|")>=0){
var id=$(checkbox_i).attr("ids");
var object=checkbox_i.find("input");
for(var k=0;k<object.length;k++){
if($(object[k]).attr('id')==id){
$(object[k]).attr("checked","checked");
$(checkbox_i).css({"background-color":"orange","cursor":"point"});
}
}
}
var nin_div=$('<div ids="inner_checkbox_inner_div_selectchechbox'+r.id+'" style="width:300px;dispaly:block;clear:both;float:left;"></div>');
nin_div.append(checkbox_i);
nin_div.unbind("mouseover").bind("mouseover",function(){
$(this).css({"background-color":"orange","cursor":"point"});
}).unbind("mouseout").bind("mouseout",function(){
var object=$(this).find("input");
if($(object).attr("checked")=="checked"){
}else{
$(this).css({"background-color":"#FFEBCD","cursor":"point"});
}
}).unbind("click").bind("click",function(){
var object=$(this).find("input");
if($(object).attr("checked")=="checked"){
$(object).removeAttr("checked");
}else{
$(object).attr("checked","checked");
}
});
select_div.append(nin_div);
}
var other_div=$('<div style="width:150px;dispaly:block;clear:both;"></div>');
select_div.append(other_div);
var ok_button=$('<input type="button" style="box-shadow:0px 0px 5px #000;background-color: #B5D4EB;color: black;border: solid 3px color #E1EEF7;font-family: "楷体";font-size: 20px;size: 15px;padding: 2px 2px" value="确定">');
var cancle_button=$('<input type="button" style="float:rigth;box-shadow:0px 0px 5px #000;background-color: #B5D4EB;color: black;border: solid 3px color #E1EEF7;font-family: "楷体";font-size: 20px;size: 15px;padding: 2px 2px"
value="取消">');
other_div.append(ok_button);
other_div.append(cancle_button);
$(target).append(select_div);
ok_button.unbind("click").bind("click",function(){
debugger;
var array=$('.inner_checkbox_inner_div_selectchechbox:checked');
console.log(array);
var returnValues=[];
var returnValues2=[];
for(var i =0;i<array.length;i++){
returnValues.push($(array[i]).val());
returnValues2.push($(array[i]).attr("text"));
}
//data[fn]=returnValues.join("||");
var _v = returnValues.join("||");
$('#'+_id+'[name='+_id+']').val("");
$('#'+_id+'[name='+_id+']').val(_v);
$(selectcheckbox).val("");
$(selectcheckbox).val(returnValues2.join("||"));
select_div.remove();
});
cancle_button.unbind("click").bind("click",function(){
select_div.remove();
});
}else {
return;
}
}
/**
* @discription: 下拉菜单构造器。
* @constructor
*/
$.fn.selectcheckbox = function(options, param) {
if (typeof options == 'string') {
/**
* 这是调用方法
*/
return $.fn.selectcheckbox.methods[options](this, param);
}
/**
* 构建相关的数据
*/
options = options || {};
return this.each(function() {
/**
* 获取存储的信息
*/
var state = $.data(this, 'selectcheckbox');
if (state) {
/**
* 与原来的OPtions记性合并
*/
$.extend(state.options, options);
} else {
/**
*
*/
state = $.data(this, 'selectcheckbox', {
options : $.extend({}, $.fn.select.defaults, $.fn.selectcheckbox
.parseOptions(this), options)
});
/**
* 初始化这个下拉
*/
var r = init(this);
state.selectcheckbox = r.selectcheckbox;
}
if (state.options.autoLoad) {
request(this);
}
});
};
$.fn.selectcheckbox.methods = {
options : function(jq) {
return $.data(jq[0], 'select').options;
},
select : function(jq) {
return $.data(jq[0], 'select').select;
},
clear : function(jq) {
return jq.each(function() {
clear(this);
});
},
setValue : function(jq, param) {
// BUG 修改了select设置空值的问题。
if(param==''||param==null)
param='select-empty';
return setValue(jq[0], param);
},
getValue : function(jq) {
return getValue(jq[0]);
},
getSelected : function(jq) {
return getSelected(jq[0]);
},
disable : function(jq) {
return jq.each(function() {
setDisabled(this, true);
});
},
enable:function(jq){
return jq.each(function() {
setEnabled(this, true);
});
},
// 添加属性
attr:function(jq,param){
var attObj=param;
jq.each(function(){
var select = $.data(this, 'select').select;
for(var p in attObj){
select.attr(p,attObj[p]);
}
});
},
// 删除属性
removeAttr:function(jq,param){
jq.each(function(){
var select = $.data(this, 'select').select;
select.removeAttr(param);
});
},
reload:function(jq,param){
return reload(jq[0],param);
},
getText:function(jq){
var select = $.data(jq[0], 'select').select;
var text = select.find('option:selected').text();
return text;
}
};
$.fn.selectcheckbox.parseOptions = function(target) {
};
$.fn.selectcheckbox.defaults = $.extend({}, {
// 请求的url
url : '',
// 请求的data
data : '',
// 初始值。
initVal:'',
disabled : false,
// 请求参数。
queryParams : '',
width : 191, //156
method : 'POST',
textField : '',
name:"",
// 是否显示 --请下拉选择--
isShowEmptyMessage : true,
valueField : '',
emptyText : '--请下拉选择--',
rules : {
validateCls : '',
required : false,
validType : '',
missingMessage : '',
invalidMessage : ''
},
autoLoad : false,
onSelected : function(code) {
},
dataDictKey:'',
onBeforeReload:function(target,param){
var defaultCfg={
isShowEmptyMessage : false,
autoLoad:true,
valueField:'id',
textField:'text',
rules:undefined
//data:[]
};
var opts = $.data(target, 'select').options;
opts = $.extend(opts,defaultCfg,param||{});
if(typeof opts.data == 'string'){
opts.data = $.global.getCacheObject().get(data);
}
if(opts.dataDictKey){
delete opts.data;
opts.data = $.global.getCacheObject().get(opts.dataDictKey);
}
},
isShowFormater:false,
formatter:function(text,index,isShowEmptyMessage){
return text;
},
onBeforeRequest:function(){
},
dataFilter:function(data){
return data.data;
},
onRequestSuccessful : function(data) {
}
});
})(jQuery);
主要用于生成相应的界面
配置方式：
$("#元素ID").selectcheckbox({
id:'tblStrainInsInfo_siiIdemId',
table:'UDP_R_DD_1019',
name:'tblStrainInsInfo_siiIdemId',
hander:function(record){
},
initVal:tblStrainInsInfo.siiIdemId,
data:bmJson.UDP_R_DD_1019,
validateCls : 'sino_validate',
required : false,
validType : 'radio',
missingMessage "基本信息"
});