`
wyf
  • 浏览: 435670 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

三态CheckBox例子

阅读更多

首先三态节点树必须是带有CheckBox的树,这里简单说明一下所做的三态树。所谓三态是指:选中状态,半选中状态,未选中状态。选中状态:节点的CheckBox打勾;半选中状态:节点的CheckBox打勾,但为灰色;未选中状态:CheckBox不打勾。

       其次,子节点全选中,父节点选中;子节点全不选中,父节点不选中;子节点选中但未全部选中,父节点半选中;子节点半选中,父节点半选中;父节点选中子节点全选中,父节点取消,子节点全取消。
代码如下:客户端(JAVASCRIPT
<script type="text/jscript" language="javascript">   
    
function ShowLegend(ControlID,LegendInfo)
{
    alert(LegendInfo);
    var para = "LegendInfo="+LegendInfo + "&Visible=" + document.all(ControlID).checked;
    var myAjax = new Ajax.Request('../ajax/WebFormChangeLegendVisible.aspx',{method: 'get', parameters:para, onComplete: RefreshMap});
}

function RefreshMap(request)
{
    var content = request.responseText;
    parent.mapview.document.forms[0].submit();
}

function OnTreeNodeChecked() 
{ 
    var element = window.event.srcElement; 
    if (!IsCheckBox(element)) 
        return; 
    
    var isChecked = element.checked; 
    var isIndeterminate = element.Indeterminate;
    var tree = TV2_GetTreeById("TreeView1"); 
    var node = TV2_GetNode(tree,element); 

    TV2_SetChildNodesCheckState(node,isChecked); 
    //alert(element.id);

    var parent = TV2_GetParentNode(tree,node); 
    TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked); 
    
    //document.all("txtSelectID").value = "";
    var aCheckBox = document.getElementsByTagName("input");
    for (var i=0;i<aCheckBox.length;i++)
    {
        if(aCheckBox[i].type == "checkbox") 
        {
            if(aCheckBox[i].checked)
            {
                var sID = aCheckBox[i].id;
                sID = sID.substring(0,sID.indexOf("CheckBox")); 
                var obja = document.getElementById(sID.replace('n','t'));            
                var sSelectID = obja.href.replace("javascript:__doPostBack('TreeView1','s')","")
                sSelectID = sSelectID.replace("')","")
                var aSelectID = sSelectID.split("\")
            }
        }
    }

} 

//设置子节点CheckBox的状态
function TV2_SetChildNodesCheckState(node,isChecked) 
{ 
    var childNodes = TV2i_GetChildNodesDiv(node); 
    if(childNodes == null) 
        return; 

    var inputs = WebForm_GetElementsByTagName(childNodes,"INPUT"); 
    if(inputs == null || inputs.length == 0) 
        return; 

    for(var i = 0; i < inputs.length; i++) 
    { 
        if(IsCheckBox(inputs[i])) 
            inputs[i].checked = isChecked; 
            inputs[i].indeterminate = false; //父结点改变状态,子节点灰色消失
            
    } 
} 


//当子节点CheckBox状态改变引发的父结点状态改变
function TV2_NodeOnChildNodeCheckedChanged(tree,node,isChecked,isIndeterminate) 
{ 
    if(node == null) 
        return; 

    var childNodes = TV2_GetChildNodes(tree,node); 

    if(childNodes == null || childNodes.length == 0) 
        return; 

    var isAllSame = true; 
    var Nodegray = isIndeterminate;  //节点的灰色
    for(var i = 0; i < childNodes.length; i++)  //循环子节点
    { 
        var item = childNodes[i];               //获取一个子节点
        var value = TV2_NodeGetChecked(item);   //获取子节点的checked状态
        var value2 = TV2_NodeGetindeterminate(item);   //获取子节点的isIndeterminate状态
        if(isChecked != value)       //如果checkbox的选中状态不相同
        { 
            isAllSame = false; 
            Nodegray = true;
            break; 
        } 
        if(value2)
        {
            Nodegray = true;
        }
    } 

    var parent = TV2_GetParentNode(tree,node); 
    if(isAllSame)   //为真:即checkbox的选中状态相同
    { 
        TV2_NodeSetChecked(tree,node,isChecked,Nodegray);  //设置当前节点状态
        TV2_NodeOnChildNodeCheckedChanged(tree,parent,isChecked,Nodegray);   //向父结点递归
    } 
    else            //为假,即checkbox的选中状态不相同,或出于灰色状态
    { 
        TV2_NodeSetChecked(tree,node,true,Nodegray); //设置当前节点状态
        TV2_NodeOnChildNodeCheckedChanged(tree,parent,true,Nodegray);         //向父结点递归
    } 
} 


//get node relative element(etc. checkbox) 
function TV2_GetNode(tree,element) 
{ 
    var id = element.id.replace(tree.id,""); 
    id = id.toLowerCase().replace(element.type,""); 
    id = tree.id + id; 

    var node = document.getElementById(id); 
    if(node == null) //leaf node, no "A" node 
        return element; 
    return node; 
} 

//get parent node 
function TV2_GetParentNode(tree,node) 
{ 
    var div = WebForm_GetParentByTagName(node,"DIV"); 

    var table = div.previousSibling; 
    if(table == null) 
        return null; 

    return TV2i_GetNodeInElement(tree,table); 
} 

//get child nodes array 
function TV2_GetChildNodes(tree,node) 
{ 
    if(TV2_NodeIsLeaf(node)) 
        return null; 

    var children = new Array(); 
    var div = TV2i_GetChildNodesDiv(node); 
    var index = 0; 

    for(var i = 0; i < div.childNodes.length; i++) 
    { 
        var element = div.childNodes[i]; 
        if(element.tagName != "TABLE") 
        continue; 

        var child = TV2i_GetNodeInElement(tree,element); 
        if(child != null) 
            children[index++] = child; 
    } 
    return children; 
} 

function TV2_NodeIsLeaf(node) 
{ 
    return !(node.tagName == "A"); //Todo 
} 

//读取结点的Checked状态
function TV2_NodeGetChecked(node) 
{ 
    var checkbox = TV2i_NodeGetCheckBox(node); 
    return checkbox.checked; 
} 

//读取节点的indeterminate状态
function TV2_NodeGetindeterminate(node) 
{ 
    var checkbox = TV2i_NodeGetCheckBox(node); 
    return checkbox.Indeterminate; 
} 

//判断:只要该节点有一个子节点被选中,则该节点一定被选中,若有一个子节点为灰色,则该节点为灰色 
function TV2_NodeSetChecked(tree,node,isChecked,isIndeterminate) 
{ 
    var checkbox = TV2i_NodeGetCheckBox(node); 
    if(checkbox != null) 
    { 
        var childNodes = TV2_GetChildNodes(tree,node);  //获取子节点的集合
        for(var i = 0; i < childNodes.length; i++) 
        { 
            var item = childNodes[i];               //获取一个子节点
            var value = TV2_NodeGetChecked(item);   //子节点的选中状态
            var value2 = TV2_NodeGetindeterminate(item); //子节点的灰色状态
            if(value)     
            { 
                isChecked = true ;  
                break; 
            } 
            if(value2)//子节点为灰色
            {
            isInDeterminate=true;
            break;
            }
        } 
        checkbox.checked = isChecked;   //结点选中状态
        checkbox.indeterminate = isIndeterminate; //结点是否灰色
    } 
} 

function IsCheckBox(element) 
{ 
    if(element == null) 
        return false; 
    return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox"); 
} 

//get tree 
function TV2_GetTreeById(id) 
{ 
    return document.getElementById(id); 
} 


//get div contains child nodes 
function TV2i_GetChildNodesDiv(node) 
{ 
    if(TV2_NodeIsLeaf(node)) 
        return null; 

    var childNodsDivId = node.id + "Nodes"; 
    return document.getElementById( childNodsDivId ); 
} 

    //find node in element 
function TV2i_GetNodeInElement(tree,element) 
{ 
    var node = TV2i_GetNodeInElementA(tree,element); 
    if(node == null) 
    { 
        node = TV2i_GetNodeInElementInput(tree,element); 
    } 
    return node; 
} 

//find "A" node 
function TV2i_GetNodeInElementA(tree,element) 
{ 
    var as = WebForm_GetElementsByTagName(element,"A"); 
    if(as== null || as.length == 0) 
        return null; 

    var regexp = new RegExp("^" + tree.id + "n\d+$"); 

    for(var i = 0; i < as.length; i++) 
    { 
        if(as[i].id.match(regexp)) 
        { 
            return as[i]; 
        } 
    } 
    return null; 
} 

//find "INPUT" node 
function TV2i_GetNodeInElementInput(tree,element) 
{ 
    var as = WebForm_GetElementsByTagName(element,"INPUT"); 
    if(as== null || as.length == 0) 
        return null; 

    var regexp = new RegExp("^" + tree.id + "n\d+"); 
    for(var i = 0; i < as.length; i++) 
    { 
        if(as[i].id.match(regexp)) 
        { 
            return as[i]; 
        } 
    } 
    return null; 
} 

//get checkbox of node 
function TV2i_NodeGetCheckBox(node) 
{ 
    if(IsCheckBox(node)) 
        return node; 

    var id = node.id + "CheckBox"; 
    return document.getElementById(id); 
}        

function showtab(m,n,count){
    var strPic1='url(../image/1.bmp)';
    var strPic2='url(../image/2.bmp)';
    if (m==8) {
    strPic1='url(../image/switch03_1.gif)';
    strPic2='url(../image/switch03_2.gif)';    }

    for(var i=1;i<=count;i++){
        if (i==n){            
            getObject(m+'_'+i).style.background=strPic1;
            getObject('tab_'+m+'_'+i).style.display='';            
            }
        else {
            getObject(m+'_'+i).style.background=strPic2;
            getObject('tab_'+m+'_'+i).style.display='none';
            }
    }
}
function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
    return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
    return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
    return document.layers[objectId];
    } else {
    return false;
    }
} // getObject

function Init()
{
    //var w = document.body.scrollWidth;
    var w = document.body.clientWidth;
    //var h = document.body.scrollHeight;
    var h = document.body.clientHeight;
    
    getObject("tabTree").style.height = h-90;    
    getObject("divHRTree").style.height=h-100;
}

    </script>
 
 当然,仅有客户端的代码是不够的。我们还需要在服务器端构造一棵树。最简单的方法就是从工具箱——〉导航 中将一个TreeView控件拖到页面上。在TreeView的属性——〉行为中的“ShowCheckBox”一项改为“all”,这样,一个带有CheckBox的树就构造成功了。在服务器端的Page_Load下加入代码:
 if (!Page.IsPostBack)
            {
                //转入前台的 OnTreeNodeChecked()
                TreeView1.Attributes.Add("onclick", "OnTreeNodeChecked()");
             }
分享到:
评论

相关推荐

    树形datawindow,有3态的checkbox

    在这个特定的例子中,我们讨论的是一个带有三态复选框(tristate checkbox)的树形DataWindow。在传统的二态复选框中,用户只能选择“已选”或“未选”两种状态,而三态复选框则增加了“未定义”或“灰色”状态,...

    QT CheckBox复选框状态设置、信号绑定, setCheckState、checkState、setTristate

    3. `setTristate()`: 这个函数用于启用或禁用`CheckBox`的三态模式。默认情况下,`CheckBox`只有两种状态(选中和未选中)。当你调用`setTristate(true)`时,`CheckBox`会增加第三个状态——部分选中。在三态模式下...

    bootstrap-checkbox:Bootstrap的三态复选框

    引导复选框Bootstrap的三态复选框要求 2.3.2+ 1.8.1以上例子基本复选框 &lt; input id =" checkbox1 " type =" checkbox " value =" 1 " &gt; $ ( '#checkbox1' ) . checkbox ( ) ;三态复选框 &lt; input id =" ...

    jQuery三态树

    **jQuery三态树详解** jQuery三态树是一种利用jQuery库构建的数据展示组件,它以Json格式的数据作为输入,呈现为可交互的树形结构。这种树状结构具有三种状态:未选中、部分选中和全选,为用户提供了一种方便的方式...

    elementUi中checkbox的属性indeterminate 状态和v-model的关系

    其中,`indeterminate`属性和`v-model`之间的关系是实现复选框三态逻辑的关键,即全选、部分选和未选。在本文中,我们将详细探讨这两个属性的用法以及它们如何协同工作来呈现不同的视觉效果。 首先,`indeterminate...

    python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例

    在这个例子中,我们创建了一个名为`CheckBoxDemo`的窗口类,包含三个QCheckBox控件。其中,`checkBox1`和`checkBox2`是常规的二态复选框,而`checkBox3`是三态复选框。每个复选框的状态改变都会触发`btnstate`方法,...

    jquery ajax TreeView asp.net改进版

    emptyiconpath: "lib/jquery/plugins/treeview/images/s.gif", //checkbxo三态的图片 animate: true, //不用配置,动画没有效果 theme: "bbit-tree-lines", //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-...

    vb.net基本入门学习资料.doc

    (三) vb.net中的类、继承与多态性 1.vb.net中给一个类添加方法 2.命名属性、方法和事件 3.vb.net的事件和事件处理 4.类的继承(Inheritance) 5.vb.net继承的规则 6.用继承建立一个继承类 7.重载Windows控件 8....

    vb.net基本入门学习资料

    (三) vb.net中的类、继承与多态性 1.vb.net中给一个类添加方法 2.命名属性、方法和事件 3.vb.net的事件和事件处理 4.类的继承(Inheritance) 5.vb.net继承的规则 6.用继承建立一个继承类 7.重载Windows控件 8....

    bootstrap-switch-master

    这只是一个基本的用法示例,实际上Bootstrap Switch提供了许多可配置选项,如颜色、大小、是否允许三态等,以及事件处理,允许开发者根据需求进行深入定制。 总的来说,Bootstrap Switch是一个强大的工具,可以提升...

    Ext TreePanelrcheckbox级联选择的实现

    同时,通过设置`threeState`为`true`,我们可以启用三态复选框,即除了选中和未选中外,还有一种半选状态(部分子节点被选中)。然后,我们可以监听`checkchange`事件,这个事件会在复选框状态改变时触发。 以下是...

    包含android所有控件demo

    这个项目对于初学者和经验丰富的开发者来说都是宝贵的参考资料,因为它提供了实际操作的例子,帮助理解并掌握各个控件的功能和配置。 首先,我们来深入探讨一下Android中的一些主要控件类别: 1. **按钮(Button)**...

    bootstrap-JsTree简单dome

    这个简单Dome提供了一个快速入门的例子,展示了如何在网页中集成JsTree,并实现多选、单选、添加和删除节点等功能。下面将详细介绍JsTree的核心特性以及如何与Bootstrap结合使用。 首先,JsTree是一个基于jQuery的...

    vb常见面试问题及答案

    - **面向对象支持**:VB.NET支持面向对象编程(OOP),提供更强大的类、继承、封装和多态性支持。相比之下,传统VB的面向对象支持较弱。 - **类型系统**:VB.NET具有更严格的类型系统,有助于减少运行时错误。 - **...

    VB.NET 学习资料

    - **CheckBox**: 单选或多选。 - **RadioButton**: 单选按钮。 - **GroupBox**: 分组容器。 - **PictureBox**: 显示图像。 - **ListBox**: 显示列表项。 - **CheckedListBox**: 可选择多个项的列表框。 - **ComboBox...

    VB.Net 基础教程

    #### (三)VB.Net 中的类、继承与多态性 **1. VB.Net 中给一个类添加方法** - **方法定义**:`Public Sub MyMethod()` **2. 命名属性、方法和事件** - **命名规则**:遵循 PascalCase 和 camelCase 规则。 **3...

Global site tag (gtag.js) - Google Analytics