本文介绍如何使用EasyUI库实现树形控件的增删改功能，包括前端JavaScript操作与后端接口设计。前端部分利用easyui-window、easyui-dialog和easyui-message实现交互；后端则通过Spring MVC框架处理数据请求。
前面提到初始化tree的方法，有的时候需求需要在前端进行树的扩展，就需要做到对树的增删改了。
有数据的操作，无非是增删改查这四种操作。
由于在这里使用了easyui-window,所以先说一说window以及其他的两种window(dialog，message)。
1.Easyui-window
官网提供的window的使用如下：
定义：可拖动悬浮的窗口，默认情况下可以调整窗口的大小，可关闭等状态。
定义方式：通过静态html定义，也可以通过js生成。
1.1 html定义window
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:'icon-save',modal:true">
Window Content
</div>简单引入easyUI样式类，就会识别成easyUI-window
1.2 JS定义window
<div id="win"></div>$('#win').window({
width:600,
height:400,
modal:true
});1.3 window的API
2.Easyui-dialog
window相对简单，处理事件也简单。Diaglog是一类比较特殊的窗口。但是定义方式都是相同的，html和js两种定义方式。
2.1 Html定义
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true">
Dialog Content.
</div>2.2 JS定义
$('#dd').dialog({
title: 'My Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
href: 'get_content.php',
modal: true
});
$('#dd').dialog('refresh', 'new_content.php');2.3 API
主要的我们来看看他提供的按钮定义方式，一般我们会在点击按钮的时候做一些事情，这些事情指的是往后台发送请求，去处理一些数据，并返回操作结果。buttons按钮组提供了handler函数去处理这些url请求操作。
在使用的时候，一般都是在js中进行声明，看起来js和html分离开来。而且对于我们定义起来也是很方便的。
比如如下定义：
$('#mydialogtemp').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交数据');
$.ajax({
url : "delTreeNode.do",
type : "post",
async : false,
data :"id="+node.id,
dataType:"json",
success : function(data) {
loadTree();
$('#mydialogtemp').dialog('close');
}
});
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('close');
}
}]
}); 3. Easyui-Message
定义：消息对话框，包括警示(alert)，确认(confirm)，提示(prompt)，进展(progress)等这四种。
3.1 alert警示框
在一次操作结束的时候无论成功失败，我们都会给出用户提示信息，来显示该次操作成功与否。
$.messager.alert('Warning','Add user successfully!');
3.2 confirm确认框
在用户进行一些敏感操作的时候(比如删除，设备重启等)，需要给出用户再次确认，以防用户误操作，对数据产生影响。点击确定的时候if(r)为真，否则为假。
$.messager.confirm('Confirm', 'Are you sure to delete this item?', function(r){
if (r){
// exit action;
}
});
3.3 Prompt提示
跟confirm的不同之处是，该组件提供用户输入文本操作：
API参考：
3.4 Progress进展
显示操作的进度，类似页面的loading操作，可以在请求之前使用，然后在请求成功返回之后将该组件隐藏。
API参考：
4. Tree增删改
上面讲到了四种消息框的使用，根据需求自己合理使用就可以了。
下面主要讲述怎么给tree增加增删改功能。
4.1 前端定义鼠标右键功能
由于我们使用tree的时候左键是留给点击叶子节点时像后台请求该区域或者该节点下的数据的功能，所有我们
只有修改其右键功能，来实现我们的功能。
效果图如下：
针对叶子节点目前只有这三种操作，也可以进行扩展。
easyUI提供了针对tree的右键支持功能，onContextMenu.
onContextMenu: function(e,node){// 生成右键菜单
e.preventDefault();
$(this).tree('select',node.target);
$('#tabsMenu').menu('show',{
left: e.pageX,
top: e.pageY
});
$('#tabsMenu').menu({
onClick:function(item){ // 根据选择的id判断选中的是添加，修改，还是删除
if(item.id==1){// 添加
document.getElementById("mydialog").title = "添加节点";
var node = $("#tree").tree('getSelected');
document.getElementById("txRolename").value = "";
$('#mydialog').show(); // 弹出框显示
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
$.ajax({
url : "addTreeNode.do",
type : "post",
async : false,
data : "text="+$("#txRolename").val()+"&pid="+node.id,
dataType:"json",
success : function(data) {
loadTree();
$('#mydialog').dialog('close');
$.messager.progress();
}
});
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}else if(item.id==2){// 修改
var node = $("#tree").tree('getSelected');
document.getElementById("mydialog").title = "修改节点";
document.getElementById("txRolename").value = node.text;
$('#mydialog').show();
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
$.ajax({
url : "updTreeNode.do",
type : "post",
async : false,
data : "text="+$("#txRolename").val()+"&id="+node.id,
dataType:"json",
success : function(data) {
loadTree();
$('#mydialog').dialog('close');
}
});
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}else if(item.id==3){// 删除
var node = $("#tree").tree('getSelected');
$('#mydialogtemp').show();
$('#mydialogtemp').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交数据');
$.ajax({
url : "delTreeNode.do",
type : "post",
async : false,
data :"id="+node.id,
dataType:"json",
success : function(data) {
loadTree();
$('#mydialogtemp').dialog('close');
}
});
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}
}
})
}在html定义右键对应的div：
<div id="tabsMenu" class="easyui-menu" style="width:120px;">
<div name="close" id="1">添加</div>
<div name="Other" id="2">修改</div>
<div name="All" id="3">删除</div>
</div>右键点击之后显示增删改三个操作，选中其中一个操作的时候会将隐藏的dialog.show。
接下来就是为三种时间绑定对应的事件处理了，这里我定义了三个操作对应的id，根据选中的id来
判断选中的那个：
$(function(){
$("#tree").tree({
url:'getNodesByParentId.do?id=1',//请求路径，id为根节点的id
onLoadSuccess:function(node,data){
var tree = $(this);
console.info(data);
if(data){
$(data).each(function(index,d) {
if (this.state=='closed') {
tree.tree('expandAll');
}
});
}
},
onClick:function(node){// 添加tab
if(node.attributes){
node1=$("#tree").tree('getParent',node.target);
openTab(node.text,node.attributes,node1.text);
}
},
onContextMenu: function(e,node){// 生成右键菜单
e.preventDefault();
$(this).tree('select',node.target);
$('#tabsMenu').menu('show',{
left: e.pageX,
top: e.pageY
});
$('#tabsMenu').menu({
onClick:function(item){ // 根据选择的id判断选中的是添加，修改，还是删除
if(item.id==1){// 添加
document.getElementById("mydialog").title = "添加节点";
var node = $("#tree").tree('getSelected');
document.getElementById("txRolename").value = "";
$('#mydialog').show(); // 弹出框显示
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
$.ajax({
url : "addTreeNode.do",
type : "post",
async : false,
data : "text="+$("#txRolename").val()+"&pid="+node.id,
dataType:"json",
success : function(data) {
loadTree();
$('#mydialog').dialog('close');
$.messager.progress();
}
});
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}else if(item.id==2){// 修改
var node = $("#tree").tree('getSelected');
document.getElementById("mydialog").title = "修改节点";
document.getElementById("txRolename").value = node.text;
$('#mydialog').show();
$('#mydialog').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
$.ajax({
url : "updTreeNode.do",
type : "post",
async : false,
data : "text="+$("#txRolename").val()+"&id="+node.id,
dataType:"json",
success : function(data) {
loadTree();
$('#mydialog').dialog('close');
}
});
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}else if(item.id==3){// 删除
var node = $("#tree").tree('getSelected');
$('#mydialogtemp').show();
$('#mydialogtemp').dialog({
collapsible: true,
minimizable: true,
maximizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function() {
alert('提交数据');
$.ajax({
url : "delTreeNode.do",
type : "post",
async : false,
data :"id="+node.id,
dataType:"json",
success : function(data) {
loadTree();
$('#mydialogtemp').dialog('close');
}
});
}
}, {
text: '取消',
handler: function() {
$('#mydialog').dialog('close');
}
}]
});
}
}
})
}
})
});
//添加lab标签
function openTab(text,url,text1){
if($("#tabs").tabs('exists',text)){
$("#tabs").tabs('select',text);
}else{
url = url+"area="+text1;
alert(url);
var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
$("#tabs").tabs('add',{
title:text,
closable:true,
content:content
});
}
}
// 加载树
function loadTree(){
$("#tree").tree({
url:'getNodesByParentId.do?id=1',
onLoadSuccess:function(node,data){
var tree = $(this);
if(data){
$(data).each(function(index,d) {
if (this.state=='closed') {
tree.tree('expandAll');
}
});
}
}});
} 4.2 后台接口添加
4.2.1 Mapper配置
<insert id="addTreeNode" parameterType="treeMap" useGeneratedKeys="true" keyProperty="id" >
INSERT INTO tree(pid,text,attributes) VALUES(#{pid},#{text},#{attributes});
</insert>
<update id="updTreeNode" parameterType="treeMap">
update tree set text = #{text} where id = #{id};
</update>
<delete id="delTreeNode" parameterType="integer">
delete from tree where id = #{id};
</delete>4.2.2 Dao层及其实现类
/**
* 创建一个新的节点
* @param tree
*/
public void addTreeNode(Tree tree);
/**
* 修改节点信息
* @param tree
*/
public void updTreeNode(Tree tree);
/**
* 删除节点
* @param id
*/
public void delTreeNode(int id);@Override
public void addTreeNode(Tree tree) {
System.out.println(tree.toString());
SqlSession sqlSession =(SqlSession) this.getSqlSessionFactory().openSession();
sqlSession.insert("com.chenqk.springmvc.entity.Tree.addTreeNode", tree);
sqlSession.commit();
}
@Override
public void updTreeNode(Tree tree) {
SqlSession sqlSession =(SqlSession) this.getSqlSessionFactory().openSession();
sqlSession.update("com.chenqk.springmvc.entity.Tree.updTreeNode", tree);
sqlSession.commit();
}
@Override
public void delTreeNode(int id) {
SqlSession sqlSession =(SqlSession) this.getSqlSessionFactory().openSession();
sqlSession.delete("com.chenqk.springmvc.entity.Tree.delTreeNode", id);
sqlSession.commit();
}4.2.3 Service及其实现类
/**
* 创建一个新的节点
* @param tree
*/
public void addTreeNode(Tree tree);
/**
* 修改节点信息
* @param tree
*/
public void updTreeNode(Tree tree);
/**
* 删除节点
* @param id
*/
public void delTreeNode(int id);@Override
public List<Tree> getNodesByParentId(int pid) {
return treeDao.getNodesByParentId(pid);
}
@Override
public void addTreeNode(Tree tree) {
treeDao.addTreeNode(tree);
}
@Override
public void updTreeNode(Tree tree) {
treeDao.updTreeNode(tree);
}
@Override
public void delTreeNode(int id) {
treeDao.delTreeNode(id);
}4.2.4 Controller控制层
/**
* 添加节点信息
* @param text 节点名称
* @param pid 父节点
* @param response
*/
@RequestMapping(value="/addTreeNode",method=RequestMethod.POST)
public void addTreeNode(@RequestParam String text,int pid,HttpServletResponse response){
System.out.println("text="+text+":pid="+pid);
Tree tree = new Tree();
tree.setPid(pid);
tree.setText(text);
tree.setAttributes("getAreasPersonById.do?");
treeService.addTreeNode(tree);
}
/**
* 修改节点信息
* @param text 节点名称
* @param id 节点id
* @param response
*/
@RequestMapping(value="/updTreeNode",method=RequestMethod.POST)
public void updTreeNode(@RequestParam String text,int id,HttpServletResponse response){
Tree tree = new Tree();
tree.setId(id);
tree.setText(text);
treeService.updTreeNode(tree);
}
/**
* 删除节点信息
* @param id
* @param response
*/
@RequestMapping(value="/delTreeNode",method=RequestMethod.POST)
public void delTreeNode(@RequestParam int id,HttpServletResponse response){
treeService.delTreeNode(id);
}写的匆忙，但是功能应该都能用，可能会有小的BUG，这里就不一一调试了。
最新的源码已经上传：http://download.youkuaiyun.com/download/chenqk_123/10139397
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
