zoukankan      html  css  js  c++  java

  • 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{300px;}  
    6.     #editForm select{300px;}  
    7. </style>  
    8. <body>  
    9.     <div id="treeMenu" class="easyui-menu" style="120px;"></div>  
    10.       
    11.     <div class="easyui-layout" data-options="fit:true,border:false" style=" 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=" 100%; height: 100%;">  
    31.                   
    32.                 <div region="west" data-options="split:true,border:true,minWidth: 150, maxWidth: 500" style="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.      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. }  
  • 相关阅读:
    mongoDB
    昆仑会员此打印方式只针对用会员卡结账的消费，放开限制解决方案
    用jdk1.6的pack200和unpack200，对jar文件进行压缩和解压 .pack.gz
    ffmpeg
    关于golang-mod的使用方法
    组件&Props
    元素渲染
    JSX 简介
    React-HelloWorld
    Vue与REACT两个框架的区别和优势对比
  • 原文地址：https://www.cnblogs.com/huangf714/p/5863886.html
Copyright © 2011-2022 走看看