• Tree Context Menu


    Right click on a node to display context menu.

     
    • My Documents
      • Photos
      • Program Files
        • Intel
        • Java
        • Microsoft Office
        • Games
      • index.html
      • about.html
      • welcome.html
    源代码
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Tree Context Menu - jQuery EasyUI Demo</title>
    6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    8. <link rel="stylesheet" type="text/css" href="../demo.css">
    9. <script type="text/javascript" src="../../jquery.min.js"></script>
    10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    11. </head>
    12. <body>
    13. <h2>Tree Context Menu</h2>
    14. <p>Right click on a node to display context menu.</p>
    15. <div style="margin:20px 0;"></div>
    16. <div class="easyui-panel" style="padding:5px">
    17. <ul id="tt" class="easyui-tree" data-options="
    18. url: 'tree_data1.json',
    19. method: 'get',
    20. animate: true,
    21. onContextMenu: function(e,node){
    22. e.preventDefault();
    23. $(this).tree('select',node.target);
    24. $('#mm').menu('show',{
    25. left: e.pageX,
    26. top: e.pageY
    27. });
    28. }
    29. "></ul>
    30. </div>
    31. <div id="mm" class="easyui-menu" style="width:120px;">
    32. <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    33. <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div>
    34. <div class="menu-sep"></div>
    35. <div onclick="expand()">Expand</div>
    36. <div onclick="collapse()">Collapse</div>
    37. </div>
    38. <script type="text/javascript">
    39. function append(){
    40. var t = $('#tt');
    41. var node = t.tree('getSelected');
    42. t.tree('append', {
    43. parent: (node?node.target:null),
    44. data: [{
    45. text: 'new item1'
    46. },{
    47. text: 'new item2'
    48. }]
    49. });
    50. }
    51. function removeit(){
    52. var node = $('#tt').tree('getSelected');
    53. $('#tt').tree('remove', node.target);
    54. }
    55. function collapse(){
    56. var node = $('#tt').tree('getSelected');
    57. $('#tt').tree('collapse',node.target);
    58. }
    59. function expand(){
    60. var node = $('#tt').tree('getSelected');
    61. $('#tt').tree('expand',node.target);
    62. }
    63. </script>
    64. </body>
    65. </html>
  • 相关阅读:
    phonegap_android配置文档
    JQueryMobile + PhoneGap 经验总结
    nand ECC 算法记录
    u-boot 2016.05 添加自己的board 以及config.h
    git commit 多行注释方法说明
    Ubuntu 下新建用户后无法sudo
    QT4.8.5 QComboBox 增加选择菜单记录
    Linux GPIO控制方法
    Qt5 can't find -LGL
    windows 端搭建nfs 服务器
  • 原文地址:https://www.cnblogs.com/telwanggs/p/4533272.html
Copyright © 2020-2023  润新知