ext树节点右击事件的增删改(包括与数据库的操作)

1)先创建一棵树
menuTree = new Ext.tree.TreePanel({});
2)增加右击事件
menuTree.on('contextmenu',showRightClickMenu,RightClickMenu);
var RightClickMenu = new Ext.menu.Menu({
     //右击事件
              items:[{
     xtype:"button",
     text:"添加节点",
     icon:"images/icon/menuitem.gif",
     pressed:true,
     handler : function(tree) {
           onInsertNode();
          }
     },{
       xtype:"button",
     text:"修改节点",
     icon:"images/icon/menuitem.gif",
     pressed:true,
       handler : function() {
       onUpdate();
      }
      },{
         xtype:"button",
     text:"删除节点",
     icon:"images/icon/menuitem.gif",
     pressed:true,
         handler : function(tree) {
        onDeleteNode();
        }
         }]
   });

    function showRightClickMenu(node,e)
    {
        //先让该节点被选中
        node.select();
        //参数node是右击的那个节点,即事件源
        //参数e是事件对象
        this.showAt(e.getPoint());
    }
3)未与数据库相连,只是直接在树上显示
function onInsertNode()
{
Ext.Msg.prompt('请输入新建的节点名称' , '新建标准名称' , this.onInsertNodePrompt , this) ;
}

function onInsertNodePrompt(btn , text)
{
if(btn == 'ok')
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
  var selectedParentNode = selectedNode.parentNode;
  var newNode = new Ext.tree.TreeNode({
     text : text
    });
  if (selectedParentNode == null) {
   selectedNode.appendChild(newNode);
  }
  else
  {
   selectedParentNode.insertBefore(newNode, selectedNode);
  }
  setTimeout(function() {
     treeEditor.editNode = newNode;
     treeEditor.startEdit(newNode.ui.textNode);
    }, 10);

}


function onDeleteNode()
{
  Ext.Msg.confirm('系统提示' , '你是否确定删除此标准?' , this.onDeleteNodeConfirm , this);
};

function onDeleteNodeConfirm(btn)
{
if(btn == 'yes')
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
selectedNode.remove();
}
}

function onUpdate()
{
  Ext.Msg.confirm('系统提示' , '你是否确定修改此标准?' , this.onUpdateNode , this);
};

function onUpdateNode()
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
Ext.Msg.prompt('请输入修改的节点名称' , '修改名称' , this.onUpdateNodePrompt , this , false , selectedNode.text) ;
}

function onUpdateNodePrompt(btn , text)
{
if(btn == 'ok')
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
selectedNode.setText(text) ;
setTimeout(function() {
     treeEditor.editNode = selectedNode;
     treeEditor.startEdit(selectedNode.ui.textNode);
    }, 10);
}
}

4)与数据库相连,也是只是直接在树上显示

    function onInsertNode()
{
Ext.Msg.prompt('请输入新建的节点名称' , '新建标准名称' , this.onInsertNodePrompt , this) ;
}

function onInsertNodePrompt(btn , text)
{
if(btn == 'ok')
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
  Ext.Ajax.request({
               url: action的路径,
                method:'post',
                params:{name:text,cid:selectedNode.id},
                success: function(response, option)
                        {
                            var result = response.responseText;
                            if(result.match('ok'))
                            {
                            alert('新增成功!');
                                menuTree.root.reload();
                                root.expand();
                            }
                        },
                        failure: function(response, option)
                        {
                           
                        }
           });
}

}
该action的路径直接到一个jsp页面
<%@page contentType="application/json;charset=utf-8" import="org.springframework.web.context.support.*,org.springframework.core.io.*,org.springframework.beans.factory.*,org.springframework.beans.factory.xml.*,org.springframework.context.*,org.springframework.context.support.*,com.cssrc.bean.*,com.cssrc.dao.impl.*,com.cssrc.dao.*,java.util.List" %>
<%
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String str[] = name.split(" ");
String code = "";
if(str.length==2)
{
code = str[1];
}
String cid = request.getParameter("cid");
int id = Integer.parseInt(cid);
ServletContext sc = request.getSession().getServletContext();
ApplicationContext ac =WebApplicationContextUtils.getWebApplicationContext(sc);//很重要获得dao
IMenuItemDAO dao = (IMenuItemDAO)ac.getBean("MenuItemDAO");
MenuItem m = dao.findById(id);
MenuItem mi = new MenuItem();
mi.setMenuBar(m.getMenuBar());
mi.setImage("menuitem.gif");
if(m.getItemCode()==1)//当前是一级菜单
{
mi.setParentId(m.getId());
List l = dao.findByProperty("parentId",m.getId());
if(l.size()==1)
{
mi.setDisplayOrder(2);
}
else
{
MenuItem t = (MenuItem)l.get(l.size()-1);
mi.setDisplayOrder(t.getDisplayOrder()+1);
}
mi.setItemCode(2);
mi.setItemName(name);
mi.setClickEvent("item.jsp");
}
else if(m.getItemCode()==2)
{
mi.setParentId(m.getId());
List l = dao.findByProperty("parentId",m.getId());
if(l.size()==0)
{
mi.setDisplayOrder(1);
}
else if(l.size()==1)
{
mi.setDisplayOrder(2);
}
else
{
MenuItem t = (MenuItem)l.get(l.size()-1);
mi.setDisplayOrder(t.getDisplayOrder()+1);
}
mi.setItemCode(3);
mi.setItemName(name);
mi.setClickEvent("standard/standardlistAction?type="+code+"");
}
dao.save(mi);
response.getWriter().write(
        "ok");
%>

function onDeleteNode()
{
  Ext.Msg.confirm('系统提示' , '你是否确定删除此标准?' , this.onDeleteNodeConfirm , this);
};

function onDeleteNodeConfirm(btn)
{
if(btn == 'yes')
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
  Ext.Ajax.request({
               url: context+'/node/nodedelete.action',
                method:'post',
                params:{cid:selectedNode.id},
                success: function(response, option)
                        {
                            var result = response.responseText;
                            var str1 = 'ok';
                            var str2 = 'cancel';
                            if(result.match(str2))
                            {
                            alert('该节点不能删除!');
                            }
                            if(result.match(str1))
                            {
                            alert('删除成功!');
                                menuTree.root.reload();
                                root.expand();
                            }
                        },
                        failure: function(response, option)
                        {
                           
                        }
           });
}
}

function onUpdate()
{
  Ext.Msg.confirm('系统提示' , '你是否确定修改此标准?' , this.onUpdateNode , this);
};

function onUpdateNode()
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
Ext.Msg.prompt('请输入修改的节点名称' , '修改名称' , this.onUpdateNodePrompt , this , false , selectedNode.text) ;
}

function onUpdateNodePrompt(btn , text)
{
if(btn == 'ok')
{
var selectedNode = menuTree.getSelectionModel().getSelectedNode();
  Ext.Ajax.request({
               url: context+'/node/nodeupdate.action',
                method:'post',
                params:{name:text,cid:selectedNode.id},
                success: function(response, option)
                        {
                            var result = response.responseText;
                            var str1 = 'ok';
                            var str2 = 'cancel';
                            if(result.match(str2))
                            {
                            alert('该节点不能修改!');
                            }
                            if(result.match(str1))
                            {
                            alert('修改成功!');
                                menuTree.root.reload();
                                root.expand();
                            }
                        },
                        failure: function(response, option)
                        {
                           
                        }
           });
 

你可能感兴趣的:(DAO,Ajax,jsp,UI,ext)