用jquery-easyui中的combotree實現(xiàn)樹形結(jié)構(gòu)的選擇

需求：實現(xiàn)一個樹形節(jié)點的選擇，要求默認(rèn)父節(jié)點都折疊，父節(jié)點前的checkbox不顯示，子節(jié)點顯示checkbox，且父節(jié)點不可選擇。

成都創(chuàng)新互聯(lián)公司是專業(yè)的什邡網(wǎng)站建設(shè)公司，什邡接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行什邡網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

1.前臺先引入相應(yīng)的js

2.前臺html只需要用到一個select控件

3.完成該需求的主要的js代碼如下：

 var newsTypeJson = <%=GetNewsType()%>;
                $("#txtNewsTypes").combotree({
                    data:newsTypeJson,
                    cascadeCheck: $(this).is(':checked'),
                    setValue:1,
                    onCheck:function(node){
                        // 返回樹對象
                        //var tree = $(this).tree;
                        // 選中的節(jié)點是否為葉子節(jié)點,如果不是葉子節(jié)點,清除選中$("#txtNewsTypes").combotree('clear');
                        //var isLeaf = tree('isLeaf', node.target);
　　　　　　　　　　　　　　//修改jquery-easyui產(chǎn)生的html樣式的父節(jié)點的樣式，移除tree-checkbox tree-checkbox0樣式即可
                        var $titles=$(this).find("span.tree-hit");
                        $titles.each(function(index,value){
                            $(this).siblings().eq(1).removeClass("tree-checkbox tree-checkbox0");
                                
                        })
                    },
                    onLoadSuccess:function(node,data){
                        //折疊節(jié)點
                        $("#txtNewsTypes").combotree("tree").tree("collapseAll");
                    }
                
                });

4.后臺生成json數(shù)據(jù)的方法代碼如下：

 public string GetNewsType()
    {

        StringBuilder s= new StringBuilder();

        List data = NewsTypeManager.GetAllNewsList();

        List p_data = data.Where(d => d.FTypeId == 0).ToList();

int i = 0, j = 0;
        s.Append("[");

foreach (NewsType p_item in p_data)
        {
if (j != 0)
                s.Append(",");
            j++;
            s.Append("{");
            s.Append(""id":"" + p_item.TypeId + "",");
//設(shè)置父節(jié)點默認(rèn)不展開
//s.Append(""state":"closed",");            s.Append(""text":"" + p_item.TypeName + """);
            List c_data = data.Where(d => d.FTypeId == p_item.TypeId).ToList();
if (c_data != null && c_data.Count != 0)
            {
                s.Append(",");
                s.Append(""children":");
                s.Append("[");
for (i = 0; i < c_data.Count; i++)
                {
if (i != 0)
                        s.Append(",");
                    s.Append("{");
                    s.Append(""id":"" + c_data[i].TypeId + "",");
                    s.Append(""text":"" + c_data[i].TypeName + """);
                    s.Append("}");
                }
                s.Append("]");
            }
            s.Append("}");
        }
        s.Append("]");



return s.ToString();
    }

5.至此，該功能完成了，由于jquery-easyui沒有提供方法來只隱藏父節(jié)點的checkbox，在不改變源代碼的情況下，想了這個笨辦法來修改樣式達(dá)到實現(xiàn)需求的目的。

文章名稱：用jquery-easyui中的combotree實現(xiàn)樹形結(jié)構(gòu)的選擇-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://weahome.cn/article/cdpggs.html