1. 0:{create_time: "2016-09-18 18:55:28", parent_id: 9, menu_name: "小说采集", menu_url: "/tspace/17/listPage", icon: "glyphicon-cd", …}
2. 1:{create_time: "2016-01-07 21:41:21", parent_id: 1, menu_name: "在线表单", menu_url: "/tspaceHead/list", icon: "glyphicon-cloud", …}
3. 2:{create_time: "2016-09-12 22:11:26", parent_id: 9, menu_name: "客户管理", menu_url: "/tspace/15/listPage", icon: "glyphicon-th-list", …}
4. 3:{create_time: "2016-01-07 03:32:08", parent_id: 5, menu_name: "角色管理", menu_url: "/tspace/8/listPage", icon: "glyphicon-user", …}
5. 4:{create_time: "2017-03-15 23:55:04", parent_id: 1, menu_name: "定时任务", menu_url: "/task/listPage", icon: "glyphicon-tasks", …}
6. 5:{create_time: "2016-09-12 22:12:33", parent_id: 9, menu_name: "大盘数据", menu_url: "/tspace/16/listPage", icon: "glyphicon-flag", …}
7. 6:{create_time: "2016-09-12 22:10:51", parent_id: 0, menu_name: "内容管理", menu_url: null, icon: "glyphicon-search", …}
8. 7:{create_time: "2016-02-16 03:59:22", parent_id: 5, menu_name: "系统用户", menu_url: "/tspace/12/listPage", icon: "glyphicon-king", …}
9. 8:{create_time: "2016-12-21 01:12:05", parent_id: 9, menu_name: "图片管理", menu_url: "/tspace/18/listPage", icon: "glyphicon-picture", …}
10. 9:{create_time: "2016-01-06 19:37:31", parent_id: 0, menu_name: "用户管理", menu_url: null, icon: "glyphicon-user", …}
11. 10:{create_time: "2016-01-06 19:37:38", parent_id: 1, menu_name: "菜单管理", menu_url: "/menu/list", icon: "glyphicon-menu-hamburger", …}
12. 11:{create_time: "2016-02-29 11:44:07", parent_id: 1, menu_name: "字典管理", menu_url: "/tspace/7/listPage", icon: "glyphicon-book", …}
13. 12:{create_time: "2016-01-06 19:37:31", parent_id: 0, menu_name: "系统管理", menu_url: null, icon: "glyphicon-cog", …}
14. 13:{create_time: "2016-10-16 10:08:02", parent_id: 1, menu_name: "操作日志", menu_url: "/oplog/listPage", icon: "glyphicon-time", …}
15. length:14
16. __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};
       }
   });
});

<#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"/>

增加成功的方法后台进度