【原】提高篇:第二十九篇,ext2.2打造Ext.form.ComboBox系列--树形结构

本篇介绍了将数据动态绑定到Ext.form.ComboBox,以树状结构的形式显示.采取后台读数据库的方式.提供显示提示消息的效果和改变ComboBox的宽度和高度. 不支持手写和联想功能.

效果图如下:

前台代码如下:

<form id="form1" runat="server">
    <br />
    <div><div id="comboxtree"></div>
    <script type="text/javascript">
    function ready()
    {
        Ext.QuickTips.init();
        var comboTree = new Ext.form.ComboBox
        ({
            store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
            editable:false, //禁止手写及联想功能
            mode: 'local',
            triggerAction:'all',
            frame:true,
            border:true,
            //maxHeight: 300,width:200,
            tpl: '<div id="treePanel" style="height:200px;width:144px;"></div>', //html代码
            selectedClass:'',
            onSelect:function(){alert('good');},           
            autoWidth:true,
            //autoHeight:true,
            emptyText:'请选择...',
            renderTo: 'comboxtree',
            resizable:true
        });
       
        var tree = new Ext.tree.TreePanel
        ({
            title:"树状结构",
            animate:true,
            titleCollapse:true,
            root:root,
            singleExpand:true,
            iconCls:"icon-tree",
            autoLoad:false,
            allowDomMove:true,
            frame:true,
            collapsible:true,
            collapsed:false,
            collapseFirst:true,
            border:false
        });
        var loader=new Ext.tree.TreeLoader({ "treeJson.aspx?Param=1" });
        var root=new Ext.tree.AsyncTreeNode
        ({
         id:"0", 
         leaf:false,
         loader:loader,
         text:"产品类别",
         expandable:true,
         expanded:true 
     });        
        tree.setRootNode(root);       
        comboTree.on('expand',function(){tree.render('treePanel');});
        var tree_click = function(node,e)
        {      
            if(node.attributes.leaf)
            {
                if(node.isLeaf())
                {
                     e.stopEvent();   //非叶子节点则不触发
                }
                comboTree.setValue(node.text);  //设置option值
                comboTree.collapse();   //隐藏option列表
                alert(comboTree.getValue());
            }
        };
        tree.on("click",tree_click);       
    }
    Ext.onReady(ready);
    </script>
    </div>
    </form>

后台代码如下:

protected void Page_Load(object sender, EventArgs e)
        {

            if (Request["node"] == null || Convert.ToString(Request["node"]) == "")
                return;
            List<ExtTreeNode> nodes = new List<ExtTreeNode>();
            string json = "";
            try
            {
                DataSet ds = SampleBusiness.GetMoreRow(Convert.ToString(Request["node"]));
                if (ds != null && ds.Tables[0].Rows.Count > 0)
                {
                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                    {
                        DataRow row = ds.Tables[0].Rows[i] as DataRow;
                        ExtTreeNode node = new ExtTreeNode();
                        node.id = Convert.ToString(row["ID"]);
                        node.parentNodeId = Convert.ToString(Request["node"]);
                        node.IsRoot = false;
                        node.leaf = (SampleBusiness.HasChildNode(node.id));
                        node.draggable = true;
                        node.text = Convert.ToString(row["TypeCName"]);
                        node.TypeID = Convert.ToString(row["ID"]);
                        node.PID = Convert.ToString(Request["node"]);
                        node.TypeTitle = Convert.ToString(row["TypeCName"]);
                        node.TypeEName = Convert.ToString(row["TypeCName"]);
                        node.DelFlag = Convert.ToBoolean(row["DelFlag"]);
                        nodes.Add(node);
                    }
                }
                json = JavaScriptConvert.SerializeObject(nodes);
            }
            catch (Exception ee)
            {
                string error = ee.Message;
            }
            Response.Write(json);

        }

posted @ 2008-11-03 10:24 殷良胜 阅读(1637) 评论(23)  编辑 收藏 网摘

  回复  引用  查看    
#1楼[楼主]2008-11-03 12:37 | 殷良胜      
欢迎访问Ext小组:
http://space.cnblogs.com/group/ext" target="_new">http://space.cnblogs.com/group/ext

  回复  引用    
#2楼2008-11-24 17:35 | FLoveWYH[未注册用户]
json = JavaScriptConvert.SerializeObject(nodes);

这个JavaScriptConvert.SerializeObject，是自定义的还是C#里面的？如果是的话，在哪个命名空间？如果不是，能不能给我一份？
gyf_hacker@163.com
PS：你写的很好，为我这种初学者带来很打的方便
  回复  引用  查看    
#3楼[楼主]2008-11-24 19:20 | 殷良胜      
@FLoveWYH
1，在项目里添加引用
2，在某个cs文件里添加using Newtonsoft.Json;

已经发送到你的邮箱了
注意查收

  回复  引用    
#4楼2008-11-25 08:53 | FLoveWYH[未注册用户]
谢谢楼主，顶下！
  回复  引用    
#5楼2008-11-25 16:34 | FLoveWYH[未注册用户]
DataSet ds = SampleBusiness.GetMoreRow(Convert.ToString(Request["node"]));
node.leaf = (SampleBusiness.HasChildNode(node.id));

能不能把SampleBusiness类也给我，我现在正在做这个，但是数据出来后，都在一个目录下，我想实现是和你类似的功能，就是一个用户名当一个根节点，然后对应的密码是他的子节点（测试用，数据库里就两个字段）
我把他打包发在你邮箱了，希望你能帮我看看，改一下或指点下
  回复  引用  查看    
#6楼[楼主]2008-11-25 18:37 | 殷良胜      
@FLoveWYH
SampleBusiness.GetMoreRow(Convert.ToString(Request["node"]));
//获取一个DataSet
node.leaf = (SampleBusiness.HasChildNode(node.id));
//判断当前节点下面是否有子节点因为太简单 我就觉得真的没有必要写
但我 忽视了刚刚入手的人 很抱歉啊
下面是完整的SampleBusiness代码
/// <summary>
/// 公用测试类
/// </summary>
public class SampleBusiness
{
/// <summary>
/// 获取集合的操作
/// </summary>
/// <returns></returns>
public static DataSet GetMoreRow()
{
string sql = "select * from TypeTable";

DataSet ds = new DataSet();
try
{
ds = SampleAccess.GetMoreRow(sql);
}
catch (Exception ee)
{
string error = ee.Message;
}
return ds;
}

/// <summary>
/// 根据表名获取数据操作
/// </summary>
/// <param name="tableName">int</param>
/// <returns></returns>
public static DataSet GetMoreRowByTableName(string tableName)
{
string sql = String.Format("select * from {0}",tableName);

DataSet ds = new DataSet();
try
{
ds = SampleAccess.GetMoreRow(sql);
}
catch (Exception ee)
{
string error = ee.Message;
}
return ds;
}

/// <summary>
/// 根据Sql语句获取数据操作
/// </summary>
/// <param name="sql">int</param>
/// <returns></returns>
public static DataSet GetMoreRowBySql(string cmdText)
{
string sql = String.Format("select * from ({0}) a ", cmdText);

DataSet ds = new DataSet();
try
{
ds = SampleAccess.GetMoreRow(sql);
}
catch (Exception ee)
{
string error = ee.Message;
}
return ds;
}

/// <summary>
/// 获取图片类别的集合的操作
/// </summary>
/// <param name="typeID">int</param>
/// <returns></returns>
public static DataSet GetMoreRow(string typeID)
{
string sql = "select * from TypeTable where PID = @TypeID";
SqlParameter[] prams =
{
new SqlParameter("@TypeID",typeID)
};

DataSet ds = new DataSet();
try
{
ds = SampleAccess.GetMoreRow(sql, prams);
}
catch (Exception ee)
{
string error = ee.Message;
}
return ds;
}

/// <summary>
/// 获取图片类别的集合的操作
/// </summary>
/// <param name="typeID">int</param>
/// <returns></returns>
public static DataSet GetAllRow(string typeID)
{
string sql = string.Format("select * from TypeTable where PID = '{0}'", typeID);


DataSet ds = new DataSet();
try
{
ds = SampleAccess.GetMoreRow(sql);
}
catch (Exception ee)
{
string error = ee.Message;
}
return ds;
}

public static bool HasChildNode(string id)
{
string sql = "select ID from TypeTable where PID = @TypeID";
SqlParameter[] prams =
{
new SqlParameter("@TypeID",id)
};

bool flag = true;
try
{
int ID = Convert.ToInt32(SampleAccess.GetOneItem(sql, prams));
if (ID > 0)
{
flag = false;
}
}
catch (Exception ee)
{
string error = ee.Message;
}
return flag;
}
}
//我说的没有错吧 你自己闭着眼睛能够写出来

  回复  引用    
#7楼2009-02-13 13:42 | binglan0111@163.com[未注册用户]
不好意思，初学者
ExtTreeNode 是怎么生成的？
  回复  引用    
#8楼2009-02-13 13:43 | binglan0111@163.com[未注册用户]
能否生成无限制节点的树？
  回复  引用  查看    
#9楼[楼主]2009-02-17 11:09 | 殷良胜      
--引用--------------------------------------------------
binglan0111@163.com: 不好意思，初学者
ExtTreeNode 是怎么生成的？
--------------------------------------------------------
ExtTreeNode是一个存储树节点实体类 可以根据自己的需要修改
  回复  引用  查看    
#10楼[楼主]2009-02-17 11:10 | 殷良胜      
--引用--------------------------------------------------
binglan0111@163.com: 能否生成无限制节点的树？
--------------------------------------------------------

@binglan0111@163.com
完全可以
  回复  引用    
#11楼2009-02-28 14:25 | zhshw
顶！！！！！！
  回复  引用  查看    
#12楼[楼主]2009-03-15 08:53 | 殷良胜      
@zhshw
谢谢支持 呵呵
  回复  引用    
#13楼2009-03-21 23:12 | xfu0311wxj@163.com[未注册用户]
大哥啊，能否给我发一份combox树形结构 代码，我搞了好久了，还是不会啊，如果可以的话，把数据库也传给我，我想跑起来看看
  回复  引用  查看    
#14楼[楼主]2009-03-22 10:03 | 殷良胜      
--引用--------------------------------------------------
xfu0311wxj@163.com: 大哥啊，能否给我发一份combox树形结构 代码，我搞了好久了，还是不会啊，如果可以的话，把数据库也传给我，我想跑起来看看
--------------------------------------------------------
你好
我已经在下载区域提供了对数据组件，逻辑组件和数据库的下载
而且
这些组件和数据库对所有的实例都适用
请查看下
有问题再沟通 好吗？
  回复  引用    
#15楼2009-04-22 18:03 | extjs菜鸟[未注册用户]
ExtTreeNode是一个存储树节点实体类 可以根据自己的需要修改
请教老师，exttreenode的类代码能否写一下啊。我是新人，想学习下。

  回复  引用  查看    
#16楼[楼主]2009-04-23 06:47 | 殷良胜      
@extjs菜鸟
namespace DataEntity
{
//[Serializable]
[DataContract]
public class ExtTreeNode
{
// 摘要:
// Initializes a new instance of the TreeNode class.
public ExtTreeNode()
{
}

// 摘要:
// Css class to render a different icon to a node
private string _cls;
public string cls
{
get { return _cls; }
set { _cls = value; }
}
//
// 摘要:
// If the node is draggabe
private bool _draggable;
public bool draggable
{
get { return _draggable; }
set { _draggable = value; }
}
//
// 摘要:
// URL of the link used for the node (defaults to #)
private string _href;
public string href
{
get { return _href; }
set { _href = value; }
}
//
// 摘要:
// target frame for the link
private string _hrefTarget;
public string hrefTarget
{
get { return _hrefTarget; }
set { _hrefTarget = value; }
}
//
// 摘要:
// The path to an icon for the node. The preferred way to do this is to use
// the cls or iconCls attributes and add the icon via a CSS background image.
private string _icon;
public string icon
{
get { return _icon; }
set { _icon = value; }
}
//
// 摘要:
// Node id
private string _id;
public string id
{
get { return _id; }
set { _id = value; }
}
//
// 摘要:
// If a node is checked (only if tree is checkbox tree)
private bool _IsChecked;
public bool IsChecked
{
get { return _IsChecked; }
set { _IsChecked = value; }
}
//
// 摘要:
// If this is the root node
private bool _IsRoot;
public bool IsRoot
{
get { return _IsRoot; }
set { _IsRoot = value; }
}
//
// 摘要:
// If it has children then leaf=false
private bool _leaf;
public bool leaf
{
get { return _leaf; }
set { _leaf = value; }
}
//
// 摘要:
// Gets or sets the type of the node.
private string _NodeType;
public string NodeType
{
get { return _NodeType; }
set { _NodeType = value; }
}
//
// 摘要:
// Id of the parent node
private string _parentNodeId;
public string parentNodeId
{
get { return _parentNodeId; }
set { _parentNodeId = value; }
}
//
// 摘要:
// Text of the node
private string _text;
public string text
{
get { return _text; }
set { _text = value; }
}
private string typeID;

public string TypeID
{
get { return typeID; }
set { typeID = value; }
}
private string pID;

public string PID
{
get { return pID; }
set { pID = value; }
}
private string typeEName;

public string TypeEName
{
get { return typeEName; }
set { typeEName = value; }
}

private string description;

public string Description
{
get { return description; }
set { description = value; }
}
private string typeTitle;

public string TypeTitle
{
get { return typeTitle; }
set { typeTitle = value; }
}

private DateTime addDate;

public DateTime AddDate
{
get { return addDate; }
set { addDate = value; }
}
private bool delFlag;

public bool DelFlag
{
get { return delFlag; }
set { delFlag = value; }
}
}
}

  回复  引用    
#17楼2009-04-23 08:35 | extjs菜鸟[未注册用户]
谢谢老师。
另外，在执行
var loader=new Ext.tree.TreeLoader({ "treeJson.aspx?Param=1" });
时，总在最后那个｝提示应为“:”，不知什么原因。
  回复  引用    
#18楼2009-04-26 15:54 | sameExtjs
从基础篇到提高篇全部拜读了一遍，感觉很有收获，希望楼主能写出更多的作品，我准备用Extjs为前端实现一个简单的网络操作系统。
  回复  引用  查看    
#19楼[楼主]2009-04-27 18:08 | 殷良胜      
--引用--------------------------------------------------
sameExtjs: 从基础篇到提高篇全部拜读了一遍，感觉很有收获，希望楼主能写出更多的作品，我准备用Extjs为前端实现一个简单的网络操作系统。
--------------------------------------------------------
感谢支持
  回复  引用    
#20楼2009-05-06 12:56 | 逝风[未注册用户]
comboTree.setValue(node.text); //设置option值
这个方法只能把树的text值付给combobox的value和display两个地方，有什么方法把node.id赋给combobox的value，把node.text赋给display么？
  回复  引用    
#21楼2009-05-16 10:29 | GLong[未注册用户]
殷老师，我想在一个弹出来的Window中，显示一个Tree ComboBox,在其下面显示一个Grid ComboBox，选择Tree ComboBox后，在Grid　ＣomboBox显示相关的信息，等于是一个二级联动，但是很奇怪的是，我弹出来的Window中，只能显示Grid ComboBox,他把那个Tree ComboBox给复盖了．请问这是怎么回事？？
  回复  引用    
#22楼2009-05-16 12:35 | GLong[未注册用户]
找到问题所在了,两个ComboBox用了同一个ID,我郁闷
  回复  引用    
#23楼2009-05-16 18:52 | krjdgh[未注册用户]
@extjs菜鸟
var loader = new Ext.tree.TreeLoader({ dataUrl: "WebForm28Json.aspx?Param=1" });
发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1325240




相关文章:

相关链接: