easyui 进阶之tree的常见操作 easyui 进阶之表单校验、自定义校验

Dawnzhang

发布于 2018-12-21 15:41:06

9670

发布于 2018-12-21 15:41:06

文章被收录于专栏：Dawnzhang的开发者手册

前言

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:[{

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);
        },

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);
　　　　　　　　　
                }
            });

操作完以后我们的数据为

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-11-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

java

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

java

登录后参与评论

0 条评论

热度