这是JQuery Dynatree插件的包装对象,做了些改进和增强,增加了右键菜单,以及相应事件等扩展
1. [代码]MagicDTree的基本使用
<SCRIPT type=text/javascript>
$(function(){
var ctxMenu = $('#ctxMenu1');
var tree = $('#tree1');
tree.mac('dtree', {
treeConfig: {
title: Msg.region.allRegions,
rootVisible: true
},
ctxMenu: ctxMenu,
doInsert: function(dt, callback){
var d = dt.data;
d.level = d.level?d.level:0;
var p = { level: 1, path: '/', parent: 'root' };
if(d.level>0){
p.parent = d.key;
p.level = d.level + 1;
if(d.level==1){
p.path = '/'+ d.key + '/';
}else{
p.path = d.path + d.key + '/';
}
p.value = d.value;
}
App.open({
action: 'editRegion',
title: Msg.region.add,
modal: true,
params: p
}, function(dd){
callback(dd);
//dt.deactivate();
//dt.activate();
});
},
doUpdate: function(dt, callback){
var d = dt.data;
App.open({
action: 'editRegion',
title: 'Msg.region.edit',
modal: true,
params: d
}, function(dd){
callback(dd);
});
},
doDelete: function(dt, callback){
mac.confirm('Msg.confirm.message', function(){
mac.alert('Delete is not allowed in this demo.')
// var p = { id: dt.data.key, level: dt.data.level };
// $.post('delete.php', p, function(data){
// var ro = mac.eval(data);
// if(ro.success){
// mac.alert(Msg.info.success, [ Msg.del ]);
// callback();
// var tx = tree.getNode(dt.data.parent);
// tx.activate();艺术字
// }else{http://www.huiyi8.com/yishuzi/
// mac.alert(ro.data, ro.params);
// }
// });
}, [ 'Msg.del' ]);
},
loader: {
url: '/javascript/dtree/list.php',
params: { key: 'root' },
autoLoad: true
},
onCtxMenu: function(el){
var d = el.prop('dtnode').data;
ctxMenu.enableContextMenuItems();
if(!d.level){
ctxMenu.disableContextMenuItems('update,delete');
}
}
});
$('.demoSource').val($('#demo').html());
mac.setLanguage();
});
</SCRIPT>
<DIV id=tree1></DIV>
<UL id=ctxMenu1 class="ctxMenu">
<LI class="add item clear" action="insert"><SPAN ><SPAN class="icon icon-plus"></SPAN><SPAN>Add Region</SPAN> </SPAN></LI>
<LI class="edit item clear" action="update"><SPAN ><SPAN class="icon icon-pencil"></SPAN><SPAN>Edit Region</SPAN> </SPAN></LI>
<LI class="delete item clear" action="delete"><SPAN ><SPAN class="icon icon-minus"></SPAN><SPAN>Delete Region</SPAN> </SPAN></LI></UL>