root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

抽取okMenu

v1.0
bobi 2019-05-18 22:50:51 +08:00
parent dac9be277f
commit 233ed2f4a8
2 changed files with 139 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
js/okadmin.js
View File

@ -2,13 +2,15 @@ layui.config({
base: "lib/okPlugins/" base: "lib/okPlugins/"
}).extend({ }).extend({
okTab: "okTab", okTab: "okTab",
okUtils: "okUtils" okUtils: "okUtils",
}).use(["element", "layer", "okTab", "okUtils"], function () { okMenu: "okMenu"
}).use(["element", "layer", "okTab", "okUtils", "okMenu"], function () {
var element = layui.element; var element = layui.element;
var layer = layui.layer; var layer = layui.layer;
var $ = layui.jquery; var $ = layui.jquery;
var okTab = layui.okTab; var okTab = layui.okTab;
var okUtils = layui.okUtils; var okUtils = layui.okUtils;
var okMenu = layui.okMenu;
/** /**
* localhost运行提示 * localhost运行提示
@ -34,78 +36,82 @@ layui.config({
} }
}); });
// TODO 无限级菜单 /**
okUtils.ajax("data/menu.json", "get").done(function (response) { * 生成左侧菜单树
var html = ""; */
for (var i = 0; i < response.length; i++) { okMenu.generatorMenu("data/menu.json", "get");
var d = response[i];
html += liHtml(d);
html += "<a href='javascript:;'>"
html += iconHtml(d) + " " + response[i].title;
html += "</a>"
// var children = d.children;
// if (children != undefined && children.length > 0) {
// html += "<dl class='layui-nav-child'>"
// for (var j = 0; j < children.length; j++) {
// html += "<dd>";
// html += "<a href='javascript:;' path='" + children[j].path + "'>" + iconHtml(children[j]) + " " + children[j].title + "</a>";
// html += "</dd>";
// }
// html += "</dl>"
// }
var temp = createMenu(d.children);
html += temp;
html += "</li>";
}
$(".layui-nav-tree").html(html);
element.render("nav");
}).fail(function (error) {
console.log(error)
});
function liHtml(obj) { // okUtils.ajax("data/menu.json", "get").done(function (response) {
var html = ""; // var html = "";
if (obj.spread) { // for (var i = 0; i < response.length; i++) {
html += "<li class='layui-nav-item layui-nav-itemed'>"; // var d = response[i];
} else { // html += liHtml(d);
html += "<li class='layui-nav-item'>"; // html += "<a href='javascript:;'>"
} // html += iconHtml(d) + " " + response[i].title;
return html; // html += "</a>"
} // // var children = d.children;
// // if (children != undefined && children.length > 0) {
// // html += "<dl class='layui-nav-child'>"
// // for (var j = 0; j < children.length; j++) {
// // html += "<dd>";
// // html += "<a href='javascript:;' path='" + children[j].path + "'>" + iconHtml(children[j]) + " " + children[j].title + "</a>";
// // html += "</dd>";
// // }
// // html += "</dl>"
// // }
// var temp = createMenu(d.children);
// html += temp;
// html += "</li>";
// }
// $(".layui-nav-tree").html(html);
// element.render("nav");
// }).fail(function (error) {
// console.log(error)
// });
function iconHtml(obj) { // function liHtml(obj) {
var html = ""; // var html = "";
if (obj.icon) { // if (obj.spread) {
if (obj.font == "iconfont") { // html += "<li class='layui-nav-item layui-nav-itemed'>";
html += "<i class='iconfont'>" + obj.icon + "</i>"; // } else {
} else if (obj.font == "layui-icon") { // html += "<li class='layui-nav-item'>";
html += "<i class='layui-icon'> " + obj.icon + "</i>"; // }
} else { // return html;
html += "<i class='iconfont'>" + obj.icon + "</i>"; // }
}
} else {
console.warn(obj.title, "icon未定义");
}
return html;
}
function createMenu(obj) { // function iconHtml(obj) {
var html = ""; // var html = "";
if (obj != undefined && obj.length > 0) { // if (obj.icon) {
html += "<dl class='layui-nav-child'>" // if (obj.font == "iconfont") {
for (var i = 0; i < obj.length; i++) { // html += "<i class='iconfont'>" + obj.icon + "</i>";
html += "<dd>"; // } else if (obj.font == "layui-icon") {
html += "<a href='javascript:;' path='" + obj[i].path + "'>" + iconHtml(obj[i]) + " " + obj[i].title + "</a>"; // html += "<i class='layui-icon'> " + obj.icon + "</i>";
var children = obj[i].children; // } else {
if (children != undefined && children.length > 0) { // html += "<i class='iconfont'>" + obj.icon + "</i>";
html += createMenu(children); // }
} // } else {
html += "</dd>"; // console.warn(obj.title, "icon未定义");
} // }
html += "</dl>" // return html;
} // }
return html;
} // function createMenu(obj) {
// var html = "";
// if (obj != undefined && obj.length > 0) {
// html += "<dl class='layui-nav-child'>"
// for (var i = 0; i < obj.length; i++) {
// html += "<dd>";
// html += "<a href='javascript:;' path='" + obj[i].path + "'>" + iconHtml(obj[i]) + " " + obj[i].title + "</a>";
// var children = obj[i].children;
// if (children != undefined && children.length > 0) {
// html += createMenu(children);
// }
// html += "</dd>";
// }
// html += "</dl>"
// }
// return html;
// }
/** /**
* 监听导航菜单的点击 * 监听导航菜单的点击

63
lib/okPlugins/okMenu.js
View File

@ -4,7 +4,68 @@ layui.define(["element", "okUtils"], function (exports) {
var okUtils = layui.okUtils; var okUtils = layui.okUtils;
var $ = layui.jquery; var $ = layui.jquery;
var okMenu = {} var okMenu = {
generatorMenu: function (url, method) {
okUtils.ajax(url, method).done(function (response) {
var html = "";
for (var i = 0; i < response.length; i++) {
var d = response[i];
html += okMenu.liHtml(d);
html += "<a href='javascript:;'>"
html += okMenu.iconHtml(d) + " " + response[i].title;
html += "</a>"
var temp = okMenu.createMenu(d.children);
html += temp;
html += "</li>";
}
$(".layui-nav-tree").html(html);
element.render("nav");
}).fail(function (error) {
console.log(error)
});
},
liHtml: function (obj) {
var html = "";
if (obj.spread) {
html += "<li class='layui-nav-item layui-nav-itemed'>";
} else {
html += "<li class='layui-nav-item'>";
}
return html;
},
iconHtml: function (obj) {
var html = "";
if (obj.icon) {
if (obj.font == "iconfont") {
html += "<i class='iconfont'>" + obj.icon + "</i>";
} else if (obj.font == "layui-icon") {
html += "<i class='layui-icon'> " + obj.icon + "</i>";
} else {
html += "<i class='iconfont'>" + obj.icon + "</i>";
}
} else {
console.warn(obj.title, "icon未定义");
}
return html;
},
createMenu: function (obj) {
var html = "";
if (obj != undefined && obj.length > 0) {
html += "<dl class='layui-nav-child'>"
for (var i = 0; i < obj.length; i++) {
html += "<dd>";
html += "<a href='javascript:;' path='" + obj[i].path + "'>" + okMenu.iconHtml(obj[i]) + " " + obj[i].title + "</a>";
var children = obj[i].children;
if (children != undefined && children.length > 0) {
html += okMenu.createMenu(children);
}
html += "</dd>";
}
html += "</dl>"
}
return html;
}
}
exports("okMenu", okMenu); exports("okMenu", okMenu);
}); });