• [orginal] OOP treeView based on web.



      abstraction:

        The TreeView control displays a hierarchy of nodes, like the way files and folders are displayed in the

     left pane of the Windows Explorer feature in Windows operating systems,

     Each node in the tree view might contain other nodes, called child nodes.

    You can display parent nodes, or nodes that contain child nodes, as expanded or collapsed.  


      introduction:

     to build the treeView control basing on web meaning css, html and js, is not hard to implement, all one needs to do is to build an active css code, you needn't pay too much attention to the js code  it is really easy if you look to the treeview structure it at all depend on recursive way, each node can at the same time be parent and child.


    design:

    here we see the recursive algorithm for creating the html code for treeview control :

    Code


    then continue with the class of the treeView control. to use the code below seems reasonable 

    Code
    Then one needs to add JavaScript to the page to toggle the applied styles. For this, I decided to go with an approach that could handle multiple styles being applied to a single element, so my solution is a little more complex than a simple className replacement approach:
    Code
    I then wrote a script to setup the treeview based on a nested list container. The main reason according to which I chose not to have all the event wiring in the HTML itself, is that my approach leads to cleaner markup and allows one to easily convert any unordered list into a treeview. Here is the script to hook up the click events (it works in both IE and FireFox):


    Code

    to make it all more convenient for users there is no need for create the html code,

    just we call the function:



    function  createTreeViewHtmlCode(pid)
    {
      
    var ul=document.createElement('ul');
          ul.className
    ='TreeView';
          ul.id
    =pid+'tv';
          document.getElementById(pid).appendChild(ul);
    }
     


    here one can observe the entire js code:


    Code


    now we need to see the way of creating the object  of treeView :


    Code

    but the step must be implemented after you call the header file:

    <SCRIPT type="text/javascript" language="javascript" src="treeview.js"></SCRIPT>

    now one can observe the auto-generation code simultaneously created by the js object above:


    Code


    here you see the css style :


    Now I want the first level node to be collapsed with a plus image next to it by default to indicate that the node can be expanded. In order to achieve this we can get rid of the li symbols by making the list items float left. This makes them stack up, so then one can set the elements to display at a 100% of the containing element. We then need space to place our treeview expandable image, so we put in a left padding of 37px. To simplify the process you can use a CSS child selector to apply this to all list elements within the treeview, like this:



    Code



    The addition of the collapsing and expanding images, and the associated effects to the child nodes is achieved with the help of the following styles:



    Code








    Moory !! Marisha!!!




  • 相关阅读:
    C++ 三数之和
    C++ 保存读取二进制
    流媒体 Ubuntu部署srs、windows部署nginx
    sql函数(三)MERGE INTO函数
    sql函数(二)LISTAGG()函数(列转行函数)
    sql函数(一)ROW_NUMBER() OVER()--表内分组并排序
    java注释(类、构造函数、方法、代码块、单行、属性注释)
    springBoot注解整理
    @DateTimeFormat与@JsonFormat作用
    DataJPA简述与注解
  • 原文地址:https://www.cnblogs.com/ammar/p/1607127.html
Copyright © 2020-2023  润新知