EXt tree 简单增、删、改、查

来源：互联网发布：校园网络建设投标书编辑：程序博客网时间：2024/06/05 05:25

刚学习，有很多不足，忘大家一起交流，

注：在修改的地方有些问题，还没有解决，如有知道的，忘交流！

js:

Ext.onReady(function() {

// 树形面板
var tree = new Ext.tree.TreePanel({
    id : 'tree-mianban',
    title : '树',
    region : 'west',
    animate : true,
    enableDD : true,
    containerScroll : false,
    loader : new Ext.tree.TreeLoader({
       dataUrl : 'scripts/advancedTree01.json'
      }),
    lines : true,
    // selModel : new Ext.tree.MultiSelectionModel(),
    containerScroll : false,
    border : true
   });
// 根节点
var root = new Ext.tree.AsyncTreeNode({
  text : '木叶',
  draggable : false,
  id : 'root'
   // /children : json
  });
// 树形编辑器
var treeEditer = new Ext.tree.TreeEditor(Ext.getCmp('tree-mianban'), {
  id : 'tree-Manage',
  allowBlank : false
   // 输入值不可以为空
  });
// 弹出窗口
var win = new Ext.Window({
    maskDisabled : false,
    id : 'tree-window',
    modal : true,// 是否为模式窗口
    constrain : true,// 窗口只能在viewport指定的范围
    closable : true,// 窗口是否可以关闭
    closeAction : 'hide',
    layout : 'fit',
    width : 300,
    height : 200,
    plain : true,
    items : [{
       id : 'tree-window-view',
       border : false
      }]
   });

// 给tree添加事件
tree.on('rightClickCont', tree.rightClick, tree);

// 模块销毁函数
function destroy() {
this.win.destroy();// 将win窗口销毁，否则在IE中会报错
}

// 本例的主角，加载 tree TreePanel
tree.setRootNode(root);
tree.render(document.body);
root.expand(true, true);

// 定义右键菜单
var rightClick = new Ext.menu.Menu({
    id : 'rightClickCont',
    items : [{
       id : 'addNode',
       text : '添加',
       // 增加菜单点击事件
       menu : [{
          id : 'insertNode',
          text : '添加兄弟节点',
          handler : function(tree) {

           insertNode();
          }

         }, {
          id : 'appendNode',
          text : '添加儿子节点',
          handler : function(tree) {

           appendNodeAction();
          }
         }]
      }, '-', {
       id : 'delNode',
       text : '删除',
       handler : function(tree) {

        delNodeAction();
       }
      }, {
       id : 'modifNode',
       text : '修改',
       handler : function() {

        modifNodeAction()
       }
      }, {
       id : 'viewNode',
       text : '查看',
       handler : function(tree) {

        veiwNodeAction();
       }
      }]
   });
// 添加点击事件
tree.on('click', function(node) {
    if (node.id != 'root') {
     // alert(node.id);
     alert('我是：' + node.text + ',我的id是' + node.id + '');
    }
   });

// 增加右键弹出事件
tree.on('contextmenu', function(node, event) {// 声明菜单类型
    event.preventDefault();// 这行是必须的，使用preventDefault方法可防止浏览器的默认事件操作发生。

    node.select();
    rightClick.showAt(event.getXY());// 取得鼠标点击坐标，展示菜单
   });

// 添加兄弟节点事件实现
function insertNode() {

var selectedNode = tree.getSelectionModel().getSelectedNode();

  setTimeout(function() {
     treeEditor.editNode = newNode;
     treeEditor.startEdit(newNode.ui.textNode);
    }, 10);
};

// 添加子节点事件实现
function appendNodeAction() {

  var selectedNode = tree.getSelectionModel().getSelectedNode();
  if (selectedNode.isLeaf()) {
   selectedNode.leaf = false;
  }
  var newNode = selectedNode.appendChild(new Ext.tree.TreeNode({
     text : '新建节点' + selectedNode.id
    }));
  newNode.parentNode.expand(true, true, function() {
     tree.getSelectionModel().select(newNode);
     setTimeout(function() {
        treeEditor.editNode = newNode;
        treeEditor.startEdit(newNode.ui.textNode);
       }, 10);
    });// 将上级树形展开
}
// 删除节点事件实现
function delNodeAction() {

  var selectedNode = tree.getSelectionModel().getSelectedNode();
  // 得到选中的节点
  selectedNode.remove();
};
// 修改节点事件实现
function modifNodeAction() {

  var selectedNode = tree.getSelectionModel().getSelectedNode();// 得到选中的节点
  treeEditor.editNode = selectedNode;
  treeEditor.startEdit(selectedNode.ui.textNode);
};
// 查看事件实现
function veiwNodeAction() {

  var viewPanel = Ext.getCmp('tree-window-view');
  var selectedNode = tree.getSelectionModel().getSelectedNode();
  // 得到选中的节点
  var tmpid = selectedNode.attributes.id;
  var tmpname = selectedNode.attributes.text;
  var tmpdes = selectedNode.attributes.des;

win.setTitle(tmpname + '的介绍');
win.show();

  var dataObj = {
   id : tmpid,
   name : tmpname,
   des : tmpdes
  }
  var tmpTpl = new Ext.Template([
    '<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',
    '<div style="margin:10px">名称:{name}</div>',
    '<div style="margin:10px">描述:{des}</div></div>']);

tmpTpl.overwrite(viewPanel.body, dataObj);

};

});

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Drag and Drop between 2 TreePanels</title>
<link rel="stylesheet" type="text/css"
href="D:/ext-2.2.1/resources/css/ext-all.css" />
<script type="text/javascript"
src="D:/ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="D:/ext-2.2.1/ext-all.js"></script>
<script type="text/javascript" src="./treelip.js"></script>
</head>
<div></div>
<body>
</body>
</html>

json:

[
  {
   "text":"卡卡西班",
   "id":"01",
   "allowDrag":false,
   "des":"最强的组合！",
    "children":[
    {"text":"小樱","id":"0101","allowDrag":false,"des":"一个很可爱的女孩！","children":[
            {"text":"小樱1","id":"010101","leaf":true,"allowDrag":true,"des":"一个很可爱的女孩！"},
            {"text":"鸣人1","id":"010202","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},
            {"text":"佐助1","id":"010303","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}
             ]
    },
    {"text":"鸣人","id":"0102","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},
    {"text":"佐助","id":"0103","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}
   ]
  },
  {
   "text":"凯班",
   "id":"02",
   "allowDrag":false,
   "des":"有一个很白痴的老师！",
   "children":[
    {"text":"小李","id":"0201","leaf":true,"allowDrag":true,"des":"他的努力意识值得任何人学习！"},
    {"text":"宁次","id":"0202","leaf":true,"allowDrag":true,"des":"白眼族的天才忍者！"},
    {"text":"天天","id":"0203","leaf":true,"allowDrag":true,"des":"她救活了一个暗器公司！"}
   ]
  }
]