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":,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": ,
            "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"
}]

相关文章

easyui 进阶之表单校验、自定义校验

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

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