mvc3里,用jQuery+json配合实现导航菜单
2014-07-04 09:20:12  By: 568355352@qq.com

最近在做个项目,首页的导航菜单有三级,之前没觉得有多难,后来实现的时候,发现在视图嵌套.net循环 太影响效率了。在查阅资料之后决定用jQuery+json来实现。废话不多说,上代码:

//后台controller的一个action,返回封装好的json。这里我放的是实例类的集合。
public ActionResult getJsonNav()
{
    HomeService home = new HomeService();
    return Json(home.getNavGoods());
}


这里是前台接收json并处理的代码,用ajax。

var jsonNav;
$.ajax({
    url: ´/Home/getJsonNav´, //请求的某个action的地址
    datatype: "json", //只有指定为json下面才可以直接用返回的json数据,否则要转化
    type: ´post´,
    success: function (data) {
        //forTree(data); //该函数中处理json格式的文章数据data;
        jsonNav = data;
        forTree(data);
    },
    beforeSend: function () {
    }
})

递归实现获取无级树数据并生成DOM结构
var forTree = function (data) {
    $.each(data, function (i, item) {
        $(´#IndexBC_left´).append(´<div class="IndexBC_left1"><a href="#"><img src="/Content/img/shouye_tubiao´ + item.ID + ´.png"/>´ + item.TYPE_NAME + ´</a></div>´);
        forSubTree(item.isLeaf);
});

//添加悬停事件,显示次级菜单
if (!$("#IndexBC_left").is(":animated")) {//首先判断是否处于动画状态
    var lis = $("#IndexBC_left .IndexBC_left1");
    //遍历文档树
    lis.each(function (i) {
        $(this).bind("mouseover", i, function () {
            $("#showNav").show();
            var hv = $("#allNav").children().eq(i);
            var str = ´<ul>´ + hv.html();
            str += ´</ul><h4><a href="#">查看全部商品分类</a></h4>´
            $("#showNav").html(str);
            $("#showNav").bind("mouseover", function () {
                $("#showNav").show();
            })
        });
    });
    //控制鼠标移除事件
    $("#IndexBC_left,#showNav").mouseleave(function () {
        $("#showNav").hide();
    });
    }
};
var forSubTree = function (subdata) {
    var str = ´<ul>´;
    $.each(subdata, function (i, item) {
        str += ´<li><p>´ + item.TYPE_NAME + ´</p><br/>´;
        $.each(item.isLeaf, function (i, em) {
        str += ´<a href="SubHome/items?ID=´ + em.ID + ´">´ + em.TYPE_NAME + ´</a>´;
    });
    str += ´</li>´;
    });
    str += ´</ul>´;
    $(´#allNav´).append(str);
};


这里是前台html代码:,样式就不贴了。相信大概思路看懂了就行

<div class="IndexBC_left" id="IndexBC_left">
</div>
<!-- 子菜单 -->
<div class="SY" id="showNav">
<!--<h4><a href="#">查看全部商品分类</a></h4>-->
</div>
<!-- 隐藏菜单 -->
<div id=´allNav´ style="display: none;">
</div>


最后感谢龙龙给我的帮助哈

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+