- 浏览: 136150 次
- 性别:
- 来自: 郑州
文章分类
最新评论
-
memoryisking:
jconsole的使用其实并不复杂,主要是对jvm的一些概念要 ...
如何使用jconsole监控tomcat -
shuaijie506:
wanghuiyan08 写道你这个怎么会和easyui 的c ...
一个基于jquery的简单下拉框实现 -
wanghuiyan08:
一个基于jquery的简单下拉框实现 -
wanghuiyan08:
你这个怎么会和easyui 的combogrid 有冲突呢,只 ...
一个基于jquery的简单下拉框实现 -
lw07100015:
就是不靠谱 ,奇怪的东西,根本用不了。哎,包里面都是点垃圾东西 ...
下拉树(下拉页面)的实现
项目中使用的是easyui的组件,后来发现在编辑页面中,如果combobox组件数量过多,会导致页面超级慢,还有可能造成浏览器崩溃,经过研究easyui的源码发现,combobox是由多个html对象组成的,而且每个combobox有一个单独的下拉面板,如果页面上有100个下拉框组件,每个组件中有500个元素,这样一个页面中隐藏的下拉面板中就会有50000个下拉元素对象,怪不得页面那么慢呢,前一段有时间就自己写了一个简单的下拉框,为与combobox区别,取名叫scombobox,实现的原理是页面中所有下拉框共用一个下拉面板,面板中的内容根据内容自动筛选,并能根据输入的拼音进行模糊匹配并用着重色标识出来,而控件则仍使用<input type=text>,只不过给它加上了下拉框的样式,这样感觉就简单了好多,最后效果也不错,附件中是一个完整的演示例子。
亲测在IE6、IE8、IE9、Chrome23、Firefox17、Oprea12下可用
jQuery.basePath=function(filename){ var eles = document.getElementsByTagName('script'); for(var i=0;i<eles.length;i++){ var src = eles[i].getAttribute('src'); if(src&&src.indexOf(filename)==src.length-filename.length){ return src.substr(0,src.indexOf(filename)); } } }; (function($){ $.fn.scombobox = function(opt,data){ if(typeof(opt)=='string'){ return $.fn.scombobox.method[opt](this,data); } else{ return $.fn.scombobox.method.init(this,opt); } }; $.fn.scombobox.defaults={panels:{},valueField:'id',textField:'text',width:'auto',panelWidth:'auto',panelHeight:150, value:null,multiple:false,separator:',',editable:true,disabled:false,maxOptions:50, filter:function(key,row){ if(!key)return {position:0,length:0}; if((pos=row[this.textField].indexOf(key))>=0){ var ary = [key];ary.position=pos; return ary; } return $.pinyin?$.pinyin.filter(row[this.textField],key):false; } }; $.fn.scombobox.method={ init:function(target,options){ return init(target,options); }, options:function(target){ return target.data('options'); }, getValue:function(target){ return $(target[0]).data('scombo-val').val(); }, getValues:function(target){ return $(target[0]).data('scombo-val').val().split($(target[0]).data('options').separator); }, getText:function(target){ return target.val(); }, setValue:function(target,val){ validate(target,true); var valInput = $(target[0]).data('scombo-val').val(val); changeEvt($(target[0]),valInput); return target; }, setValues:function(target,val){ validate(target,true); var valInput = $(target[0]).data('scombo-val').val(val.constructor==Array?val.join($(target[0]).data('options').separator):val); changeEvt($(target[0]),valInput); return target; }, setText:function(target,text){ validate(target,true); return target.val(text); }, valuebox:function(target){ return target.data('scombo-val'); }, remove:function(target){ target.data('scombo-val').remove(); return target.remove(); }, showPanel:function(target,event){//触发面板显示的事件 return showPanel(target,event); }, hidePanel:function(target){ validate(target,true); var th = $(target),div=th.data('scombo-panel'); div.hide(); changeEvt(th); return th; }, disable:function(target){ target.data('options').disabled=true; $(document).trigger('click',[true]); return target.attr('disabled',true); }, enable:function(target){ target.data('options').disabled=false; validate(target,true); return target.attr('disabled',false); }, editable:function(target,editable){ target.data('options').editable=editable; validate(target,true); return target; } }; function init(target,options){ if(!$.pinyin){ $.getScript($.basePath('jquery.easyui.min.js')+'pinyin.js'); } var opt = $.extend({},$.fn.scombobox.defaults,options); target.attr('autocomplete', 'off').data('options',opt).unbind('.scombo'); if(!$.fn.scombobox.defaults._panel){//如果还没有创建面板,则新建面板 var div =$.fn.scombobox.defaults._panel= $('<div class="scombo-panel"></div>').appendTo('body').bind('mousedown',function(){return false;}); div.hide(); } target.bind('dataloaded.scombo',dataloadedEvent); validate(target,true); target.data('scombo-panel',$.fn.scombobox.defaults._panel);//将下拉面板绑定到输入框上 target.each(function(){ var th=$(this),opt=$.extend({},$.fn.scombobox.defaults,parseOption(this),options); th.data('options',opt); var valInput = $('<input type=hidden >').attr('name',th.attr('name')).insertBefore(this); if(th.attr('tagName').toLowerCase()=='select'){//如果是select,需要将Select隐藏,显示input th = $('<input type=text autocomplete=off>').insertBefore(this).bind('dataloaded.scombo',dataloadedEvent).data('options',opt).data('scombo-panel',$.fn.scombobox.defaults._panel); var domAttrs = {type:true,outerHTML:true,innerHTML:true,outerText:true,innerText:true,tagName:true,textContent:true,localName:true,nodeName:true,baseURI:true,namespaceURI:true}; for(var p in this){ try{if(this[p]&&!domAttrs[p]&&typeof(this[p])=='string')th.attr(p,this[p]);}catch(e){;} } th.attr('style',$(this).attr('style')); $(this).remove(); target.push(th[0]); } //设定隐藏域的值 valInput.val(getVal(opt.value,th.val())); th.addClass('scombo-box').attr('readonly',opt.disabled).attr('scombo-name',th.attr('name')).removeAttr('name').val('') .data('scombo-val',valInput).data('old-val',valInput.val()).bind('click.scombo focus.scombo paste.scombo keyup.scombo type.scombo',function(event){ $.fn.scombobox.method.showPanel(this,event);return $.event.fix(event).type=='paste';//只有粘贴事件冒泡,其它事件不冒泡 }); if(opt.width&&opt.width!='auto'){//处理宽度 var wid=getVal(opt.width,th.outerWidth()); th.width(wid); if(th.outerWidth()!=wid){//防止不同盒子模型解析的宽度不一致 th.width(wid-(th.outerWidth()-wid)).height(18); } } }); if(opt.url){//最后再从服务器加载内容,以免取不到VALUE隐藏字段 $.post(opt.url,opt.params,function(data){ try{ var ary = $.parseJSON(data); } catch(e){;} opt.data = ary||data; target.trigger('dataloaded');//触发数据加载成功事件 }); } else{//触发数据加载成功事件 target.trigger('dataloaded'); } return target; } function showPanel(target,event){ var th = $(target),div=th.data('scombo-panel'),opt=th.data('options'); if(!opt||opt.disabled)return th;//禁用时直接返回,不显示下拉面板 var pos = th.offset(); pos.top+=th.outerHeight()+2; pos.width = getVal(opt.panelWidth,th.outerWidth()-1); pos.height = getVal(opt.panelHeight,''); div.css(pos);//定位 if(event){ var evt = $.event.fix(event),kc=evt.keyCode; if(evt.type!='click'&&evt.type!='focus'){ if(kc==13){//回车 if((item=$('.hover',div)).length>0){ th.val(item.text()); th.data('scombo-val').val(item.attr('value')); th.removeData('keypress'); $(document).trigger('click',[true]); return; } } else if(kc==38){//向上 if($('.hover',div).length==0){ var item=$('.scombo-item:last',div).addClass('hover'); makeCenter(div,$('.hover:first',div)); } else{ var item = $('.hover',div); if(item.prev().length>0){ makeCenter(div,$('.hover:first',div)); item.removeClass('hover').prev().addClass('hover'); } } return; } else if(kc==40){//向下 if($('.hover',div).length==0){ $('.scombo-item:first',div).addClass('hover'); makeCenter(div,$('.hover:first',div)); } else{ var item = $('.hover',div); if(item.next().length>0){ makeCenter(div,$('.hover:first',div)); item.removeClass('hover').next().addClass('hover'); } } return; }//非控制按键和功能按键8==BACKSPACE,32=SPACE,48-57=0-9,65-90=A-Z,96-111=小键盘,186-222=大键盘上的特殊字符 else if(kc==8||kc==32||(kc>=48&&kc<=111)||kc>=186){ th.data('keypress',1); } } } var key = event&&(evt.type=='keyup'||evt.type=='type')?th.val():null;//非键盘事件触发时,展开所有选项 if((div.data('scombo-box')&&div.data('scombo-box')[0]!=th[0])||div.data('scombo-box',th).css('display')=='none'){ if(div.data('scombo-box')&&div.data('scombo-box')[0]!=th[0]){ $(document).trigger('click',[true]); div.data('scombo-box',th); } $(document).bind('mousedown.scombo',function (event,hidePanel){//页面中其他位置的点击事件,点击后隐藏下拉面板 var obj = $($.event.fix(event).target); if(!$.fn.scombobox.defaults._panel){ return; } var th = $.fn.scombobox.defaults._panel.data('scombo-box'); if(!hidePanel&&th[0]==obj[0]){ return; } var opt = th.data('options'); if(th.data('keypress')){//如果用户使用键盘输入了,则进行显示值处理 if(opt.editable){//可写时,将写入的内容存到VALUE字段中 th.data('scombo-val').val(th.val()); } else{ var text = '',vals=th.data('scombo-val').val().split(opt.separator); for(var i=0;i<opt.data.length;i++){ if((pos=vals.indexOf(opt.data[i][opt.valueField]))>=0){ text+=opt.separator+opt.data[i][opt.textField]; vals.splice(pos,1); } } th.val(text.substr(opt.separator.length)); } } changeEvt(th); $.fn.scombobox.defaults._panel.removeData('last-key').removeData('keypress').hide(); $(document).unbind('mousedown.scombo');//解绑本事件 }); fillData(div,opt,null);//第一次显示下拉选项时,展开所有选项 } if(div.data('last-key')!=key){ div.data('last-key',key); fillData(div,opt,key); } return th; } function changeEvt(th,valInput){ if(!th||th.length==0)return; valInput=valInput||th.data('scombo-val'); if(valInput.val()!=valInput.data('old-val')){ th.trigger('change',[valInput.val(),valInput.data('old-val')]); valInput.data('old-val',valInput.val()); } } function parseOption(target){ var th = $(target),opt={}; for(var p in $.fn.scombobox.defaults){ var val = th.attr(p)+'',dval=$.fn.scombobox.defaults[p]; if(th.attr(p)){ opt[p] = val; if(typeof(dval)=='boolean')opt[p]=val=='true'; else if(typeof(dval)!='string')try{opt[p]=eval(val);}catch(e){;} } } if(!opt.data&&th.attr('tagName')=='SELECT'){ var ary = opt.data = []; $('option',th).each(function(){ ary.push({id:$(this).val(),text:$(this).text()}); }); } return opt; } function dataloadedEvent(){ var opt=$(this).data('options'),val=$(this).data('scombo-val').val(); if(typeof(opt.data)=='string'){//如果data为string类型,则转化成数组对象格式 var tmp = opt.data.replace(/([^:]*):([^,]*),?/g,function($0,$1,$2){ return ',{"'+opt.valueField+'":"'+$1.replace(/"/g,'"')+'","'+opt.textField+'":"'+$2.replace(/"/g,'"')+'"}'; }); opt.data=$.parseJSON('['+tmp.replace(/^,+|,+$/g,'')+']'); } for(var i=0;i<opt.data.length;i++){//将ID翻译成文本 if(opt.data[i][opt.valueField]==val){ $(this).val(opt.data[i][opt.textField]); break; } } } function validate(target, doit){ if ($.fn.validatebox){ var opts = $(target).data('options'); $(target).validatebox(opts); if (doit){ $(target).validatebox('validate').trigger('mouseleave'); } } } function makeCenter(div,item){ div.scrollTop(0); if(pos=item.position()){ div.scrollTop(pos.top-div.height()/2); } } function getVal(exp,defaults){ try{ if(typeof(exp)=='function'){ return parseInt(exp.call(this))||defaults;//如果定义的是FUNCTION,则调用FUNCTION方法获取值,如未返回值或返回的非数字,则使用输入框原宽度 } else{ return parseInt(exp)||defaults;//如果不是有效数字,使用输入框原宽度 } } catch(e){ return defaults; } } function fillData(div,opt,key){//将内容转化成HTML var ary = []; for(var i=0;i<opt.data.length;i++){ if(res=opt.filter(key,opt.data[i])){//根据输入的值对内容进行过滤显示 var idx = ""; text = opt.data[i][opt.textField]; idx = tostr(text.length,3)+tostr(res.position,4)+tostr(res.length,3); if(res.length>0){//对匹配出的字串进行着色表示 for(var j=0;j<res.length;j++){ text = text.replace(res[j],'<span class=key>'+res[j]+'</span>'); } } ary.push({id:opt.data[i][opt.valueField],text:text,idx:idx}); } } for(var i=1;i<ary.length;i++){//对数组按idx进行排序 for(var j=0;j<ary.length-i;j++){ if(ary[j].idx>ary[j+1].idx){ var tmp = ary[j]; ary[j]=ary[j+1];ary[j+1]=tmp; } } } var htm = ''; var max = key?Math.min(opt.maxOptions,ary.length):ary.length;//过滤时只显示设定的最多项目,否则显示全部内容 for(var i=0;i<max;i++){//转化为HTML文本 if(!opt.multiple||ary[i].id){//多选时,只有VALUE不为空时才显示 htm+='<div class=scombo-item value="'+ary[i].id+'">'+ary[i].text+'</div>'; } } div.html(htm).toggleClass('multiple-combo',opt.multiple).scrollTop(0).show(); if($('.scombo-item:first',div).text()==$('.scombo-item:first>span',div).text()){ $('.scombo-item:first',div).addClass('hover'); } if(val=div.data('scombo-box').data('scombo-val').val()){//如果值不为空,则选中对应的选项 if(opt.multiple){//多选 $.each(val.split(opt.separator),function(){ $('.scombo-item[value="'+this+'"]:first').addClass('selected'); }); } else{//单选 $('.scombo-item[value="'+val+'"]:first').addClass('selected'); } makeCenter(div,$('.selected:first',div)); } $('.scombo-item',div).bind('mousedown.sombo',function(){//增加选项单击事件 var target = $(this).parent().data('scombo-box'),th=$(this),opt=target.data('options'); if(opt.multiple){//多选 th.toggleClass('selected'); var ids=[],texts=[]; $('.selected',div).each(function(){ ids.push($(this).attr('value')); texts.push($(this).text()); }); target.data('scombo-val').val(ids.join(opt.separator)); target.removeData('keypress').val(texts.join(opt.separator)||''); } else{//单选 target.data('scombo-val').val(th.attr('value')||''); target.val(th.text()||''); target.removeData('keypress');//去掉keypress属性,在调用$(document).click()时,不再将文本值赋到VALUE字段中去 $(document).trigger('mousedown',[true]); } validate(target,true); return false; }).mouseover(function(){ $('.hover',div).removeClass('hover'); $(this).addClass('hover'); }).mouseout(function(){ $(this).removeClass('hover'); }); } function tostr(num,len){ var str = '00000000000000000000'+num; return str.substr(str.length-len); } })(jQuery);
评论
3 楼
shuaijie506
2014-12-09
wanghuiyan08 写道
你这个怎么会和easyui 的combogrid 有冲突呢,只要两者在页面中都用的话,结果是都绑定不上,并且scombobox 样式也出不来,数据也没绑定上。如果页面中吧easyui 的 combogrid 去掉,scombobox 就正常了,请问这是怎么回事
不会和easyui的样式冲突的,你按我附件中的例子做就可以了,我们项目中也用了easyui的,这个scombobox只是我针对easyui中combobox速度慢而写了一个改进的版本,本身是与easyui兼容的
2 楼
wanghuiyan08
2014-07-14
1 楼
wanghuiyan08
2014-07-14
你这个怎么会和easyui 的combogrid 有冲突呢,只要两者在页面中都用的话,结果是都绑定不上,并且scombobox 样式也出不来,数据也没绑定上。如果页面中吧easyui 的 combogrid 去掉,scombobox 就正常了,请问这是怎么回事
相关推荐
这是一款基于jquery.selectlist.js插件实现的下拉框美化特效,简单的jQuery select下拉框美化代码。 js代码 [removed][removed] [removed][removed] [removed] $(function(){ $('select').selectlist({ ...
这是一款基于jquery.selectlist.js插件实现的下拉框美化特效,简单的jQuery select下拉框美化代码。
先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) 城市 <select name=city lay-filter=province> <option xss=removed></option> 北京市 天津市</o
同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个。 先看效果: ...
上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考。 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化。如:选择中国,则另个一下拉框里显示中国各个省份。 传统...
基于jQuery简单的Tab滑动门菜单代码(jQuery MoveTab) 8.简单jquery选项卡插件下载(支持鼠标移上切换、点击切换、Ajax方式切换等) 9.漂亮Tab插件之jQuery自动切换轮播Tab选项卡示例代码 10.实用jquery+CSS实现...
因此,为了实现一个可填写的下拉框有点得不偿失。 基于这种原因,于是私下用jquery写了一个比较简单的多选下拉可填写组合框。 container{ margin: 20px auto; padding:0 15px; width: 50%; heigh
这个控件实现相当简单,基于jQuery实现,只编写一些基本功能,满足一般使用。提供原代码,可以根据自己的项目要求修改,只在IE6、IE7、IE8、IE9中测试。有问题联系邮箱:zliuyao2010@163.com 初始化构造 ;" etop=...
Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...
这也不是难事啦,用过div模拟,用一个隐藏文本域来接受传递的值就OK,国旗开始还想了下,后来换了个思路就迎刃而 解啦,灰常简单的实现,不过我又是用Jquery来实现的哦。不多废话啦,我直接贴代码了。这个我是基于...
Insdep UI For EasyUI 是基于EasyUI 1.5.x 的一款免费的UI工具库,除提供常规EasyUI组件美化,还拥有InsdepUI提供的EasyUI兼容组件及第三方开源插件如:百度编辑器、cropper、Highcharts、justgage、plupload等各类...
6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面...
6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面...