开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

扩展TreeView控件(1) - 联动复选框(复选框的全选和取消全选)

简介:
+关注继续查看
TreeView既强大又好用。为了让它更强大、更好用,我们来写一个继承自TreeView的控件。
[源码下载]


扩展TreeView控件(1) - 联动复选框(复选框的全选和取消全选)


作者:webabcd


介绍
扩展TreeView控件:
联动复选框(复选框的全选和取消全选)。选中指定的父复选框,则设置其所有子复选框为选中状态;取消选中指定的父复选框,则设置其所有子复选框为取消选中状态。如果某父复选框的所有子复选框为均选中状态,则设置该父复选框为选中状态;如果某复选框的所有子复选框至少有一个为取消选中状态,则设置该父复选框为取消选中状态

使用方法(设置属性):
AllowCascadeCheckbox - 是否启用联动复选框功能


关键代码
相关的js
//---------------------------- 
// http://webabcd.cnblogs.com/ 
//---------------------------- 

/*Helper 开始*/ 
String.prototype.yy_stv_startsWith = function(s) 
{        
/// <summary>StartsWith()</summary> 

        var reg = new RegExp("^" + s);        
        return reg.test(this); 


function yy_stv_addEvent(obj, evtType, fn)    

/// <summary>绑定事件</summary> 

        // FF 
        if (obj.addEventListener) 
        { 
                obj.addEventListener(evtType, fn, true); 
                return true
        } 
        // IE 
        else if (obj.attachEvent) 
        { 
                var r = obj.attachEvent("on" + evtType, fn); 
                return r; 
        } 
        else 
        { 
                return false
        }         

/*Helper 结束*/ 


/*联动复选框 开始*/ 
var yy_stv_ccTreeView_pre = new Array(); // cs中动态向其灌数据(TreeView内控件ID的前缀数组) 

function yy_stv_ccClickCheckbox(e)    

/// <summary>单击复选框时</summary> 

        var evt = e || window.event; // FF || IE 
        var obj = evt.target || evt.srcElement    // FF || IE 
         
        yy_stv_foreachChildCheckbox(obj); 
        yy_stv_foreachParentCheckbox(obj); 



function yy_stv_checkParentCheckbox(table, checked) 

/// <summary>设置父复选框的状态</summary> 

        var nodes = table.parentNode.parentNode.childNodes; 
                 
        for (var i=1; i<nodes.length; i++) 
        { 
                if (nodes[i] == table.parentNode) 
                { 
                        if (typeof(nodes[i-1]) == 'undefined' || typeof(nodes[i-1].rows) == 'undefined') return

                        for (var x=0; x < nodes[i-1].rows.length; x++) 
                        { 
                                for (var j=0; j < nodes[i-1].rows[x].cells.length; j++) 
                                { 
                                        // debugger; 
                                        var chk = nodes[i-1].rows[x].cells[j].childNodes[0]; 
                                        if (typeof(chk) != 'undefined' && chk.tagName == "INPUT" && chk.type == "checkbox")    
                                        { 
                                                chk.checked = checked; 
                                                yy_stv_foreachParentCheckbox(nodes[i-1]); 
                                                return
                                        } 
                                } 
                        } 
                } 
        } 


function yy_stv_foreachChildCheckbox(obj) 
{        
/// <summary>单击父复选框时,设置其子复选框的选中状态</summary> 

        var checked; 
         
        if (obj.tagName == "INPUT" && obj.type == "checkbox")    
        { 
                checked = obj.checked; 
                do 
                { 
                        obj = obj.parentNode; 
                }    
                while (obj.tagName != "TABLE"
        } 
         
        var nodes = obj.parentNode.childNodes; 
                 
        for (var i=0; i<nodes.length - 1; i++) 
        { 
                if (nodes[i] == obj && nodes[i + 1].tagName == "DIV"
                { 
                        var elements = nodes[i+1].getElementsByTagName("INPUT"); 
                         
                        for (j=0; j< elements.length; j++)    
                        {                
                                if (elements[j].type == 'checkbox')    
                                { 
                                        elements[j].checked = checked; 
                                } 
                        }         
                } 
        } 


function yy_stv_foreachParentCheckbox(obj) 
{         
/// <summary>单击某一复选框时,设置其父复选框的选中状态</summary> 

        var checkedNum = 0; 
        var uncheckedNum = 0; 
         
        if (obj.tagName == "INPUT" && obj.type == "checkbox")    
        { 
                do 
                { 
                        obj = obj.parentNode; 
                }    
                while (obj.tagName != "TABLE"
        } 
                                 
        var tables = obj.parentNode.getElementsByTagName("TABLE"); 
            
        if (typeof(tables) == 'undefined') return
                
        for (var i=0; i < tables.length; i++) 
        {                 
                for (var x=0; x < tables[i].rows.length; x++) 
                { 
                        for (var j=0; j < tables[i].rows[x].cells.length; j++) 
                        { 
                                var chk = tables[i].rows[x].cells[j].childNodes[0]; 
                                if (typeof(chk) != 'undefined' && chk.tagName == "INPUT" && chk.type == "checkbox")    
                                { 
                                        if (chk.checked) 
                                                checkedNum ++; 
                                        else 
                                                uncheckedNum ++; 
                                } 
                        } 
                } 
        } 
         
        if (uncheckedNum == 0) 
        { 
                yy_stv_checkParentCheckbox(obj, true); 
        } 
        else 
        { 
                yy_stv_checkParentCheckbox(obj, false); 
        } 



function yy_stv_attachCheckboxClickListener() 

/// <summary>监听所有联动复选框的单击事件</summary> 

        var elements =    document.getElementsByTagName("INPUT"); 
         
        for (i=0; i< elements.length; i++)    
        {                
                if (elements[i].type == 'checkbox')    
                { 
                        for (j=0; j<yy_stv_ccTreeView_pre.length; j++) 
                        { 
                                if (elements[i].id.yy_stv_startsWith(yy_stv_ccTreeView_pre[j])) 
                                { 
                                        yy_stv_addEvent(elements[i], 'click', yy_stv_ccClickCheckbox);    
                                        break
                                } 
                        } 
                } 
        }         


if (document.all) 

        window.attachEvent(' yy_stv_attachCheckboxClickListener); 

else 

        window.addEventListener('load', yy_stv_attachCheckboxClickListener, false); 

/*联动复选框 结束*/
 
说明:
1、页面加载时为指定的TreeView的所有复选框绑定单击事件(根据复选框的前缀判断其是否属于指定的复选框)
2、单击某复选框,则遍历其所有子复选框,并进行相应的操作。同时,遍历同级复选框,并对它们的父复选框进行操作,然后再遍历它们的父复选框的同级的复选框,以此类推往上走。

相关的属性
InBlock.gifusing System; 
InBlock.gifusing System.Collections.Generic; 
InBlock.gifusing System.Text; 
InBlock.gif 
InBlock.gifusing System.ComponentModel; 
InBlock.gifusing System.Web.UI; 
InBlock.gif 
InBlock.gifnamespace YYControls 
InBlock.gif
InBlock.gif        /// <summary> 
InBlock.gif        /// SmartTreeView类的属性部分 
InBlock.gif        /// </summary> 
InBlock.gif        public partial class SmartTreeView 
InBlock.gif        { 
InBlock.gif                private bool _allowCascadeCheckbox; 
InBlock.gif                /// <summary> 
InBlock.gif                /// 是否启用联动复选框功能 
InBlock.gif                /// </summary> 
InBlock.gif                [ 
InBlock.gif                Browsable(true), 
InBlock.gif                Description("是否启用联动复选框功能"), 
InBlock.gif                Category("扩展"), 
InBlock.gif                DefaultValue(false
InBlock.gif                ] 
InBlock.gif                public virtual bool AllowCascadeCheckbox 
InBlock.gif                { 
InBlock.gif                        get { return _allowCascadeCheckbox; } 
InBlock.gif                        set { _allowCascadeCheckbox = value; } 
InBlock.gif                } 
InBlock.gif 
InBlock.gif        } 
InBlock.gif}
 
相关的cs
InBlock.gifusing System; 
InBlock.gifusing System.Collections.Generic; 
InBlock.gifusing System.Text; 
InBlock.gif 
InBlock.gifusing System.Web.UI.WebControls; 
InBlock.gifusing System.Web.UI; 
InBlock.gif 
InBlock.gifnamespace YYControls.SmartTreeViewFunction 
InBlock.gif
InBlock.gif        /// <summary> 
InBlock.gif        /// 扩展功能:联动复选框 
InBlock.gif        /// </summary> 
InBlock.gif        public class CascadeCheckboxFunction : ExtendFunction 
InBlock.gif        { 
InBlock.gif                /// <summary> 
InBlock.gif                /// 构造函数 
InBlock.gif                /// </summary> 
InBlock.gif                public CascadeCheckboxFunction() 
InBlock.gif                        : base() 
InBlock.gif                { 
InBlock.gif 
InBlock.gif                } 
InBlock.gif 
InBlock.gif                /// <summary> 
InBlock.gif                /// 构造函数 
InBlock.gif                /// </summary> 
InBlock.gif                /// <param name="stv">SmartTreeView对象</param> 
InBlock.gif                public CascadeCheckboxFunction(SmartTreeView stv) 
InBlock.gif                        : base(stv) 
InBlock.gif                { 
InBlock.gif 
InBlock.gif                } 
InBlock.gif 
InBlock.gif                /// <summary> 
InBlock.gif                /// 扩展功能的实现 
InBlock.gif                /// </summary> 
InBlock.gif                protected override void Execute() 
InBlock.gif                { 
InBlock.gif                        this._stv.PreRender += new EventHandler(_stv_PreRender); 
InBlock.gif                } 
InBlock.gif 
InBlock.gif                /// <summary> 
InBlock.gif                /// SmartTreeView的PreRender事件 
InBlock.gif                /// </summary> 
InBlock.gif                /// <param name="sender"></param> 
InBlock.gif                /// <param name="e"></param> 
InBlock.gif                void _stv_PreRender(object sender, EventArgs e) 
InBlock.gif                { 
InBlock.gif                        // 注册向数组中添加成员的脚本 
InBlock.gif                        if (!this._stv.Page.ClientScript.IsClientScriptBlockRegistered(String.Format("yy_stv_cascadeCheckbox_{0}"this._stv.ID))) 
InBlock.gif                        { 
InBlock.gif                                this._stv.Page.ClientScript.RegisterClientScriptBlock 
InBlock.gif                                ( 
InBlock.gif                                        this.GetType(), 
InBlock.gif                                        String.Format("yy_stv_cascadeCheckbox_{0}"this._stv.ID), 
InBlock.gif                                        String.Format("yy_stv_ccTreeView_pre.push('{0}');", Helper.Common.GetChildControlPrefix(this._stv)), 
InBlock.gif                                        true 
InBlock.gif                                ); 
InBlock.gif                        } 
InBlock.gif                } 
InBlock.gif        } 
InBlock.gif}
 



     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/345597,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
TreeView控件
使用 Windows 窗体 TreeView 控件时,一个常见任务是确定单击了哪个节点并相应地予以响应。确定单击了哪个 TreeView 节点 使用 EventArgs 对象返回对已单击的节点对象的引用。通过检查 TreeViewEventArgs 类(它包含与事件有关的数据),确定单击了哪个节点。   protected void treeView1_AfterSelect (o
957 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载