用了一天的时间完成了对Extjs TreePanel的 增删改查与拖拽排序
一来对自己写的代码做一个总结，二来给有需要的人一些帮组，
如果代码有什么BUG或者更好的建议，欢迎大家留言
先看效果图
/**
* 定义树节点
*/
public class TreeNode {
//ID
private int id;
//展示数时显示的文本
private String text;
//是否是叶子节点
private boolean leaf;
//子节点的集合
//(@JsonInclude(Include.NON_NULL)序列化时的标记 如果为空则不参与序列化)
@JsonInclude(Include.NON_NULL)
private List<TreeNode> children;
public TreeNode() {}
public TreeNode(int id, String text, boolean leaf) {
super();
this.id = id;
this.text = text;
this.leaf = leaf;
}
public TreeNode(int id, String text, boolean leaf, List<TreeNode> children) {
super();
this.id = id;
this.text = text;
this.leaf = leaf;
this.children = children;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
}
package com.sshe.operation.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.sshe.base.controller.BaseController;
import com.sshe.operation.entity.TreeNode;
/**
* 控制层,我用的Spring3 MVC
* 4个方法分别与Extjs的API对应
* api: {
* create: 'TreeApiController.do?method=createTreeNode',
* read: 'TreeApiController.do?method=queryTreeList',
* update: 'TreeApiController.do?method=updateTreeNode',
* destroy: 'TreeApiController.do?method=destroyTreeNode'
* }
*/
@Controller
@RequestMapping("/TreeApiController.do")
public class TreeApiController extends BaseController {
/**
* 查询的方法
* 对应 read: 'TreeApiController.do?method=queryTreeList'
*/
@ResponseBody
@RequestMapping(params="method=queryTreeList")
public Object queryTreeList(ModelMap map) {
System.out.println(map);
JsonResult result = new JsonResult();
result.setSuccess(true);
result.setData(getTreeList());
return getTreeList();
}
/**
* 新增方法
* 对应create: 'TreeApiController.do?method=createTreeNode'
*/
@ResponseBody
@RequestMapping(params="method=createTreeNode")
public Object createTreeNode(ModelMap map) {
System.out.println(map);
JsonResult result = new JsonResult();
result.setSuccess(true);
return result;
}
/**
* 更新的方法
* 对应 update: 'TreeApiController.do?method=updateTreeNode'
*/
@ResponseBody
@RequestMapping(params="method=updateTreeNode")
public Object updateTreeNode(ModelMap map) {
System.out.println(map);
JsonResult result = new JsonResult();
result.setSuccess(true);
return result;
}
/**
* 删除的方法
* 对应 destroy: 'TreeApiController.do?method=destroyTreeNode'
*/
@ResponseBody
@RequestMapping(params="method=destroyTreeNode")
public Object destroyTreeNode(ModelMap map) {
System.out.println(map);
JsonResult result = new JsonResult();
result.setSuccess(true);
return result;
}
/**
* 测试数据
*/
public List<TreeNode> getTreeList() {
List<TreeNode> list = new ArrayList<TreeNode>();
TreeNode java = new TreeNode(1, "java-1", false, new ArrayList<TreeNode>());
TreeNode hibernate = new TreeNode(2, "hibernate-2", true);
TreeNode spring = new TreeNode(3, "spring-3", true);
TreeNode struts = new TreeNode(4, "struts-4", true);
java.getChildren().add(hibernate);
java.getChildren().add(spring);
java.getChildren().add(struts);
TreeNode javascript = new TreeNode(5, "javascript-5", false, new ArrayList<TreeNode>());
TreeNode extjs = new TreeNode(6, "extjs-6", false, new ArrayList<TreeNode>());
javascript.getChildren().add(extjs);
TreeNode extPlugin = new TreeNode(7, "extPlugin-7", true);
extjs.getChildren().add(extPlugin);
list.add(java);
list.add(javascript);
return list;
}
}
Ext.onReady(function() {
//GUID
function newGuid() {
var guid = "";
for (var i = 1; i <= 32; i++){
var n = Math.floor(Math.random()*16.0).toString(16);
guid += n;
if((i==8)||(i==12)||(i==16)||(i==20))
guid += "-";
}
return guid;
}
//Toopitp
Ext.tip.QuickTipManager.init();
//定义菜单
Ext.define('SimpleTasks.view.lists.ContextMenu', {
extend: 'Ext.menu.Menu',
xtype: 'listsContextMenu',
items: [
{
text: 'New List',
iconCls: 'tasks-new-list',
id: 'new-list-item'
},
{
text: 'New Folder',
iconCls: 'tasks-new-folder',
id: 'new-folder-item'
},
{
text: 'Delete',
iconCls: 'tasks-delete-folder',
id: 'delete-folder-item'
}
]
});
//Model
Ext.define('MyTreeModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'text', type: 'string'},
{name: 'index', type: 'int', persist: true}
]
});
//Store
Ext.define("MyTreeStore", {
extend: "Ext.data.TreeStore",
model: 'MyTreeModel',
proxy: {
type: 'ajax',
api: {
create: 'TreeApiController.do?method=createTreeNode',
read: 'TreeApiController.do?method=queryTreeList',
update: 'TreeApiController.do?method=updateTreeNode',
destroy: 'TreeApiController.do?method=destroyTreeNode'
},
writer: {
type: 'json',
allowSingle: false,
encode: true,
root: 'records'
}
},
root: {
id: -1,
expanded: true,
text: "My Root"
},
autoLoad: true
});
var store = Ext.create("MyTreeStore");
Ext.define("MyTreePanel", {
extend: 'Ext.tree.Panel',
title: 'Simple Tree',
width: 250,
height: 400,
store: store,
hideHeaders: true,
rootVisible: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
store.sync();
}
}
},
initComponent: function() {
var me = this;
//可编辑
me.plugins = [me.cellEditingPlugin = Ext.create('Ext.grid.plugin.CellEditing')];
//定义列
me.columns = [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
validator: function(value){
value = Ext.String.trim(value);
return value.length < 1 ? this.blankText : true;
}
}
},{
xtype: 'actioncolumn',
width: 24,
icon: 'resources/images/delete.png',
iconCls: 'x-hidden',
tooltip: 'Delete',
handler: Ext.bind(me.handleDeleteClick, me)
}];
//定义底部tbar
me.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
iconCls: 'tasks-new-list',
tooltip: 'New List',
handler: me.handleNewListClick,
scope: me
},{
iconCls: 'tasks-new-folder',
tooltip: 'New Folder',
handler: me.handleNewFolderClick,
scope: me
},{
iconCls: 'tasks-delete-folder',
id: 'delete-folder-btn',
tooltip: 'Delete Folder'
}]
}];
me.contextMenu = Ext.create("SimpleTasks.view.lists.ContextMenu");
me.callParent();
me.on("itemmouseenter", me.showActions);
me.on("itemmouseleave", me.hideActions);
me.on("edit", me.updateNode);
me.on("afterrender", me.handleAfterListTreeRender);
me.on("beforeedit", me.handleBeforeEdit, me);
//me.on("canceledit", me.handleCancelEdit);
me.on("itemcontextmenu", me.showContextMenu, me);
},
//刷新树
refreshView: function() {
//refresh the data in the view.
//This will trigger the column renderers to run,
this.getView().refresh();
},
//显示actioncolumn
showActions: function(view, list, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);
if(view.getRecord(node).get('id') != "-1") {
Ext.each(icons, function(icon){
Ext.get(icon).removeCls('x-hidden');
});
}
},
//隐藏actioncolumn
hideActions: function(view, list, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);
Ext.each(icons, function(icon){
Ext.get(icon).addCls('x-hidden');
});
},
//Handles a click on a delete icon
handleDeleteClick: function(gridView, rowIndex, colIndex, column, e, record) {
//这个model区别于普通的model
//在定义store的时候并没有定义fields或model属性,该model由treeStore自动创建
//该model包含树展示所需要的数据结构,具备parentNode,isLeaf,loaded等属性
var model = gridView.getRecord(gridView.findTargetByEvent(e));
this.deleteNode(model);
},
//删除节点
deleteNode: function(nodel) {
nodel.parentNode.removeChild(nodel);
//与服务器端同步
store.sync();
},
//更新节点
updateNode: function(editor, e) {
var me = this;
//与服务器端同步
store.sync();
},
//树加载完毕后设置默认选中第一个
handleAfterListTreeRender: function(tree) {
tree.getSelectionModel().select(0);
},
//编辑前判断跟节点不允许编辑
handleBeforeEdit: function(editingPlugin, e) {
return e.record.get('id') !== -1;
},
//取消编辑事件
handleCancelEdit: function(editor, e) {
var list = e.record,
parent = list.parentNode;
parent.removeChild(list);
this.getListTree().getSelectionModel().select([parent]);
},
//添加叶子节点
handleNewListClick: function(component, e) {
this.addNode(true);
},
//添加跟节点
handleNewFolderClick: function(component, e) {
this.addNode();
},
//添加节点
addNode: function(leaf) {
var me = this;
var listTree = me;
cellEditingPlugin = listTree.cellEditingPlugin,
selectionModel = listTree.getSelectionModel(),
selectedList = selectionModel.getSelection()[0],
parentList = selectedList.isLeaf() ? selectedList.parentNode : selectedList,
newList = Ext.create('MyTreeModel', {
id: newGuid(),
text: 'New ' + (leaf ? 'List' : 'Folder'),
leaf: leaf,
loaded: true // set loaded to true,
//so the tree won't try to dynamically load children
//for this node when expanded
}),
expandAndEdit = function() {
if(parentList.isExpanded()) {
selectionModel.select(newList);
cellEditingPlugin.startEdit(newList, 0);
} else {
listTree.on('afteritemexpand', function startEdit(list) {
if(list === parentList) {
selectionModel.select(newList);
cellEditingPlugin.startEdit(newList, 0);
// remove the afterexpand event listener
listTree.un('afteritemexpand', startEdit);
}
});
parentList.expand();
}
};
parentList.appendChild(newList);
if(listTree.getView().isVisible(true)) {
expandAndEdit();
} else {
listTree.on('expand', function onExpand() {
expandAndEdit();
listTree.un('expand', onExpand);
});
listTree.expand();
}
},
//添加右键菜单
showContextMenu: function(view, list, node, rowIndex, e) {
this.contextMenu.showAt(e.getX(), e.getY());
e.preventDefault();
}
});
Ext.create("MyTreePanel", {
renderTo: Ext.getBody()
});
});
源码压缩后太大无法上传，需要的留邮箱我发给大家
- 大小: 19.4 KB
分享到：
相关推荐
在“简单的增删改查”这个主题中，我们将探讨如何使用ExtJS实现数据管理的基本操作，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）。 首先，我们需要了解ExtJS的核心概念，如组件（Components）...
在"extjs做的增删改查"项目中，ExtJS负责前端展示和用户交互，而Struts2则负责后端业务逻辑处理和与数据库的交互。以下是关于这个主题的一些详细知识点： 1. **ExtJS组件**： - 表格（Grid）：用于显示和编辑数据...
在"ExtJS增删改查"这个主题中，我们将深入探讨如何利用ExtJS进行CRUD（创建Create、读取Read、更新Update和删除Delete）操作，这是任何数据库驱动的应用程序中的基本功能。 首先，创建（Create）操作通常涉及创建新...
这个"Extjs实现了增删改查（增加了动态树）上次升级版"项目，显然是利用ExtJS的功能来实现了一个完整的数据操作功能，包括添加、删除、修改和查询，同时还集成了一项新的特性——动态树视图。 动态树视图是ExtJS中...
ExtJS + SSH 构建Web应用的增删改查功能详解 在Web开发领域，ExtJS和SSH（Spring、Struts、Hibernate）是两种常见的技术框架。ExtJS是一款强大的JavaScript库，用于构建富客户端的用户界面，而SSH则是一个Java企业...
在"extjs完成用户增删改查"这个场景中，我们主要关注的是如何利用ExtJS 4.0实现数据管理的基本功能，包括添加（Add）、删除（Delete）、修改（Edit）和查询（Query）用户信息。下面将详细介绍这些知识点： 1. **...
在"EXTJS net 增删改查示例"中，我们将探讨如何使用EXTJS与后端网络接口（通常基于.NET框架）进行数据交互，实现常见的CRUD（Create、Read、Update、Delete）操作。这些基本操作是任何数据库驱动的应用程序的核心...
### Extjs 增删改查操作详解 #### 一、引言 在现代Web开发中，Extjs作为一款强大的JavaScript框架，被广泛应用于构建复杂的前端应用。它提供了丰富的组件库，可以方便地实现诸如表格数据展示、增删改查等常见功能。...
ExtJS的数据管理模型允许与后端服务进行交互，获取和更新数据。 5. **图片和其他资源**：可能包含图标、背景图片等，用于增强用户体验。 学习这些小例子时，你需要关注以下几个关键知识点： 1. **组件系统**：...
Extjs 实现增删改查，可以与后台代码结合起来，利于实现
这个“ExtJs4.1中文API离线BS版”提供了完整的中文文档，方便开发者在没有网络连接或者网络环境不稳定的情况下查阅。 1. **EXTJS4.1中文API**： ExtJS 4.1的中文API文档包含了框架的所有类、方法、属性和事件，这...
在这个"EXTJS4+STRUTS2+JAVA增删改查"的例子中，我们将深入探讨这三个技术如何协同工作，实现数据的动态管理。 EXTJS4是一个强大的JavaScript库，主要用于创建桌面级的Web应用程序。它提供了丰富的组件库，如表格、...
extjs增删改查分页树
本项目"Extjs_SpringMvc增删改查（自动搜索）"就是这样一个示例，展示了如何使用这两者进行数据操作和搜索功能。 首先，我们来看ExtJS在前端的角色。ExtJS提供了一套完整的组件模型，包括表格（Grid）、表单（Form...
6. **安全性考虑**：比如使用Spring Security进行权限控制，确保只有授权用户才能执行增删改查操作。 这个项目是一个很好的学习资源，展示了如何结合现代前端技术和后端框架实现一个完整的业务功能。通过研究和实践...
1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页，数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全，加载即可运行 5.VX：humingxing可随时交流
extjs4.1的中文文档，可以方便查看API
ExtJs 提供了多种组件用于实现增删改查的交互，如`Ext.form.Panel`用于创建表单，`Ext.grid.Panel`用于显示和编辑表格数据，以及`Ext.toolbar.Toolbar`用于添加操作按钮如“新增”、“编辑”、“删除”。...