Coolite TreePanel开发实例
Coolite TreePanel开发实例 包括功能（右击菜单，筛选菜单，拖动菜单）
在博客园也待了很久，一直有想法想发表几篇文章，毕竟在这里获得了太多的知识，也得把自己学习到的东西来分享给大家。但是由于本人技术不咋的，文笔也不咋的，迟迟不敢写。但是，今天还是迈出这第一步吧！如果写的不好，请各位见谅下，也请大家多提下意见，谢谢！
最近在做一个权限管理平台，主要针对公司各系统进行权限控制，如果说各位有谁有做这方面的经验的话，可以来一起探讨下哦！这个平台就是用COOLITE来开发的，关于COOLITE这方面大家可以百度下，也可以到官方看下 http://www.ext.net/ 。东西挺不错的，就是引用文件有点大，这是我在最纠结的问题。
好了，言归正传了！先上图给大家看下TreePanel 的效果
相信大家也看到图了，下来我将分别贴出每个功能的代码，并做一定的说明。
现在具体功能详细说明下：
1.动态加载树：
< ext:TreePanel ID ="TreePanel1" runat ="server" AutoShow ="true" Header ="false" AutoHeight ="true"
AutoScroll ="true" Animate ="true" EnableDD ="true" ContainerScroll ="true" Border ="false"
>
< Listeners >
< BeforeLoad Fn ="nodeLoad" />
</ Listeners >
< Root >
< ext:AsyncTreeNode NodeID ="0" Text ="菜单" Icon ="House" />
</ Root >
</ ext:TreePanel >
// /加载菜单
function nodeLoad(node) {
Ext.net.DirectMethods.NodeLoad(node.id, {
success: function (result) {
var data = eval("(" + result + ")");
node.loadNodes(data);
},
failure: function (errorMsg) {
Ext.Msg.alert('Failure', errorMsg);
}
});
}
/// <summary>
/// 菜单加载
/// </summary>
/// <param name="nodeID"></param>
/// <returns></returns>
[DirectMethod]
public static string NodeLoad( string nodeID)
{
}
在动态创建菜单这部分主要在调用JS方法 < Listeners > < BeforeLoad Fn ="nodeLoad" /> </ Listeners >, 再由JS调用后台方法，获取JSON显示！菜单的加载不是一次将所有都加载出来的，而是根据你点击菜单后才绑定。
2.拖动菜单。
先上图：
首先在TreePanel中以下代码：
< Listeners >
< MoveNode Fn ="moveNode" />
</ Listeners >
// 移动菜单
var moveNode = function (tree, node, oldParent, newParent, index) {
var nodeid = node.id;
var newnodeid = newParent.id;
Ext.net.DirectMethods.DragNode(nodeid, newnodeid);
}
主要实现是以上2段代码，调用后台的 DragNode来保存。
3.筛选菜单。 < TopBar >
< ext:Toolbar ID ="Toolbar1" runat ="server" >
< Items >
< ext:ToolbarTextItem ID ="ToolbarTextItem1" runat ="server" Text ="筛选:" />
< ext:ToolbarSpacer />
< ext:TriggerField ID ="TriggerField1" runat ="server" EnableKeyEvents ="true" >
< Triggers >
< ext:FieldTrigger Icon ="Clear" />
</ Triggers >
< Listeners >
< KeyUp Fn ="filterTree" Buffer ="250" />
< TriggerClick Handler ="clearFilter();" />
</ Listeners >
</ ext:TriggerField >
</ Items >
</ ext:Toolbar >
</ TopBar >
// /筛选菜单
var filterTree = function (el, e) {
var tree = TreePanel1,
text = this .getRawValue();
tree.clearFilter();
if (Ext.isEmpty(text, false )) {
return ;
}
if (e.getKey() === Ext.EventObject.ESC) {
clearFilter();
} else {
var re = new RegExp(".*" + text + ".*", "i");
tree.filterBy( function (node) {
return re.test(node.text);
});
}
};
var clearFilter = function () {
var field = TriggerField1,
tree = TreePanel1;
field.setValue("");
tree.clearFilter();
tree.getRootNode().collapseChildNodes( true );
tree.getRootNode().ensureVisible();
};
筛选添加以上的2段代码就可以实现了。
4，右键功能菜单。
< ext:Menu ID ="cmenu" runat ="server" >
< Items >
< ext:MenuItem ID ="copyItems" runat ="server" Text ="添加节点" Icon ="Add" >
< Listeners >
< Click Handler ="#{win_Menu}.show();#{hid_NodeId}.setValue(this.parentMenu.node.id);#{hid_type}.setValue('add')" />
</ Listeners >
</ ext:MenuItem >
< ext:MenuItem ID ="editItems" runat ="server" Text ="修改节点" Icon ="BulletEdit" >
< Listeners >
< Click Handler ="#{win_Menu}.show();#{hid_NodeId}.setValue(this.parentMenu.node.id);#{hid_type}.setValue('edit')" />
</ Listeners >
</ ext:MenuItem >
< ext:MenuItem ID ="moveItems" runat ="server" Text ="删除节点" Icon ="Delete" >
< Listeners >
< Click Handler ="Ext.net.DirectMethods.DeleteMenu(this.parentMenu.node.text);#{hid_NodeId}.setValue(this.parentMenu.node.id);" />
</ Listeners >
</ ext:MenuItem >
< ext:MenuItem ID ="openItems" runat ="server" Text ="启用节点" Icon ="StopBlue" >
< Listeners >
< Click Handler ="Ext.net.DirectMethods.OpenMenu(this.parentMenu.node.text,'Open');#{hid_NodeId}.setValue(this.parentMenu.node.id);#{hid_type}.setValue('Open')" />
</ Listeners >
</ ext:MenuItem >
< ext:MenuItem ID ="closeItems" runat ="server" Text ="关闭节点" Icon ="Stop" >
< Listeners >
< Click Handler ="Ext.net.DirectMethods.OpenMenu(this.parentMenu.node.text,'Close');#{hid_NodeId}.setValue(this.parentMenu.node.id);#{hid_type}.setValue('Close')" />
</ Listeners >
</ ext:MenuItem >
</ Items >
</ ext:Menu >
在这里都是使用COOLITE的异步调用。
< Listeners >
< ContextMenu Handler =" #{cmenu}.node=node;#{cmenu}.showAt(e.getPoint());" />
</ Listeners >
右键功能菜单调用<ContextMenu Handler=" #{cmenu}.node=node;#{cmenu}.showAt(e.getPoint());" />
在新增跟修改的时候，有弹出窗口，我将代码给发给大家吧！
< ext:Window ID ="win_Menu" runat ="server" Resizable ="false" Height ="365" Icon ="Lock"
Title ="节点管理" Draggable ="true" Width ="400" Modal ="true" Padding ="5" Hidden ="true"
Closable ="false" Layout ="Form" >
< DirectEvents >
< Show OnEvent ="win_Menu_Show" >
</ Show >
</ DirectEvents >
< Items >
< ext:FormPanel ID ="FormPanel1" runat ="server" BodyStyle ="padding:1px;" ButtonAlign ="Center"
Frame ="true" BodyBorder ="false" MonitorValid ="true" Header ="false" Layout ="Form" >
< Items >
< ext:TextField ID ="txt_MenuName" runat ="server" FieldLabel ="节点名称" AnchorHorizontal ="98%"
AllowBlank ="false" BlankText ="节点名称不能为空!" EmptyText ="请输入节点名称..." />
< ext:RadioGroup ID ="RadioGroup1" runat ="server" FieldLabel ="启用" >
< Items >
< ext:Radio ID ="IsEnable_yes" runat ="server" BoxLabel ="是" Checked ="true" />
< ext:Radio ID ="IsEnable_no" runat ="server" BoxLabel ="否" />
</ Items >
</ ext:RadioGroup >
< ext:TextField ID ="txt_MenuUrl" runat ="server" FieldLabel ="URL" AllowBlank ="false"
AnchorHorizontal ="98%" BlankText ="节点URL不能为空!" EmptyText ="请输入节点URL..." />
< ext:RadioGroup ID ="RadioGroup3" runat ="server" FieldLabel ="打开模式" >
< Items >
< ext:Radio ID ="mode_no" runat ="server" BoxLabel ="无" Checked ="true" />
< ext:Radio ID ="mode_this" runat ="server" BoxLabel ="自身" />
< ext:Radio ID ="mode_new" runat ="server" BoxLabel ="新窗口" />
</ Items >
</ ext:RadioGroup >
< ext:TextArea runat ="server" ID ="txt_MenuRemark" FieldLabel ="说明" AnchorHorizontal ="98%"
Height ="150" >
</ ext:TextArea >
</ Items >
</ ext:FormPanel >
</ Items >
< Buttons >
< ext:Button ID ="btn_Save" runat ="server" Text ="确定" Icon ="Accept" >
< Listeners >
< Click Handler ="if(!#{txt_MenuName}.validate() || !#{txt_MenuUrl}.validate() ) {
Ext.Msg.alert('提示','请填写表单中必填部分！');
return false;
}" />
</ Listeners >
< DirectEvents >
< Click OnEvent ="btn_Save_Click" Success ="#{FormPanel1}.getForm().reset();#{win_Menu}.hide(null);" >
</ Click >
</ DirectEvents >
</ ext:Button >
< ext:Button ID ="Button4" runat ="server" Text ="取消" Icon ="Cancel" >
< Listeners >
< Click Handler ="#{FormPanel1}.getForm().reset();#{win_Menu}.hide(null);" />
</ Listeners >
</ ext:Button >
</ Buttons >
</ ext:Window >
大概也就这样了，实现的必须代码都发给大家了，实际的后台进行增加什么的我也就不说明了。
有几点说明：拖拉的时候，在后台动态创建菜单的时候TreeNode 的Draggable = false，Expanded = true;
要刷新菜单的话，可以使用这句代码 X.AddScript(TreePanel1.ClientID + " .root.reload(); " );
第一次写有点乱，希望大家见谅下！！如果有什么问题可以给我留言，或者发邮件hyaoxin@vip.qq.com!
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于Coolite TreePanel开发实例的详细内容...