實現CheckBox的三種選中狀態（全選、半選、不選）在GridView中模擬樹形的功能

度娘了很多帖子，只說三種狀態要用圖片替換來做，但沒找到有用的例子，被逼自己寫了一個

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

由于公司的UDS限制，不能上傳圖片，只能文字說明了。

就是要在gridview中實現如下效果：一級、二級因為三級沒有全部選中而顯示半選狀態

js↓

$(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);     }

CSS↓ 主要是背景圖的移動，圖片排列方式為 [全選][未選][半選]

 <style type="text/css">        .checked {background-position-x: 0px;}        .checkHalf{background-position-x: 23px;}        .default{background-position-x: 46px;}    </style>

C#前臺 ↓ 已將多余的東西刪掉，gridview中只有一列，跟上面的table相似，lbl_Space用來增加縮進的，保留原始的checkbox，因為在保存的時候需要遍歷整個gridview，不管是后臺還是js中修改span的class屬性，遍歷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>

.net ↓

PRotected void dgResource_RowDataBound(object sender, GridViewRowEventArgs e)        {            if (e.Row.RowType == DataControlRowType.DataRow)            {                string id = ParamUtil.getstring(dgResource.DataKeys[e.Row.RowIndex]["ResourceID"]);