自己动手增强 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效果