通过TreeNode自定义静态树
TreeNode的基本配置参数:
//TreeNode常用配置参数
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
7.text:"节点文本"//节点文本
8.singleClickExpand:true//用单击文本展开,默认为双击
二：动态加载树：
效果：
三：用TreeLoader加载数据生成树
//TreeLoader的参数
dataUrl:“*****.**”//地址
url:“****.**”//url参数和dataUrl参数一样
前端的代码：
后台代码：
public class json : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string jsons = "";
if (context.Request["id"] == null)
jsons = "{success:false}";
else
{
int id = int.Parse(context.Request["id"].ToString());
if (id == 0)
jsons = "[{\"id\":\"1\",\"checked\":true, \"text\":\"人事管理\", \"url\":null,\"iconCls\":\"rsgl\",\"leaf\":false},{\"id\":\"2\",\"checked\":true, \"text\":\"系统管理\",\"url\":null,\"iconCls\":\"xtgl\",\"leaf\":false},{\"id\":\"3\",\"checked\":true, \"text\":\"个人专区\",\"url\":null,\"iconCls\":\"grzq\",\"leaf\":false},{\"id\":\"4\",\"checked\":true, \"text\":\"内部邮箱\",\"url\":null,\"iconCls\":\"lbyx\",\"leaf\":false},{\"id\":\"5\",\"checked\":true, \"text\":\"日程管理\",\"url\":null,\"iconCls\":\"rcgl\",\"leaf\":false},{\"id\":\"6\",\"checked\":true, \"text\":\"文档管理\",\"url\":null,\"iconCls\":\"wdgl\",\"leaf\":false},{\"id\":\"7\",\"checked\":true, \"text\":\"工单管理\",\"url\":null,\"iconCls\":\"gdgl\",\"leaf\":false},{\"id\":\"8\",\"checked\":true, \"text\":\"工资管理\",\"url\":null,\"iconCls\":\"gzgl\",\"leaf\":false},{\"id\":\"9\",\"checked\":true, \"text\":\"考勤管理\",\"url\":null,\"iconCls\":\"kqgl\",\"leaf\":false}]";
else if (id == 1)
jsons = "[{\"id\":\"11\",\"checked\":true, \"text\":\"机构管理\",\"url\":null,\"iconCls\":\"jggl\",\"leaf\":true},{\"id\":\"12\",\"checked\":true, \"text\":\"部门管理\",\"url\":null,\"iconCls\":\"bmgl\",\"leaf\":true},{\"id\":\"13\",\"checked\":true, \"text\":\"员工管理\",\"url\":null,\"iconCls\":\"yggl\",\"leaf\":true}]";
}
context.Response.Write(jsons);
}
public bool IsReusable {
get {
return false;
}
}
效果图：
效果：
使用TreeNodeUI
在node中我们可以用专门的类控制node的UI.
//TreeNodeUI的基本配置参数,node.getUI()=>TreeNodeUI
1.addClass("class")//添加css类
2.getAnchor()//返回a元素(对象),控制a链接
3.getIconEl()//返回img元素(对象),控制icon图标
4.getTextEl()//返回span元素(对象),控制节点文本
5.hide()
6.show()
7.removeClass()
带有checkbox的树
//关键代码
1.node.getUI().checkbox.checked//返回节点选择,true和fasle
3.checkchange事件,选择变化时激发
问:如何隐藏复选框前的文件夹等小图标?
//答:图标img元素的css的class名为x-tree-node-icon,把display设为none就可以了
带复选框的菜单：
效果图：