easyui 进阶之tree

前言

easyui是一种基于jQuery的用户界面插件集合，它为创建现代化，互动，JavaScript应用程序，提供必要的功能，完美支持HTML5网页的完整框架，节省网页开发的时间和规模。非常的简单易学。

easyui中文网：http://www.jeasyui.net/

easyui官网：http://www.jeasyui.com/documentation/#

今天我们来学习tree

正文

一、加载树

1.静态界面加载树

在html直接加载数据，直接写死的页面

    <div class="easyui-panel" style="padding:5px">
        <ul class="easyui-tree">
            <li>
                <span>My Documents</span>
                <ul>
                    <li data-options="state:'closed'">
                        <span>Photos</span>
                        <ul>
                            <li>
                                <span>Friend</span>
                            </li>
                            <li>
                                <span>Wife</span>
                            </li>
                            <li>
                                <span>Company</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>Program Files</span>
                        <ul>
                            <li>Intel</li>
                            <li>Java</li>
                            <li>Microsoft Office</li>
                            <li>Games</li>
                        </ul>
                    </li>
                    <li>index.html</li>
                    <li>about.html</li>
                    <li>welcome.html</li>
                </ul>
            </li>
        </ul>
    </div>

效果图：

2.加载可编辑的树

<div class="easyui-panel" style="padding:5px">
        <ul id="tt" class="easyui-tree" data-options="
                url: 'tree_data1.json',
                method: 'get',
                animate: true,
                onClick: function(node){
                    $(this).tree('beginEdit',node.target);
                }
            "></ul>
    </div>

可使用 javascript 加载数据。

$('#tt').tree({
    data：[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]
});

3.加载在节点上显示额外信息的树

<div class="easyui-panel" style="padding:5px">
        <ul class="easyui-tree" data-options="
                    url:'tree_data1.json',
                    method:'get',
                    animate:true,
                    formatter:function(node){
                        var s = node.text;
                        if (node.children){
                            s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>';
                        }
                        return s;
                    }
                ">
        </ul>
    </div>

如图

4.用js加载树

引用

<ul id="tree"></ul>

js代码

$('#tree').tree({
                data:[{

		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}], 
　　　　　　　　　　onSelect: function(node){ 
　　　　　　　　　　　　console.log('选中的树的节点信息'); 
　　　　　　　　　　　　console.log(node); 
　　　　　　　　　　 } });

5.加载异步树

创建树形菜单（Tree）

<ul id="tt" class="easyui-tree"
            url="tree2_getdata.php">
    </ul>

服务器端代码

$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
 
    include 'conn.php';
 
    $result = array();
    $rs = mysql_query("select * from nodes where parentId=$id");
    while($row = mysql_fetch_array($rs)){
        $node = array();
        $node['id'] = $row['id'];
        $node['text'] = $row['name'];
        $node['state'] = has_child($row['id']) ? 'closed' : 'open';
        array_push($result,$node);
    }
 
    echo json_encode($result);
 
    function has_child($id){
        $rs = mysql_query("select count(*) from nodes where parentId=$id");
        $row = mysql_fetch_array($rs);
        return $row[0] > 0 ? true : false;
    }

二，树的属性、方法

官网api

http://www.jeasyui.com/documentation/#

三、常见树操作

1.重新加载树

$("#tree").tree({data:you_data});

$("#tree").tree("loadData",you_data);

2.定义显示节点文本

$('#tt').tree({
    formatter:function(node){
        return node.text;
    }
});

3.点击事件触发

$('#tt').tree({
    onClick: function(node){
        alert(node.text);  // alert node text property when clicked
    }
});

4.为树添加右键菜单

 // 为菜单树增加右键菜单
    $('#tree').tree({
        onContextMenu: function(e, node){
            e.preventDefault();
            // select the node
            $('#tree').tree('select', node.target);
            // display context menu
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        }
    });

树节点

<ul id="tree"></ul>

右键菜单内容

<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="add_save.add();" data-options="iconCls:'icon-add'">新增子菜单</div>
    <div onclick="menuEdit();" data-options="iconCls:'icon-edit'">编辑菜单</div>
    <div onclick="add_save.remove();" data-options="iconCls:'icon-remove'">删除</div>
</div>

5.获取选中的节点

 var menu = $('#Tree').tree('getSelected');

var nodes = $('#tree').tree('getChecked');

状态可用值有：’checked’、’unchecked’、’indeterminate’。如果状态未分配，则返回 ‘checked’ 节点。

6.追加子节点

数据最好动态加载

var selected = $('#tree').tree('getSelected');
$('#tt').tree('append', {
    parent: selected.target,
    data: [{
        id: 23,
        text: 'node23'
    },{
        text: 'node24',
        state: 'closed',
        children: [{
            text: 'node241'
        },{
            text: 'node242'
        }]
    }]
});

7.在指点节点前或后添加一个节

before：DOM 对象，前边插入的节点。
after：DOM 对象，后边插入的节点。
data：对象，节点数据。

//在节点之前添加一个节点
var node = $('#tree').tree('getSelected');
if (node){
    $('#tt').tree('insert', {
        before: node.target,
        data: {
            id: 21,
            text: 'node text'
        }
    });
}

8.更新指定节点的参数

// update the selected node text
var node = $('#tree').tree('getSelected');
if (node){
    $('#tt').tree('update', {
        target: node.target,
        text: 'new text'
    });
}

9.启动拖拽

示例：

//onBeforeDrop:在节点被放置之前触发，返回 false 则禁止放置。
onBeforeDrop:function(target,source){
            var targetNode = $(this).tree('getNode',target);
            console.log("目标节点ID："+targetNode.id);
        },

//启动拖拽属性
$("#MenuTree").tree({
    dnd:true});

10.树的迭代

在开发过程中，很多时候后台的数据不是我们树加载想要的数据，我们可以通过迭代来编辑数据，

示例：

原数据（后面统一用you_data表示）

[{
    "id": 1,
  "state": "closed",
    "children": [{
        "id": 11,
        
    },{
        "id": 12,
       
    }]
},{
    "id": 2,
   "state": "closed"
}]

我们可以发现数据中没有taxt属性，也就没有要显示的文本。。tree是看不到的，我们通过迭代操作加载出数据

 //树
$('#Tree').tree({
                data: you_data,
                onSelect: function(node){
                    console.log('选中的树的节点信息');
                    console.log(node);
　　　　　　　　　
                }
            });

//迭代循环
var oldData = [];
if(res){
    oldData=you_data;
    for(var i in oldData){　　
　　　　　　//迭代方法调用
        readTree(oldData[i],oldData);
    }
}

//为菜单树添加text
function readTree(node,data){
    var children = node.children;
    if(node.name){
        node.text=node.id;
    }
    if(children&&children.length==0)delete node.children;
    if (children && children.length) {
        node.state = "closed";
        for (var i = 0; i < children.length; i++) {
            readTree(children[i],data);
        }
    }else{
        return data;
    }
};

$("#MenuTree").tree({data:res.data});

操作完以后我们的数据为

[{
    "id": 1,
    "text": "1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "11"
    },{
        "id": 12,
        "text": "12"
    }]
},{
    "id": 2,
    "text": "2",
    "state": "closed"
}]

欢迎大家关注公众号，不定时干货，只做有价值的输出

作者：Dawnzhang
出处：https://www.cnblogs.com/clwydjgs/p/10043216.html

本文链接：https://www.cnblogs.com/clwydjgs/p/10043216.html

easyui 进阶之tree

前言

正文

一、加载树

1.静态界面加载树

2.加载可编辑的树

3.加载在节点上显示额外信息的树

4.用js加载树

5.加载异步树

二，树的属性、方法

三、常见树操作

1.重新加载树

2.定义显示节点文本

3.点击事件触发

4.为树添加右键菜单

5.获取选中的节点

6.追加子节点

7.在指点节点前或后添加一个节

8.更新指定节点的参数

9.启动拖拽

10.树的迭代

相关文章

easyui 进阶之tree的更多相关文章

随机推荐

热门专题

目录导航

easyui 进阶之tree

前言

正文

一、 加载树

1.静态界面加载树

2.加载可编辑的树

3.加载在节点上显示额外信息的树

4.用js加载树

5.加载异步树

二，树的属性、方法

三、常见树操作

1.重新加载树

2.定义显示节点文本

3.点击事件触发

4.为树添加右键菜单

5.获取选中的节点

6.追加子节点

7.在指点节点前或后添加一个节

8.更新指定节点的参数

9.启动拖拽

10.树的迭代

相关文章

easyui 进阶之tree的更多相关文章

随机推荐

热门专题

目录导航

一、加载树