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" }]

 

相关文章

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

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

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