写在前面:仅用于记录自己学习
菜单模块依旧采用异步加载的方式,但是希望以树状图的形式显示。
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);"> <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)表示不作任何操作,这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作。