菜单管理界面的传值和分析
大体顺序:
- tomcat启动解析项目成功后和浏览器建立TCP协议的联系,产生request,reponse默认访问页面调用LoginController中的index方法,跳转到login.html页面;
-
- login.html加载,调用当前页面中方法login,调用后台方法$.post("${basePath}/login/login",LoginController中的login方法,返回成功,跳转"main"页面;
-
- 加载main.html时引入src="${basePath}/res/js/menu.js,同时嵌入了右边首页<div title="首页"><iframe src="${basePath}/tspace/index/index.html" >
- 左边菜单加载,menu.jsz中默认调用方法加载出左侧的菜单栏loadTree,$.post(basePath + "/login/getMenu", LoginController中的getMenu返回一个menulist集合;
- menu.js中的EasyUI特殊的组件加载方式会将菜单信息根据id的直加载出来,一级目录的parent_id为0,其他会根据菜单新建立时存入的id来进行页面的拼接和路径的拼接;
- menu.js还有打开关闭菜单的事件function treeBeforeSelect(node) {通过传入的node获取进行EasyUIt特有的组件的打开和关闭;
- menu.js中点击进入菜单的事件addMainTab,addMainTab方法默认调用访问list或者listPage页面,这是多个页面共享一个js和html页面;
- addMainTab方法每次点击左侧的菜单都会调用,利用EasyUI特有的tabs方法来进行页面的嵌套iframe,src地址为headId和listPage的页面的拼接;
- 加载listPage.html页面会默认调用到方法listData来进行后台方法的访问调用TspaceController中的listPage方法,封装参数并跳转render("listPage.html");
- datagrid组件的调用和dgOptions的参数配置来实现列表的加载,整个页面都是返回的list数据中获取各个属性进行拼接展示出来的,所以多个页面通用
- 调用当前页面中的方法可以实现增加删除修改等;
var initPara = tspaceGetParam(); function add() { top.window.subPage.loadCurrDatagrid = function() { showMsg("增加成功!"); datagrid.datagrid("load"); } top.openWindow("${head.form_name}-增加", getCurrUrl("addPage") + "?" + $.param(initPara), {size: '${head.dialog_size!}'}); } function update() { var rowsSel = datagrid.datagrid("getSelections"); if(rowsSel.length != 1) { showWarnMsg("请选择需要编辑的一条数据!"); return; } var id = rowsSel[0].${head.id_field}; top.window.subPage.loadCurrDatagrid = function() { showMsg("更新成功!"); datagrid.datagrid("reload"); } top.openWindow("${head.form_name}-编辑", getCurrUrl("updatePage") + "?id=" + id, {size: '${head.dialog_size!}'}); } function del() { var ids = []; $.each(datagrid.datagrid("getSelections"), function(i, item) { ids.push(item.${head.id_field}); }); if(ids.length < 1) { showWarnMsg("请选择需要删除的数据!"); return; } confirmMsg("确认删除?", function() { $.post("delete", {id: ids}, function(data) { showMsg("删除成功!"); datagrid.datagrid("reload"); }); }); } function detail() { var rowsSel = datagrid.datagrid("getSelections"); if(rowsSel.length != 1) { showWarnMsg("请选择需要查看的一条数据!"); return; } var id = rowsSel[0].${head.id_field}; top.openWindow("${head.form_name}-详情", getCurrUrl("detailPage") + "?id=" + id, {size: '${head.dialog_size!}'}); } function exportCsv() { var option = datagrid.datagrid("options"); var param = option.queryParams; param.sortName = option.sortName; param.sortOrder = option.sortOrder; window.location.href = "exportCsv?" + $.param(param); }
/** * 增加一个主窗口 */ function addMainTab(text, url) { if(!mainTabs.tabs("exists", text)) { mainTabs.tabs('add',{ title: text, content:'<iframe src="' + url + '" class="easyui-panel" data-options="fit:true,border:false" frameborder="0"></iframe>', closable:true }); }else { mainTabs.tabs("select", text); //刷新 mainTabs.tabs('getSelected').panel('panel').find('iframe').attr("src", url) } }
-
var datagrid = $("#dg"); var dgOptions = { rownumbers:true, fit:true, border:false, rownumbers:true, url:'listData', method:'post', toolbar:'#tb', pageSize: 20, pagination:true, multiSort:true, sortName: getInitParam().sort, sortOrder: getInitParam().order, queryParams: getInitParam(), <#if footerFieldList.size() gt 0>showFooter: true, </#if> columns: [[ {field:'${head.id_field}', checkbox:true} <#list fieldList as item> <#if item.is_show_list == 1 && item.field_name != head.id_field> ,{field:'${item.field_name}', title: '${item.column_name}', width:${item.column_length}, sortable: true <#if item.input_type == 'easyui-filebox_img'>,formatter: function(value){return formatterDgImage(value)}</#if>} </#if> </#list> <#if lineList.size() gt 0> ,{field:'operate', title: '操作', width: window.operateWidth || 120, formatter: function(value, row, index){ var html = ""; <#list lineList as item> html += '<a class="operate" href="###" onclick="btnClick${item.id}(' + index + ')">${item.btn_name}</a>'; </#list> return html; } } </#if> ]], loadFilter: function(data) { if(data.result && data.result == 'fail') { //失败时,错误消息提示 showWarnMsg(data.msg); return {}; }else { return data; } } };
- 10:{id: 3, text: "菜单管理", attributes: "/menu/list", parent_id: 1, iconCls: "glyphicon-menu-hamburger", …}
- 点击菜单管理时会调用到main.html中的menu.js中的打开新窗口的方法,来加载list.html界面;
- 加载men下的list.html界面时访问url: "/menu/listAll",方法MenuController中的listAll方法来获取所有菜单return find("select * from sys_menu order by order_num asc");返回给前台一个json串。
- 0:{create_time: "2016-09-18 18:55:28", parent_id: 9, menu_name: "小说采集", menu_url: "/tspace/17/listPage", icon: "glyphicon-cd", …}
- 1:{create_time: "2016-01-07 21:41:21", parent_id: 1, menu_name: "在线表单", menu_url: "/tspaceHead/list", icon: "glyphicon-cloud", …}
- 2:{create_time: "2016-09-12 22:11:26", parent_id: 9, menu_name: "客户管理", menu_url: "/tspace/15/listPage", icon: "glyphicon-th-list", …}
- 3:{create_time: "2016-01-07 03:32:08", parent_id: 5, menu_name: "角色管理", menu_url: "/tspace/8/listPage", icon: "glyphicon-user", …}
- 4:{create_time: "2017-03-15 23:55:04", parent_id: 1, menu_name: "定时任务", menu_url: "/task/listPage", icon: "glyphicon-tasks", …}
- 5:{create_time: "2016-09-12 22:12:33", parent_id: 9, menu_name: "大盘数据", menu_url: "/tspace/16/listPage", icon: "glyphicon-flag", …}
- 6:{create_time: "2016-09-12 22:10:51", parent_id: 0, menu_name: "内容管理", menu_url: null, icon: "glyphicon-search", …}
- 7:{create_time: "2016-02-16 03:59:22", parent_id: 5, menu_name: "系统用户", menu_url: "/tspace/12/listPage", icon: "glyphicon-king", …}
- 8:{create_time: "2016-12-21 01:12:05", parent_id: 9, menu_name: "图片管理", menu_url: "/tspace/18/listPage", icon: "glyphicon-picture", …}
- 9:{create_time: "2016-01-06 19:37:31", parent_id: 0, menu_name: "用户管理", menu_url: null, icon: "glyphicon-user", …}
- 10:{create_time: "2016-01-06 19:37:38", parent_id: 1, menu_name: "菜单管理", menu_url: "/menu/list", icon: "glyphicon-menu-hamburger", …}
- 11:{create_time: "2016-02-29 11:44:07", parent_id: 1, menu_name: "字典管理", menu_url: "/tspace/7/listPage", icon: "glyphicon-book", …}
- 12:{create_time: "2016-01-06 19:37:31", parent_id: 0, menu_name: "系统管理", menu_url: null, icon: "glyphicon-cog", …}
- 13:{create_time: "2016-10-16 10:08:02", parent_id: 1, menu_name: "操作日志", menu_url: "/oplog/listPage", icon: "glyphicon-time", …}
- length:14
- __proto__:Array(0)
var datagrid = $("#dg"); $(function() { //显示列表 datagrid.treegrid({ idField: 'id', treeField: 'menu_name', rownumbers:true, fit:true, border:false, rownumbers:true, url: "${basePath}/menu/listAll", method:'get', toolbar:'#tb', singleSelect:false, columns:[[ {field:'menu_name', title: '菜单名称', width:150}, {field:'menu_url', title: '菜单地址', width:150}, {field:'icon', title: '图标', width:150}, {field:'order_num', title: '排序', width:80} ]], loadFilter: function(data) { $.each(data, function(i, item) { item.iconCls = item.icon; if(item.parent_id > 0) { item._parentId = item.parent_id; } }); return {rows: data, total: 0}; } }); });
-
重点分析新建一个模块时的传值:id和parent_id
<#include "/common/head.html"/> <table id="dg"></table> <div id="tb" style="padding:2px 5px;"> <div style="text-align: left; margin:6px;"> <a href="javascript:void(0)" class="easyui-linkbutton addBtn" iconCls="glyphicon-plus" plain="true" onclick="add()">增加</a> <a href="javascript:void(0)" class="easyui-linkbutton updateBtn" iconCls="glyphicon-pencil" plain="true" onclick="update()">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton delBtn" iconCls="glyphicon-remove" plain="true" onclick="del()">删除</a> </div> </div> <script type="text/javascript"> var datagrid = $("#dg"); $(function() { //显示列表 datagrid.treegrid({ idField: 'id', treeField: 'menu_name', rownumbers:true, fit:true, border:false, rownumbers:true, url: "${basePath}/menu/listAll", method:'get', toolbar:'#tb', singleSelect:false, columns:[[ {field:'menu_name', title: '菜单名称', width:150}, {field:'menu_url', title: '菜单地址', width:150}, {field:'icon', title: '图标', width:150}, {field:'order_num', title: '排序', width:80} ]], loadFilter: function(data) { $.each(data, function(i, item) { item.iconCls = item.icon; if(item.parent_id > 0) { item._parentId = item.parent_id; } }); return {rows: data, total: 0}; } }); }); function add() { top.window.subPage.loadCurrDatagrid = function() { showMsg("增加成功!"); datagrid.treegrid("load"); } top.window.subPage.currDatagrid = datagrid; top.openWindow("增加", "${basePath}/menu/addPage", {width: 600, heigth: 400}); } function update() { var rowsSel = datagrid.datagrid("getSelections"); if(rowsSel.length != 1) { showWarnMsg("请选择需要编辑的一条数据!"); return; } top.window.subPage.loadCurrDatagrid = function() { showMsg("更新成功!"); datagrid.treegrid("load"); } var id = rowsSel[0].id; top.openWindow("编辑", "${basePath}/menu/updatePage?id=" + id); } function del() { var ids = []; var selRows = datagrid.datagrid("getSelections"); for(var i=0; i<selRows.length; i++) { if(selRows[i].children) { showWarnMsg("不能删除目录!"); return; } ids.push(selRows[i].id); } if(ids.length < 1) { showWarnMsg("请选择需要删除的数据!"); return; } confirmMsg("确认删除?", function() { $.post("delete", {id: ids}, function(data) { showMsg("删除成功!"); datagrid.treegrid("load"); }); }); } </script> <#include "/common/dialogWindow.html"/> <#include "/common/foot.html"/>
此处涉及到了弹窗和公共的js---common.jstop.openWindow("增加", "${basePath}/menu/addPage", {width: 600, heigth: 400});
-
调用MenuController中的addPage界面,跳转到add.html页面。
public void addPage() { render("add.html"); }
-
var subPage = {}; //用于弹窗,如增删改查页面 var popup = {}; //用于弹层 $(function() { //去掉加载页面时,遮挡的div $("body").css("visibility", "visible"); //回车刷新 if(!/login$/.test(location.href) && !/main/.test(location.href) && window.datagrid && $(".pagination-num:focus").length == 0) { document.onkeydown = function() { if(event.keyCode==13) { if(window.tspaceSearch) { tspaceSearch(); } return true; } } } //列表页面,如果没有搜索条件,则隐藏搜索按钮 if($("#tb .wrap_search .search_item").size() == 0) { $("#tb #searchBtnWrap").hide(); } }); function log(obj) { if(console) { console.log(obj); } } /** * 显示消息 */ function showMsg(msg) { top.window.$.messager.show({ title: '消息', msg:'<div style="padding-top: 10px;">' + msg||"消息内容!" + '</div>', timeout: 3000, showType: 'slide' }); } /** * 显示警告消息 */ function showWarnMsg(msg) { top.window.$.messager.show({ title: '错误消息', msg: '<div class="messager-icon messager-warning"></div><div style="padding-top: 10px;">' + (msg || "消息内容!") + "</div>", timeout: 3000, showType: 'slide' }); } /** * 确认消息 */ function confirmMsg(msg, successFunc){ top.window.$.messager.confirm('请确认', '<div style="padding-top: 10px;">' + (msg || 'Are you confirm this?') + "</div>", function(r){ if(r) { if($.isFunction(successFunc)) { successFunc(); } } }); } /** * 打开弹出窗 * @param title 标题 * @param url iframe地址 * @param options 可选参数 */ function openWindow(title, url, options) { options = options || {}; if(options.size && options.size.indexOf("x") >= 0) { options.width = options.size.split("x")[0]; options.height = options.size.split("x")[1]; } $("#dialogWindow iframe").attr("src", url); $("#dialogWindow").window({ closed:false, modal:true, title: title || '增加', width: options.width || 700, height: options.height || 450, onClose: function() { $("#dialogWindow iframe").removeAttr("src"); //关闭popup try { $("#popupWindow").window("close"); } catch(err) { //没有弹层 } } }); $("#dialogWindow").window("center"); } /** * 打开一个弹层,用于选择一些信息(如城市等) * @param ipt 需要弹层的input或其它元素 * @param title 弹层标题 * @param url 页面ulr * @param options 其它参数(参考easyui-window) */ function openPopup(ipt, title, url, options) { ipt = $(ipt); popup.ipt = ipt; var os1 = $("#dialogWindow").offset(); var os2 = ipt.offset(); if(!url || popup.currUrl != url) { $("#popupWindow iframe").attr("src", url); } if(!options) { options = {}; } options.title = title || "popup"; options.top = os1.top + os2.top + ipt.outerHeight(); options.left = os1.left + os2.left; options.onClose = function() { //回调关闭事件 if(top.window.popup.close) { top.window.popup.close(); } } //回调显示事件 if(top.window.popup.show) { top.window.popup.show(); } $("#popupWindow").window(options); popup.currUrl = url; } /** * 关闭弹层 **/ function closePopup() { $("#popupWindow").window("close"); } /** * 关闭弹出窗口 */ function closeWindow() { $("#dialogWindow").window("close"); } /** * 刷新页面 */ function flushPage() { location.replace(location); } /** * 根据对象属性从集合中获得对象 * @param list * @param attrName * @param attrValue * @returns 匹配到的第一个对象 */ function getObjFromList(list, attrName, attrValue) { if($.isArray(list)) { for (var i = 0; i < list.length; i++) { var item = list[i]; if(item[attrName] == attrValue) { return item; } } } return null; } function getInputValue(inputName) { var inputObj = $(":input[name='" + inputName + "']"); var result = ""; if(inputObj.attr("type") == "file") { result = $("#" + inputName).attr("data"); //如果文件,从文件的显示框架读取 }else { inputObj.each(function(i, item) { result += "," + $(item).val(); }); } return result.replace(",", ""); } /** * 如:当前页面为stockHistoryLog/listPage,则getCurrUrl(addPage)返回stockHistoryLog/addPage */ function getCurrUrl(method) { return window.location.pathname.replace(/\w+$/, method); } /** * 使combobox变为多选 * @param inputIds 单个id或者数组 */ function changeComboboxToMult(inputIds) { if(!$.isArray(inputIds)) { inputIds = [inputIds]; } $.each(inputIds, function(i, item) { var iptObj = $("#" + item); iptObj. combobox({multiple:true}); }); } //扩展easyui-datagrid的edit模式 $.extend($.fn.datagrid.defaults.editors, { //支持checkbox checkbox: { init: function(container, options){ var align = "center"; if(options && options.align) { align = options.align; } container.attr("align", align); var input = $('<input type="checkbox" class="datagrid-editable-checkbox">').appendTo(container); return input; }, destroy: function(target){ $(target).remove(); }, getValue: function(target){ return $(target).is(":checked") ? 1 : 0; }, setValue: function(target, value){ if(value == 1) { $(target).click(); } }, resize: function(target, width){ //$(target)._outerWidth(width); } } }); //全局ajax事件处理 $(window).ajaxError(function(handler){ showWarnMsg("操作失败,服务器出现错误!"); }); $(window).ajaxSuccess(function(evt, request, settings){ var s = request.responseText; if(s && s.indexOf('{"result":"fail"') != -1) { eval("result = " + s); showWarnMsg(result.msg); } }); //删除页面没有权限的按钮 $(function() { if(noAuthBtn) { $.each(noAuthBtn.split(","), function(i, item) { $("." + item).remove(); }); } }); /** * 处理页面没有【数据权限】的按钮 */ function handleAuthDataRule() { if(authField) { $.each(authField.split(","), function(i, item) { //$("#" + item + ",#_start_" + item + ",#_end_" + item).textbox({disabled:true}); $("#" + item + ",#_start_" + item + ",#_end_" + item).parents(".search_item:first").remove(); }); } } //extend the 'equals' rule $.extend($.fn.validatebox.defaults.rules, { equals: { validator: function(value,param){ return value == $(param[0]).val(); }, message: '两次输入不一致.' } }); /** * 上传文件,用于easyui-filebox异步上传 * @param fileIptId 文件输入框id */ function uploadFile(fileIptId) { if(window.FormData) { var fileObj = $(":input[name='" + fileIptId + "']"); var files = fileObj.get(0).files; var imgObj = $("#" + fileIptId + "Img"); $("#" + fileIptId).attr("data", ""); if(files.length > 0) { if(files[0].size / 1024 / 1025 > 5) { showWarnMsg("上传图片不能大于5M"); return; } var formData = new FormData(); // 建立一个upload表单项,值为上传的文件 formData.append('upload', fileObj.get(0).files[0]); var xhr = new XMLHttpRequest(); xhr.open('POST', basePath + "/common/uploadFile"); // 定义上传完成后的回调函数 xhr.onload = function () { if (xhr.status === 200) { $("#" + fileIptId).attr("data", xhr.response); //显示图片 imgObj.attr("src", basePath + xhr.response).parent().show(); } else { showWarnMsg("上传图片失败") } } xhr.send(formData); }else { //隐藏图片 imgObj.attr("src", "").parent().hide(); } }else { alert("该浏览器不支持文件上传,请用chrome或firefox浏览器~"); } } /** * 格式化图片(用于datagrid) * @param url */ function formatterDgImage(url) { return url ? "<img class='dg_img' src='" + basePath + url + "' />" : ""; }
-
<#include "/common/head.html"/> <div class="easyui-panel addPage" data-options="fit:true,border:false"> <form id="ff" method="post" class="easyui-form" data-options="novalidate:true"> <table class="table1"> <tr> <th><span>菜单名称:</span></th> <td> <div class="wrap_input"><input class="easyui-textbox" data-options="fit:true, required:true" type="text" name="menu_name"></input></div> </td> </tr> <tr> <th><span>菜单地址:</span></th> <td> <div class="wrap_input"><input class="easyui-textbox" type="text" name="menu_url" data-options="fit:true, required:true"></input></div> </td> </tr> <tr> <th><span>上级菜单:</span></th> <td> <div class="wrap_input"><input id="parent_id" class="easyui-textbox" type="text" name="parent_id" data-options="fit:true, required:true"></input></div> </td> </tr> <tr> <th><span>图标:</span></th> <td> <div class="wrap_input"><input type="text" name="icon" onclick='top.window.openPopup(this, "请选择图标", "${basePath}/common/iconsPage", {width: 540, height: 400})'></input></div> </td> </tr> <tr> <th><span>顺序:</span></th> <td> <div class="wrap_input"><input class="easyui-textbox" type="text" name="order_num" data-options="fit:true"></input></div> </td> </tr> </table> </form> </div> <script> $(function() { var rowsSel = top.window.subPage.currDatagrid.datagrid("getSelections"); if(rowsSel.length > 0) { $("#parent_id").val(rowsSel[0].id); }else { $("#parent_id").val("0"); } //上级菜单 $.post("${basePath}/menu/listAll", function(data) { var menulist = []; $.each(data, function(i, item) { menulist.push({ id: item.id, text: item.menu_name, attributes: '/tspace' + item.menu_url, parent_id: item.parent_id, iconCls: item.icon }); }); for(var i = 0; i < menulist.length; i++) { var children = menulist[i].children || []; for(var j = 0; j < menulist.length; j++) { if(menulist[j].parent_id == menulist[i].id) { children.push(menulist[j]); } } menulist[i].children = children; } var treeData = [{id:"0", text:'一级菜单', iconCls:'glyphicon-asterisk'}]; $.each(menulist, function(i, item) { if(item.parent_id == 0) { treeData.push(item); } }); $("#parent_id").combotree({ data: treeData }); }); $(document).click(function() { var target = event.target || event.srcElement; if($(target).attr("name") != 'icon') { top.window.closePopup(); } }); }); top.window.subPage.save = save; function save(successFunc) { if($("#ff").form('enableValidation').form('validate')) { $.post("add", getParam(), function(data) { if(successFunc) { successFunc(); } top.window.closeWindow(); top.window.subPage.loadCurrDatagrid(); }); } } function getParam() { var param = { "model.menu_name": $(":input[name='menu_name']").val(), "model.menu_url": $(":input[name='menu_url']").val(), "model.parent_id": $(":input[name='parent_id']").val(), "model.icon": $(":input[name='icon']").val(), "model.order_num": $(":input[name='order_num']").val() } for(key in param) { if(!param[key]) { delete param[key]; } } return param; } </script> <#include "/common/foot.html"/>
增加成功的方法后台进度