Tree:

easyui tree的异步加载实现很简单，easyui的中文API文档中有实例（http://api.btboys.com/easyui/）——创建异步树形菜单，就是在tree node 元素中要有一个id属性，同时还需要state的属性（state为'closed'的时候，点击节点时会自动请求，并且将id作为参数Post到后台），只加载一次。

远程异步加载：

http://www.cnblogs.com/CoreCaiNiao/archive/2010/08/20/1804387.html

  1. $(function(){
  2. $('#tt2').tree({
  3. checkbox: false,
  4. url: '/common/GetGoupJsonByPid.ashx?pid=0',
  5. onBeforeExpand:function(node,param){
  6. $('#tt2').tree('options').url = "/common/GetGoupJsonByPid.ashx?pid=" + node.id;
  7. //只加载一次。
  8. },
  9. onClick:function(node){
  10. alert(node.id);
  11. }
  12. });
  13. });

例子：

JSP:

  1. <script type="text/javascript" src="<%=request.getContextPath()%>/js/app/sysManagement/sysMenu.js" charset="UTF-8"></script>
  2. <html>
  3. <style>
  4. #editForm{}
  5. #editForm input{width:300px;}
  6. #editForm select{width:300px;}
  7. </style>
  8. <body>
  9. <div id="treeMenu" class="easyui-menu" style="width:120px;"></div>
  10. <div class="easyui-layout" data-options="fit:true,border:false" style="width: 100%; height: 100%;">
  11. <div data-options="region:'north',border:false,title:'菜单管理', iconCls: 'icon-tip'" style="height:55px">
  12. <div id="toolbar" class="easyui-toolbar" style="margin-top:5px;">
  13. <a  class="easyui-linkbutton"
  14. data-options="plain: true, iconCls: 'ope-add'"
  15. onclick="javascript:addBrothers()">新增同级</a>
  16. <a  class="easyui-linkbutton"
  17. data-options="plain: true, iconCls: 'ope-add'"
  18. onclick="javascript:addChildren();">新增下级</a>
  19. <a  class="easyui-linkbutton"
  20. data-options="plain: true, iconCls: 'ope-remove'"
  21. onclick="javascript:removeMenu();">删除</a>
  22. <a  class="easyui-linkbutton"
  23. data-options="plain: true, iconCls: 'ope-save'"
  24. onclick="javascript:saveOrUpdateMenu();">保存</a>
  25. </div>
  26. </div>
  27. <div data-options="region:'center',border:false" >
  28. <div class="easyui-layout" data-options="fit:true,border:false" style="width: 100%; height: 100%;">
  29. <div region="west" data-options="split:true,border:true,minWidth: 150, maxWidth: 500" style="width:230px;">
  30. <ul id="tree"></ul>
  31. </div>
  32. <div data-options="region:'center',border:false" >
  33. <div style="margin:5px;">
  34. <form name="editForm" method="post" id="editForm" class="easyui-SuperEditForm">
  35. <input id="id" name="id" type="hidden"/>
  36. <input id="supId" name="supId" type="hidden"/>
  37. <table class="tableForm_L" width="100%" border="0" cellpadding="0" cellspacing="1">
  38. <tr>
  39. <th width="15%">
  40. 菜单名
  41. <span class="red">*</span>
  42. </th>
  43. <td width="85%">
  44. <input type="text" name="menuName" id="menuName" class="easyui-validatebox"
  45. data-options="required:true,validType:'length[1,200]'" />
  46. </td>
  47. </tr>
  48. <tr>
  49. <th width="15%">
  50. 链接URL
  51. <span class="red">*</span>
  52. </th>
  53. <td width="85%">
  54. <input type="text" name="menuUrl" id="menuUrl" class="easyui-validatebox" data-options="required:true"/>
  55. </td>
  56. </tr>
  57. <tr>
  58. <th width="15%">
  59. 顺序ID
  60. </th>
  61. <td width="85%">
  62. <input type="text" name="orderId" id="orderId" class="easyui-validatebox" />
  63. </td>
  64. </tr>
  65. <tr>
  66. <th  width="15%">
  67. 是否启用
  68. <span class="red">*</span>
  69. </th>
  70. <td width="85%">
  71. <select id="enabledFlag" name="enabledFlag"   class='easyui-combobox'
  72. data-options="required:true,panelHeight:'auto',editable:false,readonly:false">
  73. <option value="Y">是</option>
  74. <option value="N">否</option>
  75. </select>
  76. </td>
  77. </tr>
  78. <tr>
  79. <th width="15%">备 注</th>
  80. <td colspan="3">
  81. <textarea cols="100" rows="13" height='auto' name="remark" id="remark"></textarea>
  82. </td>
  83. </tr>
  84. </table>
  85. </form>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </body>
  92. </html>

sysMenu.js

  1. var $editForm;
  2. var $tree;
  3. var hasNew = false;
  4. $(function() {
  5. $tree = $("#tree");
  6. $editForm = $("#editForm");
  7. $tree.tree({
  8. url : root + 'sysMenu/listMenus.do?pid=-1',
  9. iconCls : 'icon-save',
  10. checkbox : false,
  11. lines : true,
  12. animate : true,
  13. onBeforeExpand : function(node, param) {
  14. $tree.tree('options').url = root + "sysMenu/listMenus.do?pid="
  15. + node.id; // 只加载一次
  16. },
  17. onLoadSuccess : function(node, data) {
  18. },
  19. onSelect : function(node) {
  20. if (node.id == -1)  return;
  21. if(node.id.indexOf('newNode') != -1){
  22. var pidStr = node.id;
  23. var pid = pidStr.split("newNode")[1];
  24. $editForm.find("input").val("");
  25. $("#supId").val(pid);
  26. $("#remark").val("").text("");
  27. $("#menuName").val(node.text);
  28. }else{
  29. $tree.tree('expand',node.target)
  30. getMenuDetail(node.id);
  31. }
  32. }
  33. });
  34. });
  35. function getMenuDetail(id){
  36. $.ajax({
  37. url: root + "sysMenu/getMenuDetail.do?id="+id,
  38. type: "GET",
  39. dataType: "json",
  40. async:false,
  41. success: function (data, textStatus, XMLHttpRequest) {
  42. if(data != null){
  43. $("#id").val(data.id);
  44. $("#supId").val(data.supId);
  45. $("#menuName").val(data.menuName);
  46. $("#menuUrl").val(data.menuUrl);
  47. $("#orderId").val(data.orderId);
  48. $('#enabledFlag').combobox('setValue', data.enabledFlag);
  49. $("#remark").val(data.remark).text(data.remark);
  50. }else{
  51. $.messager.alert('提示','获取菜单详情失败!','error');
  52. }
  53. }
  54. });
  55. }
  56. function saveOrUpdateMenu(){
  57. if (!$editForm.form('validate')) return;
  58. var selected = $tree.tree('getSelected');
  59. if(selected == null)
  60. $.messager.alert('提示','请选择一个节点','info');
  61. var formData=$editForm.serializeArray();
  62. var sysMenu = {};
  63. $.each(formData,function(i,field){
  64. sysMenu[field.name] = field.value;
  65. });
  66. $.ajax({
  67. url:root+'sysMenu/saveOrUpdateMenu.do',
  68. data: sysMenu,
  69. type: "post",
  70. async:false,
  71. success: function (data, textStatus, XMLHttpRequest) {
  72. if(data != null){
  73. $.messager.alert('提示','保存成功！','info',function(){
  74. hasNew = false;
  75. var selected = $tree.tree('getSelected');
  76. var parent = $tree.tree('getParent',selected.target);
  77. $tree.tree('reload',parent.target);
  78. });
  79. }else{
  80. $.messager.alert('提示','保存失败！','error');
  81. }
  82. }
  83. });
  84. }
  85. function removeMenu(){
  86. var selected = $tree.tree('getSelected');
  87. if(selected == null){
  88. $.messager.alert('提示','请选择一个节点','info');
  89. return;
  90. }
  91. if(selected.id.indexOf('newNode') != -1){
  92. $tree.tree('remove',selected.target);
  93. hasNew = false;
  94. }else{
  95. $.messager.confirm('提示', "确认删除节点'"+selected.text+"'?", function(r){
  96. if (r){
  97. $.ajax({
  98. url : root + "sysMenu/removeMenu.do?id="+selected.id,
  99. type: 'GET',
  100. timeout: 60000,
  101. success : function(data, textStatus, jqXHR){
  102. if('SUCCESS' == data){
  103. hasNew = false;
  104. $tree.tree('remove',selected.target);
  105. $.messager.alert('提示','删除成功！','info');
  106. }else{
  107. $.messager.alert('提示','删除失败！','error');
  108. }
  109. }
  110. });
  111. }
  112. });
  113. }
  114. }
  115. function addBrothers(){
  116. if(!validate()) return;
  117. var selected = $tree.tree('getSelected');
  118. var parent = $tree.tree('getParent',selected.target);
  119. addNewNode(parent);
  120. }
  121. function addChildren(){
  122. if(!validate()) return;
  123. var children = $tree.tree('getSelected');
  124. addNewNode(children);
  125. }
  126. function addNewNode(parent){
  127. var data = {};
  128. data.id = "newNode"+parent.id; //onSelect时的node节点不含pid，所以需要加上
  129. data.pid = parent.id;
  130. data.text = "新建节点";
  131. data.state = "open";
  132. var d = new Array();
  133. d.push(data);
  134. var param = {};
  135. param.parent = parent.target;
  136. param.data = d;
  137. $tree.tree('append',param);
  138. var node = $tree.tree('find', data.id);
  139. $tree.tree('select', node.target);
  140. }
  141. function validate(){
  142. var selected = $tree.tree('getSelected');
  143. if(selected == null){
  144. $.messager.alert('提示','请选择一个节点','info');
  145. return false;
  146. }
  147. var text = selected.text;
  148. if(selected.id == -1){
  149. $.messager.alert('提示','根节点不可新增节点','info');
  150. return false;
  151. }
  152. if (selected.id.indexOf('newNode') != -1 || hasNew) {
  153. $.messager.alert("提示", "请保存或删除新增节点后再新增！", "info");
  154. return false;
  155. }
  156. hasNew = true;
  157. return true;
  158. }

 Controller:

  1. // =================================================================菜单管理================================
  2. @RequestMapping(value = "sysMenu/listMenus.do", method = {RequestMethod.GET,RequestMethod.POST})
  3. @ResponseBody
  4. public List<MenuTree> listMenus(@RequestParam(required=false) long pid) {
  5. logger.debug(" listMenus begin [pid] = " + pid);
  6. List<MenuTree> result = null;
  7. try {
  8. result =  sysMenuDS.listMenus(pid);
  9. } catch(Exception e) {
  10. logger.error("listMenus error :" + e.getMessage());
  11. e.printStackTrace();
  12. }
  13. logger.debug(" listMenus end ..");
  14. return result;
  15. }
  16. /**
  17. * 获取配额详情
  18. * @param id
  19. * @param parentId
  20. * @return
  21. */
  22. @RequestMapping(value = "sysMenu/getMenuDetail", method = RequestMethod.GET)
  23. @ResponseBody
  24. public SysMenu getMenuDetail(Long id) {
  25. logger.debug("getMenuDetail begin [id] = " + id);
  26. SysMenu menu = null;
  27. try {
  28. menu = sysMenuDS.getMenuDetail(id);
  29. } catch(Exception e) {
  30. logger.error("getMenuDetail error :" + e.getMessage());
  31. e.printStackTrace();
  32. }
  33. logger.debug("getMenuDetail end ..");
  34. return menu;
  35. }
  36. @RequestMapping(value = "sysMenu/saveOrUpdateMenu", method = RequestMethod.POST)
  37. @ResponseBody
  38. public String saveOrUpdateMenu(SysMenu menu){
  39. logger.debug("saveOrUpdateMenu begin ..");
  40. try {
  41. sysMenuDS.saveOrUpdateMenu(menu);
  42. } catch(Exception e) {
  43. logger.error("saveOrUpdateMenu error :" + e.getMessage());
  44. e.printStackTrace();
  45. }
  46. logger.debug("saveOrUpdateMenu end ..");
  47. return Constants.RESULT_SUCCESS;
  48. }
  49. @RequestMapping(value = "sysMenu/removeMenu", method = RequestMethod.GET)
  50. @ResponseBody
  51. public String removeMenu(long id){
  52. logger.debug("removeMenu begin ..");
  53. try {
  54. sysMenuDS.removeMenu(id);
  55. } catch(Exception e) {
  56. logger.error("removeMenu error :" + e.getMessage());
  57. e.printStackTrace();
  58. }
  59. logger.debug("removeMenu end ..");
  60. return Constants.RESULT_SUCCESS;
  61. }

Service:

  1. @Service("iSysMenu")
  2. public class SysMenuDS implements ISysMenu {
  3. private static final Logger logger = LoggerFactory.getLogger(SysMenuDS.class);
  4. @Autowired
  5. private ISysMenuDao menuDao;
  6. /**
  7. * 菜单列表
  8. */
  9. @Override
  10. public List<MenuTree> listMenus(long pid) {
  11. if(pid == 0l)
  12. return new ArrayList<MenuTree>();
  13. List<SysMenu> menus = menuDao.findByParentId(pid);
  14. List<MenuTree> trees = convertCollectionToMenuTree(menus);
  15. if(pid == -1){
  16. trees = addRoot(trees);
  17. }
  18. return trees;
  19. }
  20. /**
  21. * 获取详情
  22. */
  23. @Override
  24. public SysMenu getMenuDetail(Long id) {
  25. if(id == 0l)
  26. return null;
  27. SysMenu menu = menuDao.findByMenuId(id);
  28. return menu;
  29. }
  30. /**
  31. * 保存或修改菜单
  32. */
  33. @Override
  34. public void saveOrUpdateMenu(SysMenu menu) {
  35. if(menu.getId() != null){
  36. SysMenu m = menuDao.findByMenuId(menu.getId());
  37. m.setMenuName(menu.getMenuName());
  38. m.setMenuUrl(menu.getMenuUrl());
  39. m.setOrderId(menu.getOrderId());
  40. m.setEnabledFlag(menu.getEnabledFlag());
  41. m.setRemark(menu.getRemark());
  42. ObjectUtil.setUpdatedBy(m);
  43. menu = m;
  44. }else{
  45. ObjectUtil.setCreatedBy(menu);
  46. }
  47. menuDao.save(menu);
  48. }
  49. @Override
  50. public void removeMenu(long id) {
  51. if(hasChildren(id)){
  52. menuDao.deleteChildrenById(id);
  53. }
  54. menuDao.remove(id);
  55. }
  56. /**
  57. * 添加根节点
  58. * @param children
  59. * @return
  60. */
  61. private List<MenuTree> addRoot(List<MenuTree> children) {
  62. List<MenuTree> result = new ArrayList<MenuTree>();
  63. MenuTree root = new MenuTree();
  64. root.setId(String.valueOf(-1l));
  65. root.setPid(String.valueOf(-1l));
  66. root.setText("菜单管理");
  67. root.setChecked(false);
  68. root.setIconCls("");
  69. root.setState("open");
  70. root.setChildren(children);
  71. result.add(root);
  72. return result;
  73. }
  74. public boolean hasChildren(long id){
  75. List<SysMenu> children = menuDao.findByParentId(id);
  76. if(children != null && children.size() > 0){
  77. return true;
  78. }
  79. return false;
  80. }
  81. public MenuTree convertToMenuTree(SysMenu menu){
  82. MenuTree tree = new MenuTree();
  83. tree.setId(String.valueOf(menu.getId()));
  84. tree.setPid(String.valueOf(menu.getSupId()));
  85. tree.setText(menu.getMenuName());
  86. if(hasChildren(menu.getId())){
  87. tree.setState("closed");
  88. }else{
  89. tree.setState("open");
  90. }
  91. return tree;
  92. }
  93. public List<MenuTree> convertCollectionToMenuTree(List<SysMenu> ls){
  94. List<MenuTree> trees = new ArrayList<MenuTree>();
  95. if(ls == null || ls.size() == 0)
  96. return trees;
  97. for(SysMenu menu : ls){
  98. trees.add(convertToMenuTree(menu));
  99. }
  100. return trees;
  101. }
  102. }

相关CSS：

  1. .icon-tip {
  2. background: url('icons/tip.png') no-repeat;
  3. }
  4. .tree-folder-open {
  5. background: url('images/tree_folder_open.gif') no-repeat;
  6. }
  7. .tree-folder {
  8. display: inline-block;
  9. background: url('images/tree_folder.gif') no-repeat;
  10. width: 16px;
  11. height: 18px;
  12. vertical-align: middle;
  13. }
  14. .tree-node-selected {
  15. background: url('images/tree_selected_bg.png') left bottom no-repeat;
  16. height: 26px;
  17. line-height: 26px;
  18. }

Jquery easyui tree 一些常见操作的更多相关文章

  1. Jquery easyui tree的使用

    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...

  2. Jquery easyui Tree的简单使用

    Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...

  3. jquery easyui tree dialog

    <script type="text/javascript" src="<%=request.getContextPath()%>/include/ja ...

  4. Jquery EasyUI Tree .net实例

    图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...

  5. Jquery EasyUI Tree树形结构的Java实现（实体转换VO）

    前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...

  6. jQuery 自学笔记—8 常见操作

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...

  7. easyui 进阶之tree的常见操作

    前言 easyui是一种基于jQuery的用户界面插件集合,它为创建现代化,互动,JavaScript应用程序,提供必要的功能,完美支持HTML5网页的完整框架,节省网页开发的时间和规模.非常的简单易 ...

  8. JQuery EasyUI Tree

    Tree 数据转换 所有节点都包含以下属性: id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data text: 显示的节点文本 ...

  9. JQuery EasyUI Tree组件的Bug记录

    记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜  - _-(bug)..... bug ::   .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...

随机推荐

  1. iOS - UIPasteboard

    前言 NS_CLASS_AVAILABLE_IOS(3_0) __TVOS_PROHIBITED __WATCHOS_PROHIBITED @interface UIPasteboard : NSOb ...

  2. Augular初探

    一年多前,巧遇angular,觉得是个非常优秀的mv*框架,当时项目使用了MooTools.因此也没继续研究.刚好最近,同事组中有用到ng,并且要做个分享.因此就将from Why Does Angu ...

  3. Fix-Mapped Addresses

    一.前言 某天,wowo同学突然来了一句:如果要在start_kernel中点LED,ioremap在什么时间点才能调用呢?我想他应该是想通过点LED灯来调试start_kernel之后的初始化的代码 ...

  4. Python 字典 items() 方法

    描述 Python 字典 items() 方法以列表形式(并非直接的列表,若要返回列表值还需调用list函数)返回可遍历的(键, 值) 元组数组. 语法 items() 方法语法: D.items() ...

  5. 博客目录之C#

    C# BackgroundWorker的Bug??? C# BeginInvoke和EndInvoke方法 c# 高效的线程安全队列ConcurrentQueue C# ManualResetEven ...

  6. Matlab图形调色

    Matlab图形调色 Simple example var colormap = require('colormap') options = {   colormap: 'jet',   // pic ...

  7. 使用Apache JMeter压測Thrift

    我这里以我的一篇帖子为样例 http://blog.csdn.net/mn960mn/article/details/50476759 这里已经有服务端了,先启动服务端 首先增加maven的依赖 &l ...

  8. 一些常见的关于Linux系统的问题

    1 如何看当前Linux系统有几颗物理CPU和每颗CPU的核数? 答:[root@centos6 ~ 10:55 #35]# cat /proc/cpuinfo|grep -c 'physical i ...

  9. 常用的一个cookie 对象，还有path 兼容性问题

      //cookievar ck = { getObj:function() { var ck = document.cookie; var obj = {}; if(ck!="" ...

  10. C++11 随机数

    C++11带来诸多特性,random就是其一. 随机数由生成器和分布器结合产生 生成器generator:能够产生离散的等可能分布数值(需要种子,不然每次生存的随机数都一样) 分布器distribut ...