自己动手增强 jquery.multiselect2side 调用

最近用到一个jq插件  jquery.multiselect2side 感觉蛮好用的,可后面有级联的需求发现自带的不好弄,于是乎改了下,在不影响之前功能的情况下 可以注入多种事件,增加自定义按钮等等

 

例如:

// 绑定控件: 当颜色被移动时应该及时反馈到vo对象中
	sltobj.multiselect2side({
		selectedPosition: 'right',
	    search: "搜索: ",
		labeldx: '本色族拥有的颜色',
		labelTop: '居顶',
		labelBottom: '居底',
		labelUp: '上',
		labelDown: '下',
		labelSort: '排序',
		
		leftSel_after_remove: function(leftSel,rightSel){
			// lft->rgt: 重新计算选中的颜色列表
			var selected = [];
			rightSel.find('option').each(function(){
				selected[selected.length] = jQuery(this).val();
			});
			if (vo.selected_cg[dataInput.cg_id]){
				vo.selected_cg[dataInput.cg_id].color_ids = selected;
			}
		},
		
		rightSel_after_remove: function(leftSel,rightSel){
			// rgt->lft: 重新计算选中的颜色列表以及默认颜色是否还存在
			leftSel.find('option.default_color').each(function(){
				jQuery(this).removeClass('default_color');
				if (jQuery(this).hasClass('delete_color')){
					jQuery(this).css({color: 'gray'});	
				}else {
					jQuery(this).css({color: ''});
				}
			});
			var selected = [];
			rightSel.find('option').each(function(){
				selected[selected.length] = jQuery(this).val();
			});
			if (vo.selected_cg[dataInput.cg_id]){
				vo.selected_cg[dataInput.cg_id].color_ids = selected;
			}
			
			var default_color_id = vo.selected_cg[dataInput.cg_id].default_color_id;
			if (default_color_id){
				var finded = false;
				for (var i=0; i < selected.length; i++){
					if (selected[i] == default_color_id){
						finded = true;
						break;
					}
				}
				if (!finded) vo.selected_cg[dataInput.cg_id].default_color_id = null;
			}
		},
		
		rightSel_after_move: function(rightSel){
			// 移动后重新计算选中的颜色列表
			var selected = [];
			rightSel.find('option').each(function(){
				selected[selected.length] = jQuery(this).val();
			});
			if (vo.selected_cg[dataInput.cg_id]){
				vo.selected_cg[dataInput.cg_id].color_ids = selected;
			}
//			console.log(selected);
		},
		
		// 自定义命令按钮
		customCommand: [
			{
				cmdclass: 'SetDefaultColor',title: '设置色族的默认颜色',label: '默认色',
				style: {
					color: 'pink','background-color': 'gray'
				},
				eventMt: function(rightSel){
					var	selectedDx = rightSel.find("option:selected");
					if (selectedDx.size() != 1){
						return alertMsg.error("每次只能操作一种颜色");
					}
					rightSel.find('option.default_color').each(function(){
						jQuery(this).removeClass('default_color');
						if (jQuery(this).hasClass('delete_color')){
							jQuery(this).css({color: 'gray'});	
						}else {
							jQuery(this).css({color: ''});
						}
					});
					selectedDx.addClass('default_color').css({color: 'pink'});
					
//					console.log(selectedDx.get(0));
					vo.setDefaultColorId(dataInput.cg_id,selectedDx.val());
				}
			}
		]
		
	});
	
	jQuery('.SelSort').css("display","none");

 demo效果

 

使用以上的功能弄出各种形式,例如:

 

 

<div class="pageContent">
<form method="post" onsubmit="return ProductSystem_FindProduct_product_tagfilter(this);">
	
	<div class="pageFormContent" style="" layoutH="62"> 
		<dl nowap>
			<dt><?php echo __("标签类别")?>: </dt>
			<dd>
			<?php
			Core_AppUtils::html_control('DropdownList','ProductSystem_FindProduct_product_tag_catalogs',array(
				'items'=>array_flip(array(0 => '请选择标签类别') + $tag_catalogs),
				'onchange' => 'ProductSystem_FindProduct_product_tagfilter_partily(this.value)',
			));
            ?>
			</dd>
		</dl>
				
		<fieldset style="clear: both;display: none;" id="psfp_tagfilter_partily_view">
        	<div style="padding-bottom: 10px"></div>
        </fieldset>
        
		<fieldset style="clear: both;">
        	<legend>已选择的标签</legend>
        	<div style="padding-bottom: 10px" id="psfp_tagfilter_selected_view">
        		
        	</div>
        </fieldset>
		
	</div>
	
	<div class="formBar">
		<div class="buttonActive">
			<div class="buttonContent"><button type="submit"><?php echo __("完成筛选")?></button></div>
		</div>
	</div>
</form>
</div>
<script>
var psfp_tagfilter_json_taglist= <?=empty($json_taglist) ? '{}' : $json_taglist?>;

var psfp_tagfilter_tags = <?=json_encode($tags) ?>;
var psfp_tagfilter_tag_catalogs = <?=json_encode($tag_catalogs) ?>;
var psfp_tagfilter_tag_catalogs_detail = <?=json_encode($tag_catalogs_detail) ?>;

var psfp_tagfilter_selected_cuurent_cid = 0;
psfp_tagfilter_selected_view_rendor();

function psfp_tagfilter_selected_view_rendor(){
	var dd = [];
	jQuery.each(psfp_tagfilter_json_taglist,function(cid,scitems){
		if (scitems.length > 0){
			
			for (var i=0; i < scitems.length; i++){
				var tag_id = scitems[i];
				if (!psfp_tagfilter_tags[tag_id]) continue;
				
				var dt = [
					'<span>',
					'<input type="checkbox" class="psfp_tagfilter_selected_tagitem" name="psfp_tagfilter_selected_tagitems[]" value="'
						+ tag_id + '" cid="' + cid + '" checked="checked">',
					'&nbsp;&nbsp;',psfp_tagfilter_tags[tag_id],
					'</span>'
				];
				dd[dd.length] = dt.join('');
			}
			
		}
	});
	
	$('#psfp_tagfilter_selected_view').html(dd.join('  '));
	// 绑定复选框事件
	$('input.psfp_tagfilter_selected_tagitem:checkbox','#psfp_tagfilter_selected_view').unbind('click').bind('click',function(){
//		console.log($(this).val(),$(this).attr('cid'));
		// 重新绑定对应的大分类下的标签集合
		var ddd = psfp_tagfilter_json_taglist[$(this).attr('cid')];
		if (ddd && ddd.length > 0){
			var ddd_new = [];
			for (var ji=0; ji < ddd.length; ji++){
				if (ddd[ji] == $(this).val()) continue;
				ddd_new[ddd_new.length] = ddd[ji];
			}
			
			psfp_tagfilter_json_taglist[$(this).attr('cid')] = ddd_new;
			
			if (ddd_new.length > 0 && $(this).attr('cid') == psfp_tagfilter_selected_cuurent_cid){
				// 重新渲染 select框
				ProductSystem_FindProduct_product_tagfilter_partily($(this).attr('cid'));
			}
		}
		psfp_tagfilter_selected_view_rendor();
	});
}
function ProductSystem_FindProduct_product_tagfilter(frm){
	$.pdialog.closeCurrent();
	var vdata = {};
	jQuery.each(psfp_tagfilter_json_taglist,function(cid,selected_items){
		if (selected_items.length > 0){
			vdata[cid] = selected_items;
		}
	});
	$('#json_taglist','#kscon-from-psfp-querylist').val($.toJSON(vdata));
	return false;
}
function ProductSystem_FindProduct_product_tagfilter_partily(cid){
	
	psfp_tagfilter_selected_cuurent_cid = cid;
	
	var sltid = 'psfp_tagfilter_partily_view_select';
	var partily_view_obj = $('#psfp_tagfilter_partily_view');
	partily_view_obj.show();
	
	if (jQuery('#' + sltid,partily_view_obj).size() < 1){
		partily_view_obj.append('<select id="'+ sltid + '" multiple="multiple" name="'+ sltid +'[]"></select>');
	}
	
	var sltobj = jQuery('#' + sltid,partily_view_obj);
	
	// 清空原始的子节点
	sltobj.multiselect2side('destroy');
	sltobj.empty();
	
	if ( !psfp_tagfilter_tag_catalogs[cid] ) {
		partily_view_obj.hide();
		return;
	}
	
	var items = psfp_tagfilter_tag_catalogs_detail[cid];
	var selected_items = psfp_tagfilter_json_taglist[cid];
	// 渲染selector
	var sltdom = sltobj.get(0);
	for (var i=0; i < items.length; i++){
		var tag_id = items[i]['id'];
		if (!psfp_tagfilter_tags[tag_id]) continue;
		
		sltdom.options[i] = new Option(psfp_tagfilter_tags[tag_id],tag_id);
		
		if (selected_items && selected_items.length > 0){
			for(var ja=0;ja<selected_items.length;ja++){
				if (selected_items[ja] == tag_id){
					sltdom.options[i].selected = true;
					break;
				}
			}
		}
	}
	
	jQuery('option:contains("kendelete-")',sltobj).each(function(){
		jQuery(this).text(jQuery(this).text().replace('kendelete-','')).css({color: 'gray','text-decoration': 'line-through'});
	});
	
	sltobj.multiselect2side({
		selectedPosition: 'right',
	    search: "搜索: ",
		labeldx: '本色族拥有的颜色',
		labelTop: '居顶',
		labelBottom: '居底',
		labelUp: '上',
		labelDown: '下',
		labelSort: '排序',
		rightSel_after_remove: function(leftSel,rightSel){
			// rgt->lft: 
			//console.log(cid,'rgt->lft');
			var tt = [];
			rightSel.find('option').each(function(){
				tt[tt.length] = jQuery(this).val();
			});
			psfp_tagfilter_json_taglist[cid] = tt.length < 1 ? null : tt;
			psfp_tagfilter_selected_view_rendor();
		},
		leftSel_after_remove: function(leftSel,rightSel){
			// lft->rgt: 
			//console.log(cid,'lft->rgt');
			var tt = [];
			rightSel.find('option').each(function(){
				tt[tt.length] = jQuery(this).val();
			});
			psfp_tagfilter_json_taglist[cid] = tt.length < 1 ? null : tt;
			psfp_tagfilter_selected_view_rendor();
		},
	});
	$('.SelSort').css("display","none");
} 
</script>

 

 

 

 

 

评论

2 楼 vb2005xu 2012-11-19  

对 multiselect2side jQuery plugin 插件里面的代码做了些调整:

在 没有修改其原有使用方式的基础上新增了几个事件.

新增事件: <leftSel 指代有效区域的 select (默认是左边), rightSel 指代选取区域的 select (默认是右边)>

1. leftSel_dblclick
双击 leftSel 中的列表项 触发的事件
缺省是将此项从 leftSel 中移除,并将其追加到 rightSel 中,如果定义了 leftSel_after_remove 事件,此处也会调用
重写此事件能够替换其缺省方式,也不会触发

<demo>
leftSel_dblclick: function(){
// $(this) 此处this指代 leftSel 对象[ 要过滤 选中的项可以使用选择器 option:selected ]
}
</demo>

2. rightSel_dblclick
双击 rightSel 中的列表项 触发的事件
缺省是将此项从 rightSel 中移除,并将其追加到leftSel中,如果定义了 rightSel_after_remove 事件,此处也会调用
重写此事件能够替换其缺省方式

<demo>
rightSel_dblclick: function(){
// $(this) 此处this指代 rightSel 对象[ 要过滤 选中的项可以使用选择器 option:selected ]
}
</demo>

3. leftSel_after_remove,rightSel_after_remove
默认情况下
> >> 按钮点击 如果定义了 leftSel_after_remove 事件,此处会触发
< << 按钮点击 如果定义了 rightSel_after_remove 事件,此处会触发
当未重写 leftSel_dblclick 时,如果定义了leftSel_after_remove 事件,此处会触发
当未重写 rightSel_dblclick 时,rightSel_after_remove 事件,此处会触发

<demo>
leftSel_after_remove: function(leftSel,rightSel){
// rgt->lft: 移除时相应的减少被选中的色族
// 参数 leftSel,rightSel同上说明
},
rightSel_after_remove: function(leftSel,rightSel){
// rgt->lft: 移除时相应的减少被选中的色族
// 参数 leftSel,rightSel同上说明
},
</demo>

4. rightSel_after_move
在 使用 居顶/上/下/居底 按钮对 rightSel 中的项进行上下调整时 如果定义了 rightSel_after_move 事件,此处会触发

<demo>
rightSel_after_move: function(rightSel){

},
</demo>

5. customCommand
自定义按钮,对缺省情况下提供操作 rightSel 对象的按钮进行扩充,此选项对应一个数组,允许定义多个按钮,例如
其中每个按钮都是一个对象,包括以下几个属性
{
cmdclass:  定义按钮的命令标识(此标识最好不使用SelSort/MoveUp/MoveDown/MoveTop/MoveBottom这五个内部使用的按钮标识)
title: 设置鼠标放置此按钮上显示的提示信息
label: 设置此按钮的标签
style: 是一个对象,用于设置此按钮的样式
eventMt: function(rightSel){
用于对此按钮进行事件绑定,参数是 rightSel 对象
}

}

<demo>
customCommand: [
{
cmdclass: 'SetDefaultColor',title: '设置色族的默认颜色',label: '默认色',
style: {
color: 'pink','background-color': 'gray'
},
eventMt: function(rightSel){
var selectedDx = rightSel.find("option:selected");
if (selectedDx.size() != 1){
return alertMsg.error("每次只能操作一种颜色");
}
rightSel.find('option.default_color').each(function(){
jQuery(this).removeClass('default_color');
if (jQuery(this).hasClass('delete_color')){
jQuery(this).css({color: 'gray'});
}else {
jQuery(this).css({color: ''});
}
});
selectedDx.addClass('default_color').css({color: 'pink'});

// console.log(selectedDx.get(0));
vo.setDefaultColorId(dataInput.cg_id,selectedDx.val());
}
}
]
</demo>

1 楼 vb2005xu 2012-11-14  

http://www.jsonml.org/bst/example/