众筹网-菜单模块

写在前面：仅用于记录自己学习

菜单模块依旧采用异步加载的方式，但是希望以树状图的形式显示。

ztree

网址：http://www.treejs.cn/v3/main.php#_zTreeInfo

使用ztree的步骤：
1、在项目中拷贝ztree的jquery的js以及css文件
2、在需要使用ztree树的页面中引入ztree的文件
3、准备ztree的配置对象setting[json：配置如何解析生成ztree树]
4、准备数据源[要显示到ztree树中的数据，以后都是异步加载的]
5、在页面中准备要显示树的容器<ul class="ztree" id="xxx">
6、通过ztree的初始化方法，根据配置对象加载数据源数据解析成树状图标签设置到容器中显示。

$.ajax({
    "type":"get",
    "url":"${PATH}/menu/menus",
    "success":function (menus) {
        console.log(menus);
        var setting = {};
        var zNodes = menus ;
        //初始化生成ztree树   返回ztree树的对象
        //参数1：容器元素对象 ， 参数2：配置 ， 参数3：数据源
        var $ztreeObj = $.fn.zTree.init( $("#hello") , setting  , zNodes );
        //设置ztree树自动展开
        $ztreeObj.expandAll(true);
    }
});

还有很多小细节此处略（可参考ztree的API文档： http://www.treejs.cn/v3/api.php.）

绑定单击事件几种方式：

1、利用id属性

<button type="button" id="addChildMenuBtn" class="btn btn-primary">新增</button>

   //给新增模态框的提交按钮绑定单击事件：点击时提交新增请求，成功后关闭模态框、刷新菜单
    $("#addChildMenuModal #addChildMenuBtn").click(function () {
        $.ajax({
            "type":"post",
            "url":"${PATH}/menu/save",
            "data":$("#addChildMenuModal form").serialize(),
            "success":function (result) {
                if("ok"==result){
                    $("#addChildMenuModal").modal("hide");
                    //重新加载菜单树
                    initMenusTree();
                    layer.msg("新增菜单成功");
                }
            }
        })
    });

2、利用class属性

3、在标签内部指定onclick属性值，直接加οnclick=XXX()，然后在全局写函数，标签生成被点击后，会自动到全局找XXX（）函数，找到后通过函数引用调取函数即可。

<a onclick="addChildMenu('+treeNode.id+')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="javascript:void(0);">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>'

//按钮组的增删改单击事件
    function addChildMenu(pid){
        //console.log(this);this代表系统Windows对象，不代表被点击的按钮
        // alert("增加"+pid);
        //设置pid回显
        $("#addChildMenuModal form input[name='pid']").val(pid);
        //当函数调用的时候，显示模态框
        $("#addChildMenuModal").modal("show");
    }

这里，给增删改按钮绑定单击事件的是方式3，给模态框中的确定按钮绑定单击事件是用的方式1，以前也用过方式2。

增、删、改的步骤

首先准备一个模态框（直接在BootStrap里面的JavaScript插件中找）；
给增删改的图标绑定单击事件；
增：回显pid,显示模态框，之后给模态框的确定按钮绑定单击事件，点击后发起异步请求，后台处理，请求成功后关闭模态框并重新加载菜单栏。
改：回显需要修改的值，通过后台代码，显示在模态框中，之后后给模态框的确定按钮绑定单击事件，点击后发起异步请求，后台处理，请求成功后关闭模态框并重新加载菜单栏。
删：不需模态框，直接给一个确定删除的提示，直接删除就好了。

增、改有两次绑定单击事件，一次是点击相应增改按钮后，将需要的数据提交给后台请求回显到模态框，显示模态框，一次是模态框中的确定按钮，将增加或修改的数据发生异步请求，提交给后台，之后处理成功后，关闭模态框，重新加载菜单栏

href="javascript:void(0);"作用

javascript:是伪协议，表示url的内容通过javascript执行。void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作。