动态加载菜单栏

动态加载菜单栏

1 从数据库获得菜单项。 （AJAX方式提交， 字符串方式返回到前台  ） 例如：

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row id="1">
    <cell>73</cell>
    <cell>我要购买的服务</cell>
    <cell />
    <cell>0</cell>
  </row>
  <row id="2">
    <cell>74</cell>
    <cell>我已购买的服务</cell>
    <cell />
    <cell>0</cell>
  </row>
  <row id="3">
    <cell>75</cell>
    <cell>我的绩效评价</cell>
    <cell />
    <cell>0</cell>
  </row>
  <row id="4">
    <cell>78</cell>
    <cell>查询统计</cell>
    <cell />
    <cell>0</cell>
  </row>
  <row id="5">
    <cell>79</cell>
    <cell>互动交流</cell>
    <cell />
    <cell>0</cell>
  </row>
  <row id="6">
    <cell>84</cell>
    <cell>办理事项</cell>
    <cell>/yw/yw003/searchdbsx.do</cell>
    <cell>73</cell>
  </row>
  <row id="7">
    <cell>87</cell>
    <cell>办理事项</cell>
    <cell>/yw/yw004_Ygmfw_searchBlsx.do</cell>
    <cell>74</cell>
  </row>
  <row id="8">
    <cell>90</cell>
    <cell>办理事项</cell>
    <cell>/pj/pj001_jxpj_ysdw.do</cell>
    <cell>75</cell>
  </row>
  <row id="9">
    <cell>99</cell>
    <cell>购买服务查询</cell>
    <cell>/cx/cx002_wygmfw_search.do</cell>
    <cell>78</cell>
  </row>
  <row id="10">
    <cell>105</cell>
    <cell>常见问题</cell>
    <cell>/hd/hd001/cjwtlistinit.do?type=qt</cell>
    <cell>79</cell>
  </row>
  <row id="11">
    <cell>106</cell>
    <cell>我的咨询</cell>
    <cell>/hd/hd002/searchlxwm.do?type=user</cell>
    <cell>79</cell>
  </row>
</rows>

 

 

 

  $(function(){
      var gn = "<c:out value="${param.gn}"/>";
    $.post("<%=basePath%>/getGns.do","",function(res){
      var rows = res.getElementsByTagName("row");
      for(i = 0; i < rows.length; i++) {
       alert(  $(  ".ullevel1" ).html()   );
     var chld = $(rows[i]).children();
     if($(chld[3]).text()=="0")
      $("#gns").append("<li class=lishow><div menu style='cursor: pointer'>" + $(chld[1]).text() + "</div><ul gnid=" + $(chld[0]).text() + " class=ullevel2></ul></li>");
     else {
      var elm = "<li gnid=" + $(chld[0]).text() + "><a href='/zfgmfw" + $(chld[2]).text();
      if($(chld[2]).text().indexOf("?") == -1)
       elm += "?";
      else
       elm += "&";
      elm += "gn=" + $(chld[0]).text() + "'>" + $(chld[1]).text() + "</a>";                        
      if($(chld[0]).text() == gn)
       elm += "&nbsp;&nbsp;<img src='/zfgmfw/public2/images/menu_li.gif'/>";
      elm += "</li>";
      $("ul[gnid=" + $(chld[3]).text() + "]").append(elm);
     }
    }

 

    $("li div[menu]").click(function(){
     if($(this).parent().hasClass("lishow")) {
        $(this).parent().removeClass("lishow");
        $(this).parent().addClass("lihide");
        $(this).next().hide("slow");
       } else {
        $(this).parent().removeClass("lihide");
        $(this).parent().addClass("lishow");
        $(this).next().show("slow");
       }
    });
     });
        });

 

 

 

.lishow {
 background: url(../images/menu_li_1.gif) no-repeat 7px 15px;
}
.lihide {
 background: url(../images/menu_li.gif) no-repeat 7px 15px;
}