最近用到一个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" οnsubmit="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">',
' ',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>
3058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
