1.首先要引入jQuery.js和jquery-ui-1.9.2.custom.js
2.在页面中只需要用一个标签div的标签就ok
3.然后引入相应的js代码
4.代码开发出来了，但是具体的html以及css是否要在js中完成有待改善，否则，如果数据过多则加载比较慢
// $(function () { var changeBeforeHeight = 'auto';//定义变量，接收放大前的高度 var changeBeforeWidth = '304px';//定义变量，接收放大前的宽度 var _data = []; $.fn.setData = function (data) { _data = data; }; var getData = {}; $.fn.getseldata = function () { return getData; }; var getkeydata = {}; $.fn.getselkeydata = function () { return getkeydata; }; $.fn.showData = function(obj){ var $inpSearch = $(this).find(".inpSearch"); $inpSearch.val(obj.name); $(this).prop("data-id",obj.id); }; /*函数的入口*/ $.fn.zc_select = function (entryParam) { entryParam.shownum = { "minnum": "30", "maxnum": "500" } //获取调用当前方法的对象，$(this)就是调用的对象 var $this = $(this); /*追加页面代码*/ $("body").after( '<div class="table-responsive" id="layerContent" style="display: none;overflow: hidden">' + '<div class="topTitle topInformation clearfix">' + '<p><span class="selectSpan" style="color:#fff;margin:0 8px;">选择</span><span id="selectTitle" style="color:#fff;">选择信息</span></p>' + '<p><label class="Maximization" style="color:#fff;">最大化</label>' + ' <label class="" id="selectClose" style="color:#fff;margin-right: 10px;" >关闭</label></p>' + ' </div>' + '<div class="f2Title ">' + ' <div class="clearfix" style="border: 1px solid #ccc;background: #FFEB3B;">' + '<p class="f2P1" style="float: left;margin-right: 0;margin-bottom:0px;"><label style="margin-left:5px;">查找</label><input style="margin-right: 0px;margin-top: 3px;" id="inp" type="text"/><button type="button" style="margin-left: 5px;font-size: 12px;margin-top: -3px; padding: 0px 9px;" class="btn btn-primary lookup">查找</button></p>' + '<p style="float: left;margin-right:0px;margin-bottom: 0px;" class="pFresh"><a href="javascript:void (0);" style="display: inline-block;height: 16px;line-height: 25px;margin-right: 10px;">刷新</a></p>' + '</div>' + ' <p class="Ptitle " id="f2" style="clear: both"></p>' + ' <ul class="ulList"></ul>' + ' </div>' + '</div>'); /*控制样式*/ /*$('.f2Title').css('width','100%');*/ $('.topTitle > p:nth-child(1)').css({'float':"left","margin":'0px'}); $('.topTitle > p:nth-child(2)').css({"float":"right","margin":"0px"}); $('.topTitle>div>p').css('margin','2px'); $('.clearfix:after').css({"clear":"both","height":"0","content":"","visibility":"hidden", "display":" block"}); $('.pFresh').css({"float":"right","cursor":"pointer"}); $('.ulList').css({"margin":"0","padding-left":"0","height":"160px","overflow-y":"auto","overflow-x":"hidden", "clear":" both","display":"none"}); $('.ulList>li').css({"list-style":"none","cursor":"pointer","display":"block","white-space":"nowrap", "overflow":" hidden","text-overflow":"ellipsis"}); $('.ulList>li:hover').css("background-color",'#60d2dc'); $('.Ptitle').css({"margin":"0px","clear":"both"}); $('.Ptitle>span').css("margin-right","5px"); $('.topInformation').css({'-webkit-box-shadow':"0px 4px 2px #888888",'-moz-box-shadow':"0px 4px 2px #888888",'box-shadow':"0px 4px 2px #888888","padding-top":"7px",'background':'rgb(60, 141, 188)',"margin-bottom":"7px"}); $('#f2').css('float','left'); $('.selectSpan').css('margin-right','10px;'); $this.css("display","inline-block"); //把当前的对象换成input输入框，并判断displaymode的值，来作为加上图片来表示是可以弹窗还是仅仅可以下拉 var imgName =getBasePath()+"/static/pnsadmin/Base/images/admin/default.png"; if (entryParam.displaymode == 1) imgName =getBasePath()+"/static/pnsadmin/Base/images/admin/lager.png"; $this.append( '<div class="floor1Top">' + '<input class="inpSearch"/>' + '<img class="defaultImg" src="' + imgName + '">' + '</div>' + '<ul class="ul">' + '</ul>'); var $inpSearch = $this.find(".inpSearch"); var $ul = $this.find(".ul"); var $defaultImg = $this.find(".defaultImg"); var $layerContent = $("#layerContent"); var $floor1Top = $this.find('.floor1Top'); $layerContent.css({'border':"1px solid #888888","width":"304px","background":"#fff","z-index":"100000"}); /*样式*/ $ul.css({"border": "1px solid darkgray","position":"absolute", "padding": "0px", "margin": "0px", "margin-left": "0px", "display": "none", "height": "200px", "overflow-y": "scroll", "overflow-x": "hidden"}); $ul.find('li').css({"list-style": "none", "cursor": "pointer"}); $floor1Top.css({"position": "relative", "width": "196px"}); $defaultImg.css({"width": "20px", "height": "20px", "position": "absolute", "right": "0px", "top": "3px"}); $inpSearch.css({'width':'198px','margin-right':'0px'}); //$inpSearch.val(entryParam.val); //值为0的时候不弹窗 $defaultImg.on("click", function () { if (entryParam.displaymode == 0) { $inpSearch.focus(); } }); //加载数据 function dealLiData(liDataParmas,showNum,keyField){//liDataParmas：加载的数据 showNum：加载的条数 keyField:隐藏字段显示与不显示 //处理显示的条数 var liStr = ''; for (var i in liDataParmas) { if (i < parseInt(showNum)) { var spanStr = ""; for (var key in liDataParmas[i]) { if (key == keyField) spanStr += "<span style='display: none' title='"+liDataParmas[i][key]+"'>" + liDataParmas[i][key] + "</span>"; else spanStr += "<span style='font-family: Courier New;font-size: 14px' title='"+liDataParmas[i][key]+"'>" + liDataParmas[i][key] + "</span>"; } liStr += "<li>" + spanStr + "</li>"; } } return liStr; } //表头 function dealLiHead (bindData){ var displayStr = ""; for (var j in bindData.fields) { if (bindData.keyfield != bindData.fields[j].name) { displayStr += "<span style='font-family: Courier New;font-size: 14px;font-weight: 500' title='"+bindData.fields[j].caption+"'>" + bindData.fields[j].caption + "</span>"; } else { displayStr += "<span style='display: none' title='"+bindData.fields[j].caption+"'>" + bindData.fields[j].caption + "</span>"; } } return displayStr; } //表头样式 function dealLiHeadStyle(){ //表头 $ul.find("li:eq(0)").css({ "width": parseFloat($ul.css("width").split("px")[0]) - 17 + "px", "background-color": "gainsboro" }); $ul.find("li:eq(1)").css("margin-top", $ul.find("li:eq(0)").css("height"));//数据 } //li的样式 function liStyle(ulObj,isHead){ var i = 0; $(ulObj).find("li").each(function () { $(this).css({"cursor": "pointer"}); $(this).on("mouseover", function () { $(this).css("background-color", "gainsboro").siblings().css("background-color", ""); if(isHead) { $(ulObj).find("li:eq(0)").css({"background-color":"gainsboro","margin-bottom":"20px"}); } }); if(isHead) $(ulObj).find("li:eq(1)").css("margin-top","25px"); if(isHead && i > 0){ $(this).on("mouseout", function () { $(this).css("background-color", ""); }); } //:not(:last-child) $(this).find("span:gt(0)").css({"display": "inline-block", "margin-left": "5px","overflow":'hidden',"text-overflow":"ellipsis","white-space": "nowrap" }); i++; }); return; }; function dealLiClick(){ if (entryParam.showresult.ishead == true) { $ul.one("click", "li:gt(0)", function () { //dealTitleHasNo(); $ul.find('li').unbind("click"); var value = ""; $(this).find("span:gt(0)").each(function () { value += $(this).text() + "|"; }) $inpSearch.val(value.substring(0, value.length - 1)); $ul.css("display", "none"); //获取span的值，放到一个数组里面 var rd = $(this).find("span:eq(0)").text(); var spanArr = (rd + "|" + value.substring(0, value.length - 1)).split("|"); //组装要返回的getseldata数据 var fields = entryParam.binddata.fields; for (var i in fields) { getData[fields[i].name] = spanArr[i]; } //组装要返回的getselkeydata数据 getkeydata[entryParam.binddata.keyfield] = rd; }); }else{ $ul.one("click", "li", function () { /*dealTitleHasNo();*/ $ul.find('li').unbind("click"); var value = ""; $(this).find("span:gt(0)").each(function () { value += $(this).text() + "|"; }) $inpSearch.val(value.substring(0, value.length - 1)); $ul.css("display", "none"); //获取span的值，放到一个数组里面 var rd = $(this).find("span:eq(0)").text(); var spanArr = (rd + "|" + value.substring(0, value.length - 1)).split("|"); //组装要返回的getseldata数据 var fields = entryParam.binddata.fields; for (var i in fields) { getData[fields[i].name] = spanArr[i]; } //组装要返回的getselkeydata数据 getkeydata[entryParam.binddata.keyfield] = rd; }); } } function dealWindowMaxMin(){ var flag = false; $('.Maximization').on('click', function (e) { e.stopPropagation(); if (flag) { $(this).text("最大化"); $('.pFresh').css('float','right'); getwihei(); flag = false; $layerContent.draggable("destroy"); } else if (!flag) { $(this).text("还原"); minWidthHeight(); $layerContent.css('z-index', '999999'); flag = true; $layerContent.draggable({containment: "body", scroll: false, cursor: "move"}); } }); } function dealClose(close,inpEle){ //关闭 $(close).on('click', function () { getwihei(); $layerContent.css('display', 'none'); $inpSearch.val(inpEle.val()); $ul.css('display','none'); }); } function dealLayerDblclick(ulList,inp){ $(ulList).on("dblclick", "li", function () { $(ulList).find('li').unbind("dblclick"); var value = ""; $(this).find("span:gt(0)").each(function () { value += $(this).text() + "|"; }) $(this).css('background', 'gainsboro').siblings().css('background', ''); $(inp).val(value.substring(0, value.length - 1)); //获取span的值，放到一个数组里面 var rd = $(this).find("span:eq(0)").text(); var spanArr = (rd + "|" + value.substring(0, value.length - 1)).split("|"); //组装要返回的getseldata数据 var fields = entryParam.binddata.fields; for (var i in fields) { getData[fields[i].name] = spanArr[i]; } var widthSpan; widthSpan = (100/(filds.length-1))+"%"; $(ulList).find('li').find('span:gt(0)').css('width',widthSpan); //组装要返回的getselkeydata数据 getkeydata[entryParam.binddata.keyfield] = rd; }); } function dealFresh(pFresh,inp,ulList){ pFresh.unbind("click"); $(pFresh).on('click', function () { //清空inp里面的内容 $(inp).val(""); //显示所有的li $(ulList).find("li").css("display", "block"); }); } function dealLookup(lookup,inp,ulList){ $(lookup).on('click', function (e) { e.stopPropagation() var inpVal = $(inp).val(); if ('' != inpVal.trim()) { $(ulList).find('li').find('span:gt(0):contains("' + inpVal + '")').parent().css('display', 'block'); $(ulList).find('li').find('span:gt(0):not(:contains("' + inpVal + '"))').parent().css('display', 'none'); } else { $(ulList).find('li').css('display', 'block'); } }); } //有标题的弹窗 function dealOpenHasTitle(){ var $lookup = $('.lookup'); var $ulList = $('.ulList'); var $inp = $('#inp'); var $selectClose = $('#selectClose'); var $pFresh = $('.pFresh'); var $Ptitle = $('.Ptitle'); /********************字段值未给【判断是否要请求后端数据】*********************************/ //值为1时，点击图标弹窗 $defaultImg.on('click', function () { //清空ul的列表 $ulList.empty(); //把数据显示到弹窗里面 var liStr = ''; var displayStr = ''; /****************表头开始复用****************************/ $Ptitle.empty(); $Ptitle.append(dealLiHead(entryParam.binddata)); //处理弹窗的Ptitle样式 $Ptitle.find('span:gt(0)').css({"width":"89px","cursor":"pointer","overflow":'hidden',"text-overflow":"ellipsis","white-space": "nowrap","height":"18px","display":"inline-block"}); /****************表头结束****************************/ $ulList.append(dealLiData(_data,entryParam.shownum.maxnum,entryParam.binddata.keyfield)).css("display", "block"); /************表头样式复用开始**********************/ liStyle($ulList); /************表头样式复用结束**********************/ $layerContent.css('display', 'block'); //弹窗定位 $layerContent.css({'position': 'absolute', 'top': '10%', 'left': '40%'}); //可以自由拖拽 $layerContent.draggable({containment: "body", scroll: false, cursor: "move"}); //可以自由拉伸弹窗 //$layerContent.resizable(); //将文本框的值添加到弹窗文本框里面并进行自动搜索 $inp.val($inpSearch.val()); $lookup.click(); //隐藏页面中的下拉框 $('.ul').css("display", "none"); }); /***************复用开始***********************/ //放大缩小(zoom in and out:放大与缩小) dealWindowMaxMin(); //点击查询进行搜索显示 dealLookup($lookup,$inp,$ulList); dealLayerDblclick($ulList,$inp); //刷新 dealFresh($pFresh,$inp,$ulList); //关闭 dealClose($selectClose,$inp); } //没有标题弹窗 function dealOpenNotTitle(){ var $lookup = $('.lookup'); var $ulList = $('.ulList'); var $inp = $('#inp'); var $selectClose = $('#selectClose'); var $pFresh = $('.pFresh'); /********************字段值未给【判断是否要请求后端数据】*********************************/ //值为1时，点击图标弹窗 $defaultImg.on('click', function () { //清空ul的列表 $ulList.empty(); //把数据显示到弹窗里面 var liStr = ''; $ulList.append(dealLiData(_data,entryParam.shownum.maxnum,entryParam.binddata.keyfield)).css("display", "block"); liStyle($ulList); $layerContent.css('display', 'block'); //弹窗定位 $layerContent.css({'position': 'absolute', 'top': '10%', 'left': '40%'}); //可以自由拖拽 $layerContent.draggable({containment: "body", scroll: false, cursor: "move"}); //可以自由拉伸弹窗 //$layerContent.resizable(); $inp.val($inpSearch.val()); $lookup.click(); //隐藏页面中的下拉框 $('.ul').css("display", "none"); }); //点击查询进行搜索显示 dealLookup($lookup,$inp,$ulList); /*****************复用开始*************************/ //放大缩小(zoom in and out:放大与缩小) dealWindowMaxMin(); //双击li获取span值放到input框内 dealLayerDblclick($ulList,$inp); //刷新 dealFresh($pFresh,$inp,$ulList); //关闭 dealClose($selectClose,$inp); } if(entryParam.displaymode == 1){ if (entryParam.showresult.ishead == true) {//true：表示显示表头 dealOpenHasTitle(); } else {//表示不显示表头 dealOpenNotTitle(); } } $inpSearch.on({ 'focus': function () {//获取焦点的时候加载数据 $ul.css("display", "block").css("width", parseFloat($(this).css("width").split("px")[0]) + 2 + "px").empty(); if (entryParam.displaymode == 0) {//如果是0，表示是只有下拉框，但是下拉框可以显示单列，也可以显示多列//先判断是否显示下拉框的表头 if (entryParam.showresult.ishead == true) {//true:显示 var liStr = ""; //处理表头 liStr += "<li style='position:absolute;border-bottom: 1px solid darkgray'>" + dealLiHead(entryParam.binddata) + "</li>"; //加载数据开始 liStr += dealLiData(_data,entryParam.shownum.minnum,entryParam.binddata.keyfield); $ul.append(liStr); //加载数据结束 /************表头样式复用开始**********************/ dealLiHeadStyle(); /************表头样式复用结束**********************/ liStyle($ul,true); dealLiClick(); } else {//否则不显示 var liStr = ""; liStr += dealLiData(_data,entryParam.shownum.minnum,entryParam.binddata.keyfield); $ul.append(liStr); liStyle($ul); dealLiClick(); } } else if (entryParam.displaymode == 1) { var $selectTitle = $("#selectTitle"); if (entryParam.title != undefined && entryParam.title != "" && entryParam.title != null) $selectTitle.html(entryParam.title); if (entryParam.showresult.ishead == true) {//true：表示显示表头 var liStr = ""; var displayStr = ""; /****************表头开始复用****************************/ liStr += "<li style='position:absolute;border-bottom: 1px solid darkgray'>" + dealLiHead(entryParam.binddata) + "</li>"; /****************表头结束****************************/ //处理显示的条数 liStr += dealLiData(_data,entryParam.shownum.minnum,entryParam.binddata.keyfield); $ul.append(liStr); /************表头样式复用开始**********************/ dealLiHeadStyle(); /************表头样式复用结束**********************/ liStyle($ul,true); dealLiClick(); } else {//表示不显示表头 var liStr = ''; liStr += dealLiData(_data,entryParam.shownum.minnum,entryParam.binddata.keyfield); $ul.append(liStr); //点击li获取值到input dealLiClick(); liStyle($ul); } } $ul.find('li').css("display", "block"); }, 'keyup': function () {//输入内容的时候将匹配到的值显示出来 var inpVal = $inpSearch.val(); if ("" != inpVal.trim()) { if(entryParam.showresult.ishead == false) { //选择到的时候，把选择的内容的li显示出来 $ul.find('li').find('span:gt(0):contains("' + inpVal + '")').parent().css("display", "block"); //1.1如果搜索不到的输入的内容的时候要把所有内容的li进行隐藏 $ul.find('li').find('span:gt(0):not(:contains("' + inpVal + '"))').parent().css("display", "none"); }else{ var flag = true; $ul.find('li:gt(0)').each(function(){ var obj = $(this).find('span:gt(0):contains("' + inpVal + '")'); if(obj.length && flag){ flag = false; $(obj[0]).parent().css({"display":"block","margin-top":"25px"}); }else{ $(obj[0]).parent().css({"display":"block","margin-top":"0px"}); } }); $ul.find('li:gt(0)').find('span:gt(0):not(:contains("' + inpVal + '"))').parent().css("display", "none"); } /*//1.2请求后台进行搜索， if (a.length === 30) {//如果长度是30，表示没有搜索到任何数据，此时调用ajax请求后台 /!*$.ajax({ url: })*!/ }*/ } else { if(entryParam.showresult.ishead == false) { $ul.find('li').css({"display":"block"}); } else{ $ul.find('li:gt(1)').css({"display":"block","margin-top":"0px"}); $ul.find('li:eq(1)').css({"display":"block","margin-top":"25px"}); } } } }); //还原 function getwihei() { $(".Maximization").text("最大化"); $layerContent.css({"width": changeBeforeWidth, "height": changeBeforeHeight, "top": "10%", "left": "40%"}); document.getElementsByClassName("ulList")[0].style.height = parseFloat(changeBeforeHeight.split("px")[0]) - 80 + 'px'; document.getElementsByClassName("ulList")[0].style.overflowY = 'auto'; } //窗口最大化 function minWidthHeight() { $(".Maximization").text("还原"); changeBeforeHeight = $layerContent.css("height"); changeBeforeWidth = $layerContent.css("width"); $layerContent.css({"width": $("body").css("width"), "height": $("body").css("height"), "top": "0px", "left": "0px"}); document.getElementsByClassName("ulList")[0].style.height = parseFloat(changeBeforeHeight.split("px")[0]) - 78 + 'px'; document.getElementsByClassName("ulList")[0].style.overflowY = 'auto'; } } });大部分是按照报文中定义的格式来写的
2278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
