JQuery EasyUI(47)

最新推荐文章于 2022-11-19 17:11:20 发布

Roger_CoderLife

最新推荐文章于 2022-11-19 17:11:20 发布

阅读量248

点赞数

分类专栏： WEB - jQuery EasyUI

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

第三十六章： Tree（数）组件【4】

学习要点：

方法列表

一、方法列表：

Tree方法
方法名	参数	说明
options	none	返回树控件属性。
loadData	data	读取树控件属性。
getNOde	target	获取指定节点对象。
getData	target	获取指定节点数据，包含他的子节点。
reload	target	重新载入树控件数据。
getRoot	none	获取根节点，返回节点对象。
getRoots	none	获取所有根节点，返回节点数组。
getParent	target	获取父节点，'target'参数代表节点的DOM对象。
getChildren	target	获取所有的子节点，'target'参数代表节点的DOM对象。
getChecked	state	获取所有选中的节点。'state'可用值有：'checked'，'unchecked'，'indeterminate'。如果'state'未指定，将返回'checked'节点。
getSelected	none	获取选择节点并返回它，如果未选择则返回null。
isLeaf	target	判断指定的节点是不是子节点。'target'参数代表节点的DOM对象。
find	id	查找指定节点并返回节点对象。
select	target	选择一个节点，'target'参数代表节点的DOM对象。
check	target	选择指定节点。
uncheck	target	取消选中指定节点。
collapse	target	折叠一个节点。'target'参数代表节点的DOM对象。
expand	target	展开一个节点。'target'参数代表节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值（名为ID的参数）将会发送给服务器请求子节点的数据。
collapseAll	target	折叠所有节点。
expandAll	target	展开所有节点。
expandTo	target	打开从根节点到指定节点之间的所有节点。
scrollTo	target	滚动到指定节点。
append	param	追加若干子节点到一个父节点，param参数有两个属性：parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。data：数组，节点数据。
toggle	target	打开或关闭节点的触发器，target参数是一个节点DOM对象。
insert	param	在一个指定节点之前或之后插入节点，'param'参数包含以下属性：before：DOM对象，在某个节点之前插入。after：DOM对象，在某个节点之后插入。data：对象，节点数据。
remove	target	移除一个节点和它的子节点，'target'参数是该节点的DOM对象。
pop	target	移除一个节点和它的子节点，该方法和remove方法一样。不同的是它将返回被移除的节点数据。
update	param	更新指定节点，'param'参数包括以下属性：target（DOM对象，将被更新的目标节点。），id，text， iconCls，check等。
enableDnd	none	启动拖拽功能。
disableDnd	none	禁用拖拽功能。
beginEdit	target	开始编辑一个节点。
endEdit	target	结束编辑一个节点。
cancelEdit	target	取消编辑一个节点。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>   
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>           
</head>
  <body>
   <ul id="box"></ul>
   <div id="mune" class="easyui-mune" style="width:120px;display:none;">
        <div onClick="" iconCls="icon-add">添加</div>
        <div onClick="" iconCls="icon-remove">删除</div>
        <div onClick="" iconCls="icon-Edit">修改</div>
   </div>
   <input type="button" value="按钮" onclick="abc();">   
  </body>
</html>

$(function(){
    $('#box').tree({
       url:'tree.json',
       animate:ture,
       checkbox:true,
       cascadeCheck:false,
       onlyLeafCheck:true,
       lines:true,
       dnd:true,

  onclick:function(node){
       //colsole.log($('#box').tree('getNode',node.target));
       //colsole.log($('#box').tree('getData',node.target));
       //colsole.log($('#box').tree('getParent',node.target));
       //colsole.log($('#box').tree('getChildren',node.target));
       //colsole.log($('#box').tree('isLeaf',node.target));
      },

  onDblclick:function(node){
        $('#box').tree('beginEdit',node.target);
         },

  onAfterEdit:function(){
        alert("执行服务器端！");
      }
  });
});

function abc(){

    /*
    $('#box').tree('loadData',[{
             text:'加载'
            }]);
    */

    //$('#box').tree('reload');
    //console.log($('#box').tree('getRoot'));
    //console.log($('#box').tree('getRoots'));
    //console.log($('#box').tree('getChecked'));
    //console.log($('#box').tree('getChecked','unchecked'));
    //console.log($('#box').tree('getSelected'));
    var node = $('#box').tree('find',7);
    //$('#box').tree('select',node.target);
    //$('#box').tree('uncheck',node.target);
    //$('#box').tree('check',node.target);
    //$('#box').tree('collapse',node.target);
    //$('#box').tree('expand',node.target);
    //$('#box').tree('expandAll');
    //$('#box').tree('collapseAll');
    //$('#box').tree('expandTo',node.target);
    //$('#box').tree('scroolTo',node.target);
   
   /*
      $('#box').tree('append',{
          parent:node.target,
          data:[
            {
              text:'插入'
            }
           ]
          });


      $('#box').tree('insert',{
          before:node.target,
          data:[
            {
              text:'新增'
            }
           ]
          });

   */

    //$('#box').tree('toggle',node.target);
    //$('#box').tree('remove',node.target);

     $('#box').tree('update',{
        target:node.target,
        text:'修改'
             });
}

//tree.json
[
  { 
   "id":1,
   "text":"系统管理",
   "iconCls":"icon-save",
   "children":[
        {
           "text":"主机信息", 
           "state":"closed",         
           "children":[
               {
                 "text":"版本信息",          
               },
               {
                 "text":"数据库信息",          
               }
                    ];                    
         },
        {
           "text":"更新信息",          
         },
        {
           "text":"程序信息",          
         }
            ];
   }
  {
   "id":2,
   "text":"会员管理",
   "children":[
        {
           "id":"7",            
           "text":"新增会员",          
         },
        {
           "text":"审核会员",          
         }
            ];
   }
]

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/103850477

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载