用jquery-easyui中的combotree实现树形结构的选择

                     用jquery-easyui中的combotree实现树形结构的选择

需求:实现一个树形节点的选择,要求默认父节点都折叠,父节点前的checkbox不显示,子节点显示checkbox,且父节点不可选择。

1.前台先引入相应的js

 <link href="../css/themes/icon.css" rel="stylesheet" />
    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <link href="../css/themes/default/easyui.css" rel="stylesheet" />
<script src="../js/jquery.easyui.min.js" type="text/javascript"></script> 

2.前台html只需要用到一个select控件

<select id="txtNewsTypes" multiple="true" style="width: 200px; height: 20px;"></select>

3.完成该需求的主要的js代码如下:

用jquery-easyui中的combotree实现树形结构的选择
 var newsTypeJson = <%=GetNewsType()%>;
                $("#txtNewsTypes").combotree({
                    data:newsTypeJson,
                    cascadeCheck: $(this).is(‘:checked‘),
                    setValue:1,
                    onCheck:function(node){
                        // 返回树对象
                        //var tree = $(this).tree;
                        // 选中的节点是否为叶子节点,如果不是叶子节点,清除选中$("#txtNewsTypes").combotree(‘clear‘);
                        //var isLeaf = tree(‘isLeaf‘, node.target);
              //修改jquery-easyui产生的html样式的父节点的样式,移除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){ //折叠节点 $("#txtNewsTypes").combotree("tree").tree("collapseAll"); } });
用jquery-easyui中的combotree实现树形结构的选择

4.后台生成json数据的方法代码如下:

用jquery-easyui中的combotree实现树形结构的选择
 public string GetNewsType()
    {

        StringBuilder s = new StringBuilder();

        List<NewsType> data = NewsTypeManager.GetAllNewsList();

        List<NewsType> 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 + "\",");
            //设置父节点默认不展开
            //s.Append("\"state\":\"closed\",");
            s.Append("\"text\":\"" + p_item.TypeName + "\"");
            List<NewsType> 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();
    }
用jquery-easyui中的combotree实现树形结构的选择

5.至此,该功能完成了,由于jquery-easyui没有提供方法来只隐藏父节点的checkbox,在不改变源代码的情况下,想了这个笨办法来修改样式达到实现需求的目的。

           

用jquery-easyui中的combotree实现树形结构的选择,布布扣,bubuko.com

用jquery-easyui中的combotree实现树形结构的选择

上一篇:用CSS3.0画圆


下一篇:PHP代码分离