多级选择菜单——数据加载

    今天介绍下多级选择菜单的实现，及数据的加载。

一、效果图

       

     很简单的一个功能实现，当我们选择筛选条件的时候，下面会显示相对应的数

据，点击清空筛选条件，会清空已选择的条件进行查询。这个类似于淘宝的功能，

很简单，大家一看就会啦，下面具体介绍下怎么实现的。

点击将选择的条件时，将选中的条件放苏已选条件中:(js代码)

$(document).ready(function(){$("#select1 dd").click(function () {$(this).addClass("selected").siblings().removeClass("selected");if ($(this).hasClass("select-all")) {$("#selectA").remove();} else {var copyThisA = $(this).clone();if ($("#selectA").length > 0) {$("#selectA a").html($(this).text());} else {$(".clean").before(copyThisA.attr("id", "selectA"));}}});$("#select2 dd").click(function () {$(this).addClass("selected").siblings().removeClass("selected");if ($(this).hasClass("select-all")) {$("#selectB").remove();} else {var copyThisB = $(this).clone();if ($("#selectB").length > 0) {$("#selectB a").html($(this).text());} else {$(".clean").before(copyThisB.attr("id", "selectB"));}}});$("#select3 dd").click(function () {//$("#select3 dd a").removeAttr('onclick');$(this).addClass("selected").siblings().removeClass("selected");if ($(this).hasClass("select-all")) {$("#selectC").remove();} else {var copyThisC = $(this).clone();if ($("#selectC").length > 0) {$("#selectC a").html($(this).text());} else {$(".clean").before(copyThisC.attr("id", "selectC"));}}});$("#selectA").live("click", function () {$("#loanStatus").val(0);loanList(1);$(this).remove();$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");});$("#selectB").live("click", function () {$("#beginDeadLine").val(0);$("#endDeadLine").val(0);loanList(1);$(this).remove();$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");});$("#selectC").live("click", function () {$("#MinRate").val(0.00);$("#MaxRate").val(0.00);loanList(1);$(this).remove();$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");});$(".select dd").live("click", function () {if ($(".select-result dd").length > 1) {$(".select-no").hide();$(".clean").show();} else {$(".clean").hide();$(".select-no").show();}});});

根据筛选条件，将选择的数据显示到界面中，这里用到了ajax，部分加载页面

/** * 首页-债权转让查询标的信息 */function loanList(num) {if ($(".select-result dd").length > 2) {$(".clean").show();} else {$(".clean").hide();}$("#page").val(num);$.ajax({type : "POST",url : "../invest/queryLoanBot.htm",data : $('#loanForm').serialize(),dataType : "json",async : false,success : function(datas) {var pathName = window.document.location.pathname;var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);if(projectName!="/puhuilicai"){projectName="";}$("#loan").html("");var total=datas.data.total;$("#total").text(total);var str = "";if (datas.data == undefined || datas.data.result == "") {$("#loan").append("<div class='tit'>没有找到相关项目，请您换个条件试试吧~</div>");$("#claimpage").html("");} else {pages=datas.data.pageCount;if(pages==1){document.getElementById("claimpage").style.display="none";//隐藏  }else{document.getElementById("claimpage").style.display="";//显示}laypage({cont : 'claimpage',skin : '#ED5345',pages : pages,// 总页数prev : "<",// 上一页next : ">",// 下一页curr:num,jump : function(obj, first) {// 点击页码出发的事件if (first != true) {// 是否首次进入页面var currentPage = obj.curr;// 获取点击的页码loanList(currentPage);}//返回页面顶部scroll(0,0);}});var i = -1;var divname = "jqm-round-sector";var name = null;$.each(datas.data.result, function(idx, loan) {i++;name = divname + i;//标的名称截取if (loan.name.length > 5) {loanname = loan.name.substring(5,loan.name.length) ;} //判断标的类型的显示样式var key = loan.name.substring(1,2);if (loan.transferStatus == 2) {str += "<div class='content_p content_p1' id='loanBotcontent1'>";} else if (loan.transferStatus == 1) {str += "<div class='content_p' id='loanBotcontent'>";}str += "<div class='content_foot' id=loancontentfoot>"+ "<ul class='title1'  style='clear:both'>";if(key == '核'){str += "<li style='background-color:#ffc029'><a style='color:#FFFFFF;cursor: auto;' title='核心保'>核</a></li>";}else if(key == '零'){str += "<li style='background-color:#ff6666'><a style='color:#FFFFFF;cursor: auto;' title='零供保'>零</a></li>";}else if(key == '政'){str += "<li style='background-color:#1cba34'><a style='color:#FFFFFF;cursor: auto;' title='政通保'>政</a></li>";}else{str += "<li style='background-color:#ffc029'></li>";}    str+= "<li><a href='../ssl/claimDetail.htm?loanId="+ loan.loanId+ "&transferBidId="+ loan.transferBidId + "'>"+ loanname+ "</a>"+ "</li>"+ "</ul>"+ "<div class='content_f_l'>"+ "<div class='title'>"+ "<ul class='title2'>"+ "<li>"+ loan.rate+ "</li>"+ "<li>"+ loan.surplusDay+ "</li>"+ "<li>"+ format_number(loan.actualPayment)+ "</li>"+ "<li>"+ loan.repaymentSource + "</li>"+ "</ul>"+ "<ol class='title3'>"+ "<li>预期到期年化收益率(%)</li>"+ "<li>剩余期限(天)</li>"+ "<li>转让总额(元)</li>"+ "<li>第一还款源</li>"+ "</ol>"+ "</div>"+ "</div>"+ "<div class='content_f_r'>"+ "<ul id='1'>"+ "<li></li>";if (loan.transferStatus == 2) {str += "<li id='loan_bg_grey' style='cursor:not-allowed'><span class='flow'>已完成</span></li>";} else if (loan.transferStatus == 1) {str += "<li id='loan_bg_red' style='cursor:pointer;line-height:0px;'><span class='full'><a style='display:inline-block;line-height:50px;width:140px; height:50px;'  href='../ssl/claimDetail.htm?loanId="+ loan.loanId + "&transferBidId="+ loan.transferBidId + "'>立即购买</a></span></li>"}str += "</ul>" + "</div>" + "</div>" + "</div>" + "</ul>";});$("#loan").append(str);}}})

$("html, body").animate({ scrollTop: 0 }, "quick");}

前台jsp代码

<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>债权转让-普惠理财</title><meta name="renderer" content="webkit"><meta name="keywords" content="普惠理财，普惠，理财，理财投资，理财神器，理财工具，理财管家，理财通，投资理财网，p2p，p2p投资，理财产品，普惠理财官网"/> <meta name="description" content="普惠理财是一家信息完全透明、资金高度安全、收益遥遥领先的网络投资理财平台，专注于为投资人提供以中小微企业应收账款为核心资产的低风险、高收益投融资p2p线上理财服务"/><link rel = "Shortcut Icon" href="${request.contextPath}/resources/img/favicon.ico" ><link rel="stylesheet" href="${request.contextPath}/resources/css/reset.css" /><link rel="stylesheet" href="${request.contextPath}/resources/css/style-top.css" /><link rel="stylesheet" href="${request.contextPath}/resources/css/style-creditors.css" /><link rel="stylesheet" href="${request.contextPath}/resources/css/style-bottom.css" /><link rel="stylesheet" href="${request.contextPath}/resources/css/laypage.css" /><script type="text/javascript" src="${request.contextPath}/resources/js/jquery/jquery.min.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/common.js"></script><script type="text/javascript" src="${ctxPath}/resources/js/layer/laypage.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/invest.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/loanbot.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/layer/layer.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/baidu.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/meiqia.js"></script></head><form id="loanForm" name="loanForm" action="${request.contextPath}/invest/toLoanBot.htm" method="get"><input type="hidden" id="loanType" name="loanType" value="3"/><input type="hidden" id="loanStatus" name="loanStatus" value="${qo.loanStatus}"/><input type="hidden" id="MinRate" name="MinRate" value="${qo.minRate}"/><input type="hidden" id="MaxRate" name="MaxRate" value="${qo.maxRate}"/><input type="hidden" id="beginDeadLine" name="beginDeadLine"  value="${qo.beginDeadLine}"/><input type="hidden" id="endDeadLine" name="endDeadLine"  value="${qo.endDeadLine}"/><input type="hidden" id="page" name="page"  value="${data.page}"/><input type="hidden" id="pageCount" name="pageCount" value="${data.pageCount}"/><input type="hidden" id="rows" name="rows" value="${data.rows}"/></form><body><% include("../frame_top.html"){} %><div id="main"><div class="hope"><div class="hope_zj"><div class="content"><p class="chuangzao">期限短、收益高、累计创造 <span>${bidStatis.incomeSum,numberFormat="#,##0.00"}</span>元收益</p><div class="xiangmu"><ul class="select"><li class="select-list"><dl id="select1"><dt>项目状态：</dt><dd class="select-all selected"><a id="loanStatus0" onclick="loanStatusSel(this,0);">全部</a></dd><dd><a id="loanStatus1" onclick="loanStatusSel(this,1);">转让中</a></dd><dd><a id="loanStatus2" onclick="loanStatusSel(this,2);">已完成</a></dd></dl></li><li class="select-list"><dl id="select2"><dt>剩余期限：</dt><dd class="select-all selected"><a id="trem00" onclick="termSel(this,0,0)">全部</a></dd><dd><a id="trem03" onclick="termSel(this,0,30)">30天及以下</a></dd><dd><a id="trem36" onclick="termSel(this,31,60)">31-60天</a></dd><dd><a id="trem612" onclick="termSel(this,61,90)">61-90天</a></dd><dd><a id="trem120" onclick="termSel(this,91,180)">91-180天</a></dd><dd><a id="trem120" onclick="termSel(this,180,0)">180天以上</a></dd></dl></li><li class="select-list"><dl id="select3"><dt>年化收益：</dt><dd class="select-all selected"><a id="earning00" onclick="earning(this,0.00,0.00)">全部</a></dd><dd><a id="earning08" onclick="earning(this,0.00,8.00)">8%以下</a></dd><dd><a id="earning810" onclick="earning(this,8.00,10.00)">8%-10%</a></dd><dd><a id="earning1012" onclick="earning(this,10.00,12.00)">10%-12%</a></dd><dd><a id="earning1215" onclick="earning(this,12.00,15.00)">12-15%</a></dd><dd><a id="earning15" onclick="earning(this,15.00,0.00)">15%以上</a></dd></dl></li><li class="select-result"><dl><dt>已选条件：</dt><dt class="select-no" id="result_null" style="margin-left: 100px">请添加选择条件</dt><dd class="clean" style="cursor: pointer; font-weight: bold; color: rgb(153, 153, 153);" onclick="clean()" >清空筛选条件</dd></dl><p id="select_num">共为您找到<span id="total">${data.total}</span>个标</p></li></ul></div><ul id="loan"></ul>   <div id="claimpage"  style="float:right;margin-top:10px;margin-right: 40px" href="#"></div></div><div id="footer" style="margin-top: 60px;">                <% include("../frame_bottom.html"){}%></div></div></div><div class="side"><% include("../frame_side.html"){} %></div></div><script type="text/javascript" src="${request.contextPath}/resources/js/invest.js"></script><script>$(function() {$('#register').validation();}) $(document).ready(function() {loanList($('#page').val());//调用分页//$("#frame_top").load("${request.contextPath}/frame_top.htm");});</script><script type="text/javascript" src="${request.contextPath}/resources/js/jquery.SuperSlide.2.1.1.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/backtop.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/JavaScript.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/validate.js"></script><script type="text/javascript" src="${request.contextPath}/resources/js/circle.js"></script></body></html>

      这样一个简单的功能就实现了，这里用到了拼接html页面，前台动态实现的js

技术，可以借鉴下噢~