EasyUI中树的基本操作

最新推荐文章于 2024-03-29 16:57:11 发布
最新推荐文章于 2024-03-29 16:57:11 发布
阅读量751 收藏 2
点赞数
分类专栏： EasyUI EasyUI入门学习教程 文章标签： 树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92847773
版权

场景

效果

树（tree）定义在 <ul> 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 <li> 元素。

属性

名称类型描述默认值
urlstring获取远程数据的 URL 。null
methodstring检索数据的 http 方法（method）。post
animateboolean定义当节点展开折叠时是否显示动画效果。false
checkboxboolean定义是否在每个节点前边显示复选框。false
cascadeCheckboolean定义是否级联检查。true
onlyLeafCheckboolean定义是否只在叶节点前显示复选框。false
linesboolean定义是否显示树线条。false
dndboolean定义是否启用拖放。false
dataarray要加载的节点数据。 
 
  1. $('#tt').tree({
  2. data: [{
  3. text: 'Item1',
  4. state: 'closed',
  5. children: [{
  6. text: 'Item11'
  7. },{
  8. text: 'Item12'
  9. }]
  10. },{
  11. text: 'Item2'
  12. }]
  13. });
null
formatterfunction(node)定义如何呈现节点文本。
代码实例： 
 
  1. $('#tt').tree({
  2. formatter:function(node){
  3. return node.text;
  4. }
  5. });
 
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：
param：要传递到远程服务器的参数对象。
success(data)：当检索数据成功时调用的回调函数。
error()：当检索数据失败时调用的回调函数。		json loader
loadFilterfunction(data,parent)返回要显示的过滤数据。返回数据时以标准树格式返回的。该函数有下列参数：
data：要加载的原始数据。
parent：DOM 对象，表示父节点。		 

事件

很多事件的回调函数需要 'node' 参数，它包括下列属性：

  • id：绑定到节点的标识值。
  • text：要显示的文本。
  • iconCls：用来显示图标的 css class。
  • checked：节点是否被选中。
  • state：节点状态，'open' 或 'closed'。
  • attributes：绑定到节点的自定义属性。
  • target：目标的 DOM 对象。
名称参数描述
onClicknode当用户点击一个节点时触发。代码实例： 
 
  1. $('#tt').tree({
  2. onClick: function(node){
  3. alert(node.text); // alert node text property when clicked
  4. }
  5. });
onDblClicknode当用户双击一个节点时触发。
onBeforeLoadnode, param当加载数据的请求发出前触发，返回 false 则取消加载动作。
onLoadSuccessnode, data当数据加载成功时触发。
onLoadErrorarguments当数据加载失败时触发，arguments 参数与 jQuery.ajax 的 'error' 函数一样。
onBeforeExpandnode节点展开前触发，返回 false 则取消展开动作。
onExpandnode当节点展开时触发。
onBeforeCollapsenode节点折叠前触发，返回 false 则取消折叠动作。
onCollapsenode当节点折叠时触发。
onBeforeChecknode, checked当用户点击复选框前触发，返回 false 则取消该选中动作。该事件自版本 1.3.1 起可用。
onChecknode, checked当用户点击复选框时触发。
onBeforeSelectnode节点被选中前触发，返回 false 则取消选择动作。
onSelectnode当节点被选中时触发。
onContextMenue, node当右键点击节点时触发。代码实例： 
 
  1. // right click node and then display the context menu
  2. $('#tt').tree({
  3. onContextMenu: function(e, node){
  4. e.preventDefault();
  5. // select the node
  6. $('#tt').tree('select', node.target);
  7. // display context menu
  8. $('#mm').menu('show', {
  9. left: e.pageX,
  10. top: e.pageY
  11. });
  12. }
  13. });
  14.  
  15. // the context menu is defined as below:
  16. <div id="mm" class="easyui-menu" style="width:120px;">
  17. <div οnclick="append()" data-options="iconCls:'icon-add'">Append</div>
  18. <div οnclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
  19. </div>
onBeforeDragnode当节点的拖拽开始时触发，返回 false 则禁止拖拽。该事件自版本 1.3.2 起可用。
onStartDragnode当开始拖拽节点时触发。该事件自版本 1.3.2 起可用。
onStopDragnode当停止拖拽节点时触发。该事件自版本 1.3.2 起可用。
onDragEntertarget, source当节点被拖拽进入某个允许放置的目标节点时触发，返回 false 则禁止放置。
target：被放置的目标节点元素。
source：被拖拽的源节点。
该事件自版本 1.3.2 起可用。
onDragOvertarget, source当节点被拖拽到允许放置的目标节点上时触发，返回 false 则禁止放置。
target：被放置的目标节点元素。
source：被拖拽的源节点。
该事件自版本 1.3.2 起可用。
onDragLeavetarget, source当节点被拖拽离开允许放置的目标节点时触发。
target：被放置的目标节点元素。
source：被拖拽的源节点。
该事件自版本 1.3.2 起可用。
onBeforeDroptarget,source,point节点被放置之前触发，返回 false 则禁止放置。
target：DOM 对象，放置的目标节点。
source：源节点。
point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。
该事件自版本 1.3.2 起可用。
onDroptarget,source,point当节点被放置时触发。 target：DOM 对象，放置的目标节点。
source：源节点。
point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。
onBeforeEditnode编辑节点前触发。
onAfterEditnode编辑节点后触发。
onCancelEditnode当取消编辑动作时触发。

方法

名称参数描述
optionsnone返回树的选项（options）。
loadDatadata加载树的数据。
getNodetarget获取指定的节点对象。
getDatatarget获取指定的节点数据，包括它的子节点。
reloadtarget重新加载树的数据。
getRootnone获取根节点，返回节点对象。
getRootsnone获取根节点，返回节点数组。
getParenttarget获取父节点，target 参数表示节点的 DOM 对象。
getChildrentarget获取子节点， target 参数表示节点的 DOM 对象。
getCheckedstate获取选中的节点。状态可用值有：'checked'、'unchecked'、'indeterminate'。如果状态未分配，则返回 'checked' 节点。
代码实例： 
 
  1. var nodes = $('#tt').tree('getChecked'); // get checked nodes
  2. var nodes = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes
  3. var nodes = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes
  4. var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and indeterminate nodes
getSelectednone获取选中的节点并返回它，如果没有选中节点，则返回 null。
isLeaftarget把指定的节点定义成叶节点，target 参数表示节点的 DOM 对象。
findid找到指定的节点并返回该节点对象。代码实例： 
 
  1. // find a node and then select it
  2. var node = $('#tt').tree('find', 12);
  3. $('#tt').tree('select', node.target);
selecttarget选中一个节点，target 参数表示节点的 DOM 对象。
checktarget把指定节点设置为勾选。
unchecktarget把指定节点设置为未勾选。
collapsetarget折叠一个节点，target 参数表示节点的 DOM 对象。
expandtarget展开一个节点，target 参数表示节点的 DOM 对象。当节点关闭且没有子节点时，节点的 id 值（名为 'id' 参数）将被发送至服务器以请求子节点数据。
collapseAlltarget折叠所有的节点。
expandAlltarget展开所有的节点。
expandTotarget从根部展开一个指定的节点。
scrollTotarget滚动到指定节点。该方法自版本 1.3.4 起可用。
appendparam追加一些子节点到一个父节点，param 参数有两个属性：
parent：DOM 对象，要追加到的父节点，如果没有分配，则追加为根节点。
data：数组，节点的数据。

代码实例： 
 
  1. // append some nodes to the selected node
  2. var selected = $('#tt').tree('getSelected');
  3. $('#tt').tree('append', {
  4. parent: selected.target,
  5. data: [{
  6. id: 23,
  7. text: 'node23'
  8. },{
  9. text: 'node24',
  10. state: 'closed',
  11. children: [{
  12. text: 'node241'
  13. },{
  14. text: 'node242'
  15. }]
  16. }]
  17. });
toggletarget切换节点的展开/折叠状态，target 参数表示节点的 DOM 对象。
insertparam在指定节点的前边或后边插入一个节点，param 参数包括下列属性：
before：DOM 对象，前边插入的节点。
after：DOM 对象，后边插入的节点。
data：对象，节点数据。

下面的代码演示了如何在选中节点之前插入一个新的节点： 
 
  1. var node = $('#tt').tree('getSelected');
  2. if (node){
  3. $('#tt').tree('insert', {
  4. before: node.target,
  5. data: {
  6. id: 21,
  7. text: 'node text'
  8. }
  9. });
  10. }
removetarget移除一个节点和它的子节点，target 参数表示节点的 DOM 对象。
poptarget弹出一个节点和它的子节点，该方法和 remove 一样，但是返回了移除的节点数据。
updateparam更新指定的节点，'param' 参数有下列属性：
target（DOM 对象，要被更新的节点）、id、text、iconCls、checked，等等。

代码实例： 
 
  1. // update the selected node text
  2. var node = $('#tt').tree('getSelected');
  3. if (node){
  4. $('#tt').tree('update', {
  5. target: node.target,
  6. text: 'new text'
  7. });
  8. }
enableDndnone启用拖放功能。
disableDndnone禁用拖放功能。
beginEdittarget开始编辑节点。
endEdittarget结束编辑节点。
cancelEdittarget取消编辑节点。

实现

使用基本的ul元素构造树

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>

</body>
</html>

使用js加载json数据构造树

每个节点可以包括下列属性：

id：节点的 id，它对于加载远程数据很重要。
text：要显示的节点文本。
state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。
checked：指示节点是否被选中。
attributes：给一个节点添加的自定义属性。
children：定义了一些子节点的节点数组。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>
<ul id="tree2">

</ul>
<script type="text/javascript">
    $(function () {
        $("#tree2").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#"
                }]
            }]
        })
    })
</script>
</body>
</html>

效果

可编辑的树

设置点击事件为可以编辑，设置编辑之后的事件为提示节点内容，获取到节点内容就可以进行ajax提交数据等其他操作。

  onClick:function (node) {
                $(this).tree("beginEdit",node.target);
            },
            onAfterEdit:function (node) {
                alert("编辑后的节点内容为："+node.text)
   }

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>
<ul id="tree2">

</ul>
<script type="text/javascript">
    $(function () {
        $("#tree2").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#"
                }]
            }],
            onClick:function (node) {
                $(this).tree("beginEdit",node.target);
            },
            onAfterEdit:function (node) {
                alert("编辑后的节点内容为："+node.text)
            }
        })
    })
</script>
</body>
</html>

效果

给树添加追加与删除菜单

效果

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>
<ul id="tree2">

</ul>
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>
    <div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
<script type="text/javascript">
    $(function () {
        $("#tree2").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#"
                }]
            }],
            onClick:function (node) {
                $(this).tree("beginEdit",node.target);
            },
            onAfterEdit:function (node) {
                alert("编辑后的节点内容为："+node.text)
            },
            onContextMenu:function (e,node) {
                //阻止原来的右键事件
                e.preventDefault();
                $(this).tree("select",node.target);
                $("#mm").menu("show",{
                    left:e.pageX,
                    top:e.pageY
                })
            }
        })
    })
    var id={};
    function appendNode(){
        var selected =$("#tree2").tree("getSelected");
        var node ={
            parent:selected.target,
            data:[
                {
                    id:++id,
                    text:''
                }
            ]
        }
        $("#tree2").tree("append",node);
        node=$("#tree2").tree("find",id);
        $("#tree2").tree("beginEdit",node.target);
    }
    function insertNode() {
        var selected =$("#tree2").tree("getSelected");
        var node={
            id:++id,
            text:''
        }
        $("#tree2").tree("insert",{
            after:selected.target,
            data:node
        });
        node=$("#tree2").tree("find",id);
        $("#tree2").tree("beginEdit",node.target);
    }
    function removeNode() {
        selected =$("#tree2").tree("getSelected");
        $("#tree2").tree("remove",selected.target);
    }
</script>
</body>
</html>

拖拽树效果

设置dnd属性为true,onDrop事件是拖拽之后的事件。

source能获取拖拽前的节点，target能获取拖拽后的节点。

 

dnd:true,
            onDrop:function(target,source,point){
                alert("原来的节点："+source.text);
                alert("新的节点："+$(this).tree("getNode",target).text)
            }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>
<ul id="tree2">

</ul>
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>
    <div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
<script type="text/javascript">
    $(function () {
        $("#tree2").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#"
                }]
            }],
            onClick:function (node) {
                $(this).tree("beginEdit",node.target);
            },
            onAfterEdit:function (node) {
                alert("编辑后的节点内容为："+node.text)
            },
            onContextMenu:function (e,node) {
                //阻止原来的右键事件
                e.preventDefault();
                $(this).tree("select",node.target);
                $("#mm").menu("show",{
                    left:e.pageX,
                    top:e.pageY
                })
            },
            dnd:true,
            onDrop:function(target,source,point){
                alert("原来的节点："+source.text);
                alert("新的节点："+$(this).tree("getNode",target).text)
            }
        })
    })
    var id={};
    function appendNode(){
        var selected =$("#tree2").tree("getSelected");
        var node ={
            parent:selected.target,
            data:[
                {
                    id:++id,
                    text:''
                }
            ]
        }
        $("#tree2").tree("append",node);
        node=$("#tree2").tree("find",id);
        $("#tree2").tree("beginEdit",node.target);
    }
    function insertNode() {
        var selected =$("#tree2").tree("getSelected");
        var node={
            id:++id,
            text:''
        }
        $("#tree2").tree("insert",{
            after:selected.target,
            data:node
        });
        node=$("#tree2").tree("find",id);
        $("#tree2").tree("beginEdit",node.target);
    }
    function removeNode() {
        selected =$("#tree2").tree("getSelected");
        $("#tree2").tree("remove",selected.target);
    }
</script>
</body>
</html>

 

霸道流氓气质
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
10-23
主要帮大家轻松学习jQuery插件EasyUI，并利用EasyUI实现拖动基本操作，文章并提供了一个学校课程表简单实例，感兴趣的小伙伴们可以参考一下
JQUERY EASYUI 异步树
11-22
JQUERY EASYUI 异步树
【前端】- 在使用Element UI 的el-tree组件时，从底层去研究如何去实现一键展开/关闭【tree节点】的功能
最新发布
2302_78387246的博客
03-29 2308
【已实现】- 【el-tree一键展开/折叠】 - 在使用Element UI 的el-tree组件时，从底层去研究如何去实现一键展开/关闭【tree节点】的功能
jquery中EasyUI实现异步树
10-24
前面我们分享了使用jquery中EasyUI实现同步树的代码，本文我们就来看下使用EasyUI实现异步树的方法和示例，希望小伙伴们能够喜欢。
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作（2）
10-23
主要帮助大家轻松学习jQuery插件EasyUI，针对EasyUI实现树形网络基本操作，分为三大方面：动态加载、添加分页、以及惰性加载节点，感兴趣的小伙伴们可以参考一下
EasyUI tree常用方法
flyxiaokang的博客
06-14 2705
EasyUI tree
EasyUI Tree 树
Charge8的博客
10-07 6691
  一、EasyUI Tree 树：http://www.jeasyui.net/plugins/185.html 树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。 用法 树（tree）定义在 &lt;ul&gt; 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 &lt;li&gt; 元素。 属性 每个节点可以包括下列属性：...
easyui的tree（静态树/动态树）
qq_45547474的博客
06-21 3276
easyui的tree一、tree简介二、tree组件工具类的实现思路三、tree组件工具类的使用四、总结二级目录三级目录 一、tree简介 二、tree组件工具类的实现思路 三、tree组件工具类的使用 四、总结 二级目录 三级目录 ...
EasyUi之Tree组件（一）
hhhhhhhhzsw的博客
06-22 707
目录EasyUi tree组件Tree组件案例总结 EasyUi tree组件 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 树结构的数据是在同一个表中，A数据的id是B数据的外键，以此表示A节点的下一级节点为B。 如上图，新增的pid与书籍管理的id值是相同的，那么，书籍管理就是新增的父节点。如果pid为0的话就是没有父节点。 Tree组件案例 jsp页面 <%@ page language="java" contentType="te
Easyui入门（Tree简介）
月亮投递员的博客
06-21 455
Tree简介前言Tree简介Tree简介Tree简介总结 前言 Tree简介 Tree简介 Tree简介 总结
EasyUI（tree组件）
m0_46690290的博客
06-22 482
tree组件tree（树的简介）树控件数据格式化目标工具（jar包与通用类）三级目录 tree（树的简介） 树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。 树控件数据格式化 1.每个节点都具备以下属性： 属性 释义 id 节点ID，对加载远程数据很重要。 text 显示节点文本。 state 节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。 check
轻松学习jQuery插件EasyUI EasyUI创建树形网络（1）
10-23
在本文中，我们将深入探讨如何使用jQuery插件EasyUI创建树形...如果想要进一步学习EasyUI的树形网络操作，可以查阅《轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作（2）》这篇文章，获取更多实用技巧和示例。
浅谈EasyUI中编辑treegrid的方法
09-03
在EasyUI框架中，TreeGrid是一种结合了树形结构与表格的数据展示组件，它能够以层级方式呈现数据，同时提供表格的编辑功能。在本文中，我们将深入探讨如何在EasyUI中实现TreeGrid的编辑功能。 首先，创建一个...
jquery_easyui 中文手册
07-05
它支持拖动、最大化、最小化和关闭等基本操作，还可以设置窗口大小、位置、标题、图标等属性。通过`$.fn.window`方法可以创建和控制窗口，例如`$("#element").window("open")`来打开一个窗口。 **2. easyui-panel：...
EasyUI –tree、combotree学习总结
cillent_boy的专栏
07-04 1793
一、tree总结 （一）、tree基本使用 tree控件是web页面中将数据分层一树形结构显示的。 使用$.fn.tree.defaults重写默认值对象。 tree控件在页面上以<ul></ul>标签标识。 例如： <ulid="tt"class="easyui-tree"> <li> &l...
Jquery easyui tree 一些常见操作
佳颖的专栏
05-19 494
Jquery easyui tree 一些常见操作 遍历tree nodes function Travel(treeID){//参数为树的ID，注意不要添加#    var roots=$('#'+treeID).tree('getRoots'),children,i,j;    for(i=0;i      alert(roots[i].text);      childr
EasyUI之Tree结构实现
Dawn.x的博客
06-22 637
目录Tree(树)结构的两种方式实现步骤及注意点Tree案例源码及效果 Tree(树)结构的两种方式 首先我们看一下官方文档中的使用介绍: 第一种方式，就是在HTML页面直接引入，效果如下: 但是我们在实际项目中，不可能在页面绑定固定的值，如果在上面这种方式中，使用jQuery传入Json值，又显得太过于多余，所以，EasyUI还提供了一种更为便捷的方式实现： 实现步骤及注意点 这篇博文主要使用第二种简便开发的方式去介绍使用步骤，首先我们要清楚EasyUI的Tree结构的原理: 页面定义一个空 ul标签
jQuery EasyUI_02 快速入门 tree树形菜单&选项卡
m0_60786924的博客
05-06 1599
一、全局path定义 形式：<base href=""> base:引入路径 作用：标准化路径格式为全路径 base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面 <base href = "${pageContext.request.servletContext.contextPath}/static/"> var globalPath = "......
easyui 树形控件
06-03
EasyUI 树形控件是一种基于 jQuery 的 UI 组件，可以用于展示树形结构的数据。它提供了灵活的配置选项，如节点图标、节点文本、节点状态等等，同时支持加载远程数据和异步加载。在使用 EasyUI 树形控件时，可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值