实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能

时间:2021-10-23 09:52:58

度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个

三方控件肯定是很多的,如jstree,可以直接用

由于公司的UDS限制,不能上传图片,只能文字说明了。

就是要在gridview中实现如下效果:一级、二级因为三级没有全部选中而显示半选状态

▣一级
   ▣二级
      三级1
       三级2

 

 

 

 

js↓

实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能
$(function(){
        BindCheckNode();
        $("span[name^='lblCheck']").click(checkBoxClick);
     });

function checkBoxClick()
     {
        var isChecked = $(this).attr("class") == "default" ? "checked"  : "default";
        $(this).attr("class",isChecked);
        //同步checkbox
        $(this).next().children().eq(0).attr("checked",isChecked!="default");  
        var trNode = $(this).parent().parent();
        
        childChange(trNode,isChecked);
        parentChange(trNode,isChecked); 
     }

//数据绑定时,对选中状态的节点做变更,如果有一个子节点没有选中,则为半选中状态
       function BindCheckNode()
       {
           //判断选中状态的节点的子节点是否全部选中,
           $("span[name^='lblCheck']").each(function(){
                if($(this).attr("class")=="checked")
                {
                    var curNode = this.parentNode.parentNode;
                    if(!CheckAll(curNode))
                    {
                        $(this).attr("class","checkHalf");
                    } 
                }
            });
       }    
          
       //选中状态判断
       function CheckAll(curNode) 
       {
         var level = parseInt($(curNode).attr("level"));
         var id = $(curNode).attr("id");
         var nextNode = $(curNode).next();
         while (nextNode != null && parseInt($(nextNode).attr("level")) > level) {
            //每个节点都要循环它的所有子节点,判断是否选择
             var nextCheck=$(nextNode).children().eq(0).children("span").eq(1); 
             if ($(nextCheck).attr("class") == "default") {
                 return false;   
             }
             nextNode = $(nextNode).next();
         }
         return true; 
     }
     
     //checkbox点击后影响子节点
     function childChange(curNode,className)
     {
        var level = parseInt($(curNode).attr("level"));
        var nextNode = $(curNode).next();
        
        //循环子节点
        while(nextNode!=null && parseInt($(nextNode).attr("level") ) > level)
        {
            var nextCheck=$(nextNode).children().eq(0).children("span:eq(1)"); 
            $(nextCheck).attr("class",className);
            $(nextCheck).next().children().eq(0).attr("checked",className!="default");   
            nextNode=$(nextNode).next();  
        } 
     }
     
     //checkbox点击后影响父节点
     function parentChange(curNode, className)
     {
        var pid = $(curNode).attr("pid");
        var parentNode = $("#"+pid);
        if(!$(parentNode).attr("pid"))
            return false;
        
        var parentSpanCheck=$(parentNode).children().eq(0).children("span").eq(1);
        var childList = $("tr[pid='"+pid+"']");
        var flag = false;
        var tempNode;
        $.each(childList, function(i,item){
            tempNode = $(item).children().eq(0).children("span").eq(1);
            if($(tempNode).attr("class") != className)
           {
                flag = true; 
                return;
           }
        });
        if(flag)
        {
            $(parentSpanCheck).attr("class", "checkHalf");
        } 
        else if(!flag && className == "checked")
        {
             $(parentSpanCheck).attr("class", "checked");
        }
        else
        {
             $(parentSpanCheck).attr("class", "default");
        }
        var parentSpanCheckClass=$(parentSpanCheck).attr("class");
        $(parentSpanCheck).next().children().eq(0).attr("checked",parentSpanCheckClass!="default");   
        if(pid != "0")
            changeParentState(parentNode, className);
     }
View Code

css↓  主要是背景图的移动,图片排列方式为 [全选][未选][半选]

实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能
 <style type="text/css">
        .checked {background-position-x: 0px;}
        .checkHalf{background-position-x: 23px;}
        .default{background-position-x: 46px;}
    </style>
View Code

C#前台 ↓  已将多余的东西删掉,gridview中只有一列,跟上面的table相似,lbl_Space用来增加缩进的,保留原始的checkbox,因为在保存的时候需要遍历整个gridview,不管是后台还是js中修改span的class属性,遍历gridview的时候是获取不到的

实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能
<asp:GridView ID="dgResource" OnRowDataBound="dgResource_RowDataBound" DataKeyNames="ResourceID" runat="server" AutoGenerateColumns="False">
                        <Columns>

                            <asp:TemplateField>
                                <HeaderStyle Wrap="False"></HeaderStyle>
                                <ItemStyle Wrap="False"></ItemStyle>
                                <ItemTemplate>
                                    <asp:Label runat="server" ID="lbl_Space" ForeColor="#f5fbff" Text='<%# GetSpaceNameFromLevel(DataBinder.Eval(Container, "DataItem.NameValues[Level]").ToString()) %>'>
                                    </asp:Label>
                                    <span id="lblCheck" name="lblCheck" runat="server" class="default" style="width: 23px;
                                        height: 25px; background-image: url(../../Common/Images/Icons/checkboxButton.jpg);">
                                    </span>
                                   <div style="display:none;">
                                    <asp:CheckBox runat="server" ID="chk_Query"></asp:CheckBox>
                                   </div>  
                                    <asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ResourceName") %>'></asp:Label>
                                    <asp:HiddenField ID="hfdPID" runat="server" Value='<%# Eval("ParentResourceID") %>' />
                <asp:HiddenField ID="hfdLevel" runat="server" Value='<%# Eval("NameValues[Level]") %>' />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
View Code

 

.net ↓

实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能
protected void dgResource_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                string id = ParamUtil.getstring(dgResource.DataKeys[e.Row.RowIndex]["ResourceID"]);
                string pid = (e.Row.FindControl("hfdPID") as HiddenField).Value;
                string level = (e.Row.FindControl("hfdLevel") as HiddenField).Value;
                string application = (e.Row.FindControl("hfdApplication") as HiddenField).Value;
                //增加节点的属性
                e.Row.Attributes.Add("id", id);
                e.Row.Attributes.Add("pid", pid);
                e.Row.Attributes.Add("level", level);
        }
}


//点击保存时
for (int i = 0; i < dgResource.Rows.Count; i++)
{
    CheckBox chkQuery = (CheckBox)dgResource.Rows[i].FindControl("chk_Query");
    //根据chkQuery的Checked即可获取是否选中,注:半选也算选中
}
View Code