Jquery easyui tree 一些常见操作

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

Js代码  收藏代码
  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:

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

sysMenu.js

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

 Controller:

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

 

Service:

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

相关CSS：

Js代码  收藏代码
  1. .icon-tip {  
  2.     background: url('icons/tip.png') no-repeat;  
  3. }  
  4.   
  5.   
  6. .tree-folder-open {  
  7.     background: url('images/tree_folder_open.gif') no-repeat;  
  8. }  
  9.   
  10. .tree-folder {  
  11.     display: inline-block;  
  12.     background: url('images/tree_folder.gif') no-repeat;  
  13.     width: 16px;  
  14.     height: 18px;  
  15.     vertical-align: middle;  
  16. }  
  17.   
  18.   
  19.   
  20. .tree-node-selected {  
  21.     background: url('images/tree_selected_bg.png') left bottom no-repeat;  
  22.     height: 26px;  
  23.     line-height: 26px;  
  24. }  
posted @ 2016-09-12 10:30  芜明-追星  阅读(805)  评论(0)  编辑  收藏  举报