专栏首页Dawnzhang的开发者手册easyui 进阶之tree的常见操作 easyui 进阶之表单校验、自定义校验

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

前言

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 进阶之表单校验、自定义校验

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • https与http的区别?

    Dawnzhang
  • 数据结构与算法学习笔记之为用于高考名次排序的排序算法

      在高考结束以后,所有人都在等着成绩,政府部门面对几百万的数据,你知道他们是怎么算名次的么?上一次学到递归排序以及快排,确实,用他们可以实现,可是他们的时间复...

    Dawnzhang
  • @Controller和@RestController的区别?

    1)如果只是使用@RestController注解Controller,则Controller中的方法无法返回jsp页面,配置的视图解析器InternalRes...

    Dawnzhang
  • MyBatis之级联——鉴别器

    鉴别器(discriminator)是MyBatis为我们提供的第三个级联也是最后一个。基于之前两篇级联中的场景,现增加学生们去体检,但男女体检项目不一样,我们...

    用户1148394
  • mybatis中的#号与$符号的区别

    #{变量名}可以进行预编译、类型匹配等操作,#{变量名}会转化为jdbc的类型。 select * from tablename where id = #{i...

    斯文的程序
  • 【每日学习MyBaits基础】之关联查询

    用户5640963
  • 课程笔记1--fMRI简介以及数据分析

    现代的神经影像学技术有这样几种::脑电图(EEG), 单光子发射体层成像(SPECT), 正电子发射型计算机断层显像(PET), 功能性磁共振成像(fMRI),...

    锦小年
  • APT 为什么不使用 HTTPS 协议?

    (这篇文章代表了一段时间前,特别是在CVE-2019-3462之前的情形。它并不代表我的个人意见,也不代表Debian / Ubuntu。)

    Seebug漏洞平台
  • Python3安装BeautifulSo

                python f:\python36\beautifulsoup4-4.5.1\setup.py install

    py3study
  • 【谷歌云机器学习创业大赛前三名出炉】医疗、推荐系统和数据标记最受青睐

    【新智元导读】今年3月,谷歌联合 7 家顶级风投资本,联合举办机器学习初创公司大赛,挑选底层机器学习技术最具独特性,可扩展,产品能市场化的公司进行投资。今天,竞...

    新智元

扫码关注云+社区

领取腾讯云代金券