众筹网

众筹网"/>

众筹网

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

菜单模块

• ztree
• 绑定单击事件几种方式：
• 增、删、改的步骤
• href="javascript:void(0);"作用

ztree

网址：.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文档： .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)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作。