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