easyui tree

In the recent project, some data will be displayed with trees , So I looked for it , Finally found out easyui. He provided many trees , I use a tree with checkboxes , So the following will mainly introduce the simple usage of the tree with check box .

First, let's see what the tree looks like

Yes , It's like the ghost above .

If you want to use this tree, you must first introduce easyUI Styles and libraries for （ Be careful ：easyUI It depends on jquery Of , So we need to introduce jquery To introduce easyui）

Then we need to define the container to display the tree

<ul id="tt3" class="easyui-tree" data-options="animate:true,checkbox:true"></ul>

Here again id Is a must , Because this can be used to operate the tree many times id,

data-options Are some configuration parameters of this tree :

animate:true     Is to make the tree expand or shrink to display animation ,

checkbox:true   Is to display a tree with checkboxes ,

url: Hyperlinks     Used to load y Hyperlink address of remote data ,

method:post/get   Access to data http Request method ,

onlyLeafCheck:false   Whether the check box is displayed only at the leaf node ,

dnd:false   Whether drag and drop is supported

data:arry   Node data to be loaded  

Note that each node must have a fixed format , Otherwise it won't be recognized . Each node includes the following ：

• id： Unique identification of the node .
• text： The text displayed on the node .
• checked： Whether the node is selected .
• attributes： Custom attributes of nodes .
• target： The goal is DOM object .

I have a simple tree data here

var rootData = [  {
        id: '1',
        name: ' This is the first floor （1）',
        'children': [  {
                id: '1.1',
                name: ' This is the second floor （1.1）',
                'children': [  {
                        id: '1.1.1',
                        name: ' This is the third level （1.1.1）',
                        'children': []  },
                    {
                        id: '1.1.2',
                        checked: 'true',
                        name: ' This is the third level （1.1.2）',
                        'children': []  }
                ]  },
            {
                id: '1.2',
                name: ' This is the second floor （1.2）',
                'children': []  },
            {
                id: '1.3',
                name: ' This is the second floor （1.3）',
                'children': []  }
        ]  },
    {
        id: '2',
        name: ' This is the first floor （2）',
        'children': [  {
                id: '2.1',
                name: ' This is the second floor （2.1）',
                'children': []  },
            {
                id: '2.2',
                name: ' This is the second floor （2.2）',
                'children': []  },
            {
                id: '2.3',
                name: ' This is the second floor （2.3）',
                'children': []  }

        ]  },
    {
        id: '3',
        name: ' This is the first floor （3）',
        'children': []  }
];

Many people see this data and find that my tree is not used text It's using name ;（ In fact, the data in my project is name So I changed easyui The library of ）

here Of item Is the object of each node , After I change this, I can display the name of the tree node

How to assign the number of this tree to the one above id by tt3 Of div Well ？ In fact, it's very simple, just a simple line js The code can be implemented

$('#tt3').tree({
  data: rootData});

Since it is checked , So how to find the node of the tree we have checked is a very important thing , Of course easyui It still provides methods , This method is

var chsoeNodeArry = [ ];
chsoeNodeArry = $('#tt3').tree('getChecked');

Through this method, we can get an array of all nodes checked .

Of course, there are many operations on trees ,easyui It also provides many events and methods

For example, click a node to edit it

<ul id="tt" class="easyui-tree"  data-options="url:'tree_data.json',animate:true,onClick:function(node){$(this).tree('beginEdit',node.target)}"></ul>

You can go here jQuery EasyUI 1.3 Chinese document -- Data tables and tree menus Go to see more events and methods .