TreePanel_DEMO

最新推荐文章于 2024-11-19 20:16:38 发布

faith789510

最新推荐文章于 2024-11-19 20:16:38 发布

阅读量383

点赞数

CC 4.0 BY-SA版权

文章标签： function button tree url null layout

本文链接：https://blog.youkuaiyun.com/faith789510/article/details/7658080

本文介绍如何使用ExtJS框架实现自定义树形控件的功能，包括拖拽操作、编辑节点、添加及删除节点等，并通过具体示例代码展示了如何解决拖拽过程中遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在拖拽前startdrag事件校验：会出现不能往叶子节点上拖发现是没有触发修改过的nodedragover

事件，解决办法添加拖拽配置：dropConfig: {appendOnly:false} 就能解决问题

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

var currentNode; // 当前选中节点

var addFlag = 0; // 1-当前有未保存的新添加菜单,0-无新添加菜单

var modifyFlag = 0; // 1-当前有未保存的修改菜单,0-无修改

var tree = new Ext.tree.TreePanel({

id : 'tree',

title : '',

useArrows : true,

autoScroll : true,

animate : true,

height : document.body.clientHeight - 20,

split: true,

enableDD: true, //允许拖动树节点

containerScroll : true,

dropConfig: {appendOnly:false},

rootVisible : true,

bodyStyle : 'background-color:#FFFFFF',

loader: new Ext.tree.TreeLoader({

preloadChildren : true,

listeners: {

load : function(loader){

var root = tree.getRootNode();

var ns = root.childNodes;

for(var i=0;i<ns.length;i++){

loader.doPreload(ns[i]);

}

beforeload : function(){

var typeClassId = Ext.getCmp('ruleType').getValue();

//alert(typeClassId);

Ext.apply(this.baseParams,{typeClassId : typeClassId});

}

// url : data.json DEMO 可以先编辑假数据演示

url : '/TypeInfoManageAction.do?method=getTypeInfoTree'

}),

root : new Ext.tree.AsyncTreeNode({

id : '0',

text : '名人名言',

expanded : true,

expandable : true,

listeners : {

expand : function(node){

var roots = node.clidNodes;

//for(var i=0;i<roots.length;i++){

//roots[i].getUI().addClass('root');

//}

}

}),

listeners : {

click : function(node,evt){

//用节点数据填充表单

if ((addFlag == 1 || modifyFlag == 1)&& node != currentNode) {

Ext.Msg.alert('提示', '请先保存当前分类信息!');

this.getSelectionModel().select(currentNode);

return;

}

//treeEditer.cancelEdit(false);

//treeEditer.completeEdit(false);

if (node.isExpanded()) {

node.collapse(false);

} else {

node.expand(false);

}

currentNode = node;

startdrag :function(tree,node,e){

var typeName = currentNode.attributes['text'];

if(typeName.getBytes() > 20){

Ext.Msg.alert("提示","类型名称不能超过10个汉字或20个字母、数字，请修改后继续操作！");

return false;

}else{

return true;

}

dragdrop : function(tree,node,dd,e){

var msgTip = Ext.MessageBox.show({

title : '提示',

width : 250,

msg:'<div style="font-size:15;font-style: normal;color: black;text-align:center;">正在提交数据请稍候......</div>'

});

var typeId = currentNode.attributes['id'];

var typeName = currentNode.attributes['text'];

var parentTypeId = currentNode.parentNode.attributes['id'];

var typeClassId = Ext.getCmp('ruleType').getValue();

var typeClassName = Ext.getCmp("ruleType").getRawValue();

Ext.Ajax.request({

url : '/TypeInfoManageAction.do?method=moveTypeInfo',

params : {

typeId: typeId,

typeName : typeName,

parentTypeId : parentTypeId,

personId : personId,

typeClassId : typeClassId,

typeClassName: typeClassName

success : function(response,option){

var decode = Ext.decode(response.responseText);

//alert(decode);

msgTip.hide();

if(decode['success']){

addFlag = 0;

modifyFlag = 0;

Ext.Msg.alert("提示","移动分类信息成功！");

}else{

Ext.Msg.alert("提示","移动分类信息失败！");

}

failure : function(response,option){

msgTip.hide();

Ext.Msg.alert("提示","移动分类信息错误！");

}

});

currentNode = node;

}

});

//容许叶子节点拖动到叶子节点

tree.on("nodedragover", function(e){

var node = e.target;

if(node.leaf){

node.leaf=false;

}

return true;

});

var treeEditer = new Ext.tree.TreeEditor(tree,{

allowBlank : false

});

treeEditer.on("beforestartedit", function(treeEditer) {

var tempNode = treeEditer.editNode; //将要编辑的节点

var root = tree.getRootNode();

if(tempNode == root) { //不允许编辑根节点

return false;

}else {

return true;

}

});

treeEditer.on("complete",function(treeEditer,newValue,oldValue){

currentNode = treeEditer.editNode;

currentNode.select();

if(newValue == oldValue){

modifyFlag = 0;

}else{

modifyFlag = 1;

}

});

treeEditer.on("canceledit",function(treeEditer,newValue,oldValue){

currentNode = treeEditer.editNode;

currentNode.select();

if(newValue == oldValue){

modifyFlag = 0;

}else{

modifyFlag = 1;

}

});

var ruleTypeStore = new Ext.data.SimpleStore({

fields : ['typeId','typeName'],

data : [['1','名人名言'],['2','管理字典'],['3','热点评论']]

});

var ruleType = new Ext.form.ComboBox({

fieldLabel : '类别',

mode : 'local',

id : 'ruleType',

height : 20,

//allowBlank : false,

//style:'font-weight:bold',

labelStyle : 'font-weight:bold;',

value : '1',

labelAlign : 'right',

width : 130,

//emptyText : '名人名言',

displayField: 'typeName',

valueField : 'typeId',

forceSelection : true,

triggerAction: 'all',

editable : false,

store : ruleTypeStore,

listeners : {

select : function(){

//alert(Ext.getCmp('ruleType').getValue());

//alert(Ext.getCmp("ruleType").getRawValue());

tree.root.setText(Ext.getCmp("ruleType").getRawValue());

tree.getRootNode().reload();

currentNode = null;

}

});

var formPanel = new Ext.form.FormPanel({

title : '类别维护',

id :'formPanel',

frame : true,

height : 20,

labelWidth : 60,

labelAlign : 'right',

buttonAlign : 'center',

bodyStyle: 'width:100%',

layoutConfig : {

border : 0,

cellspacing : 1,

labelSeparator : ':'

defaults:{

layout : 'form',

labelStyle : 'font-weight:bold;',

disabledClass : 'customer-item-disabled'

items : [ruleType,tree],

buttons : [{

xtype : 'button',

text : "新增",

cls : 'x-btn-text-icon blist',

icon : '/style/default/images/ext_button/add.gif',

handler : addNode

},{

xtype : 'button',

text : "保存",

cls : 'x-btn-text-icon blist',

icon : '/style/default/images/ext_button/save.gif',

handler : saveNode

},{

xtype : 'button',

text : "重置",

cls : 'x-btn-text-icon blist',

icon : '/style/default/images/bz_reset.gif',

handler : clearNode

},{

xtype : 'button',

text : "修改",

cls : 'x-btn-text-icon blist',

icon : '/style/default/images/bz_modify.gif',

handler : modifiNode

},{

xtype : 'button',

text : "删除",

cls : 'x-btn-text-icon blist',

icon : '/style/default/images/ext_button/delete.gif',

handler : checkDeleteType

}]

});

//添加

function addNode(){

//alert(Ext.getCmp('ruleType').getValue());

if(Ext.getCmp('ruleType').getValue()){

Ext.Ajax.request({

url : '/TypeInfoManageAction.do?method=getTypeId&a=' + Math.random(),

method : 'POST',

success : function(response,options){

var decode = Ext.util.JSON.decode(response.responseText);

if(decode.success == 'success'){

if(currentNode == null){

currentNode = tree.getRootNode().appendChild(

new Ext.tree.TreeNode({

id: decode.id,

text : '新分类',

//icon : '/extjs/resources/images/default/tree/folder.gif',

isRoot : true

})

);

}else if (addFlag == 1 || modifyFlag == 1) {

Ext.Msg.alert("提示","请保存分类信息后，继续操作！");

}else {

if(currentNode.isLeaf()){

currentNode.leaf = false;

}

currentNode = currentNode.appendChild(

new Ext.tree.TreeNode({

id : decode.id,

text : '新分类'

})

);

}

currentNode.select();

currentNode.parentNode.expand(false);

addFlag = 1;

}

failure : function(){

Ext.Msg.alert("提示","信息装载错误，请稍候再试！");

}

});

}else{

Ext.Msg.alert("提示","请选择类别信息后，继续操作！");

}

};

//验证类别名称是否可用

function checkCreateType(typeId,typeName,typeClassId){

Ext.Ajax.request({

url : '/TypeInfoManageAction.do?method=checkCreateType',

params : {

typeId: typeId,

typeName : typeName,

typeClassId : typeClassId

success : function(response,options){

var decode = Ext.decode(response.responseText);

if(decode['success']){

return true;

}else{

Ext.Msg.alert("提示","类型名称已存在，请修改后继续操作！");

return false;

}

failure : function(){

Ext.Msg.alert("提示","类型名称已存在，请修改后继续操作！");

return false;

}

})

}

//保存

function saveNode(){

if(currentNode == null){

Ext.Msg.alert('提示', '尚未选择分类信息!');

return;

}else if (addFlag == 0 && modifyFlag == 0) {

Ext.Msg.alert('提示', '尚未修改分类信息!');

return;

}else{

var typeId = currentNode.attributes['id'];

var typeName = currentNode.attributes['text'];

var parentTypeId = currentNode.parentNode.attributes['id'];

var typeClassId = Ext.getCmp('ruleType').getValue();

var typeClassName = Ext.getCmp("ruleType").getRawValue();

if(checkStr(typeName))

Ext.Ajax.request({

url : '/TypeInfoManageAction.do?method=saveTypeInfo',

method : 'POST',

waitMsg : '正在保存分类信息，请稍等。。。',

waitTitle : '提示',

params : {

typeId: typeId,

typeName : typeName,

parentTypeId : parentTypeId,

personId : personId,

typeClassId : typeClassId,

typeClassName: typeClassName

success : function(response,options){

var decode = Ext.decode(response.responseText);

//alert(decode);

if (decode['success']) {

addFlag = 0;

modifyFlag = 0;

Ext.MessageBox.confirm("提示","分类信息保存成功，是否刷新当前页面？",function(btn){

if(btn == 'yes'){

// location.replace(location.href);

refreshTree();

}else{

currentNode = null;

addFlag = 0;

modifyFlag = 0;

}

});

}else{

Ext.Msg.alert("提示","保存分类信息失败，请稍候再试！");

}

failure : function(){

Ext.Msg.alert("提示","保存分类信息错误，请稍候再试！");

}

})

}

};

//重置

function clearNode(){

if (addFlag == 1 || modifyFlag == 1) {

Ext.MessageBox.confirm("提示","是否放弃保存修改？",function(btn){

if(btn == 'yes'){

refreshTree();

}else{

return;

}

});

}else{

refreshTree();

}

};

//刷新

function refreshTree(){

tree.getRootNode().reload();

currentNode = null;

addFlag = 0;

modifyFlag = 0;

};

//修改

function modifiNode(){

if(currentNode == null){

Ext.Msg.alert('提示', '请选择要修改的分类！');

return;

}else if(currentNode == tree.getRootNode()){

Ext.Msg.alert('提示', '不能修改归属类别！');

return;

}

treeEditer.triggerEdit(currentNode);

};

//验证类型是否可以删除

function checkDeleteType(){

if(currentNode == null){

Ext.Msg.alert('提示', '请选择要删除的分类！');

return;

}else if(currentNode == tree.getRootNode()){

Ext.Msg.alert('提示', '不能删除归属类别！');

return;

}

var msg;

if(currentNode.isLeaf()){

msg = '确定要删除分类信息吗？<br>类型：' + currentNode.text;

}else{

msg = '确定要删除分类信息及其子类型吗？<br>菜单：' + currentNode.text;

}

var typeId = currentNode.attributes['id'];

Ext.MessageBox.confirm('提示',msg,function(btn){

if (btn == 'yes') {

Ext.Ajax.request({

url : '/TypeInfoManageAction.do?method=checkDeleteType',

params : {

typeId: typeId

success : function(response,options){

var decode = Ext.decode(response.responseText);

if(decode['success']){

delNode(typeId);

}else{

Ext.Msg.alert("提示","该类型使用中无法删除！");

return false;

}

failure : function(){

Ext.Msg.alert("错误","该类型使用中无法删除！");

return false;

}

})

}

});

}

//删除

function delNode(typeId){

Ext.Ajax.request({

url : '/TypeInfoManageAction.do?method=deleteTypeInfo',

method : 'POST',

params : {typeId : typeId},

success : function(response,option){

var decode = Ext.decode(response.responseText);

//alert(decode);

if(decode['success']){

Ext.Msg.alert('操作成功', '删除分类信息成功！');

var tempNode = currentNode.parentNode;

currentNode.remove();

addFlag = 0;

modifyFlag = 0;

currentNode = tempNode;

}else{

Ext.Msg.alert('操作失败', '删除分类信息失败，请稍候再试！');

}

failure : function(){

Ext.Msg.alert('提示', '删除分类信息错误，请稍候再试！');

}

});

};

//字符串长度

String.prototype.getBytes = function() {

var cArr = this.match(/[^\x00-\xff]/ig);

return this.length + (cArr == null ? 0 : cArr.length);

}

function checkStr(str){

if(str.getBytes() > 20){

Ext.Msg.alert("提示","类型名称不能超过10个汉字或20个字母、数字，请修改后继续操作！");

return false;

}

return true;

}

new Ext.Viewport({

layout: 'fit',

frame : true,

items : formPanel

});