jquery treeview 点击文本框显示树全路径选择

作者：管理员

发布时间：2021/2/8 16:38:31

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=3973

本文介绍点击文本框，显示树形列表，选中一个值得时候需要很清晰的看到来源，也就是选中的值能够寻根。


第一、定义文本框




<th>热线类型：</th>
<td>
    <input id="hottype" type="text" class="txt" style="width: 100px" />
</td>




第二、定义div目的显示树




<div id="ItemsTree" style="position:absolute;left:200px;top:90px; display:none;width:250px;height:300px;border:dashed 1px #000000; background-color:#F7F7F7; overflow:auto"></div>


第三、定义json数据




[
  {
    "id": "000000000001",
    "text": "咨询",
    "value": "000000000001",
    "Category": "1",
    "img": "/Content/Scripts/tree/Images/icons/folder_close.gif",
    "parentnodes": "0",
    "showcheck": false,
    "isexpand": true,
    "complete": true,
    "hasChildren": true,
    "ChildNodes": [
      {
        "id": "000000000101",
        "text": "医患矛盾解决途径",
        "value": "000000000101",
        "Category": "2",
        "img": "/Content/Scripts/tree/Images/icons/view.png",
        "parentnodes": "000000000001",
        "showcheck": false,
        "isexpand": true,
        "complete": true,
        "hasChildren": false,
        "ChildNodes": [ ]
      },
      {
        "id": "000000000102",
        "text": "医改政策",
        "value": "000000000102",
        "Category": "2",
        "img": "/Content/Scripts/tree/Images/icons/folder_close.gif",
        "parentnodes": "000000000001",
        "showcheck": false,
        "isexpand": true,
        "complete": true,
        "hasChildren": true,
        "ChildNodes": [
          {
            "id": "000000010201",
            "text": "其他",
            "value": "000000010201",
            "Category": "3",
            "img": "/Content/Scripts/tree/Images/icons/view.png",
            "parentnodes": "000000000102",
            "showcheck": false,
            "isexpand": true,
            "complete": true,
            "hasChildren": false,
            "ChildNodes": []
          },
          {
            "id": "00000000010202",
            "text": "重大公共卫生服务项目",
            "value": "00000000010202",
            "Category": "3",
            "img": "/Content/Scripts/tree/Images/icons/view.png",
            "parentnodes": "000000000102",
            "showcheck": false,
            "isexpand": true,
            "complete": true,
            "hasChildren": false,
            "ChildNodes": []
          }
        ]
      }
    ]
  }
 
]


第四、开始加载数据




/加载业务热线类型
    function GetTree() {
        var itemtree = {
            onnodeclick: function (item) {
                if (item.hasChildren == true) {
                    tipDialog("请选择子项", 1, -1);
                    return;
                }
                var tmp = GetItemParent(item);
                $("#hottype").val(tmp);
            },
            url: "@Url.Content("~/ExampleModule/OrderInfoKJ/GetTreeJson")"
        };
        $("#ItemsTree").treeview(itemtree);
    }


第五、获取全路径名称




function GetItemParent(item) {
        var len = parseInt(item.Category);
        var al = new Array([len]);
        var par = item.parent;
        al[0] = item.text;
        for (var i = 1; i < len; i++) {
            if (par != null)
                al[i] = par.text;
            par = par.parent;
        }
        al.reverse();
        return al.join("-");
    }


第六、动态定位树要出现的位置，文本框点击出现，树鼠标离开后自动隐藏




function HotType() {
        var divHot = $("#ItemsTree");
        $("#hottype").click(function () {
            var x = $(this).offset().left + 0;
            var y = $(this).offset().top + 30;
            divHot.css({ left: x + "px", top: y + "px"});
            divHot.slideDown("slow");
        });
        divHot.hover(function () {
            //鼠标按上事件
        }, function () {
            //鼠标经过事件
            divHot.slideUp("slow");
        });
        GetTree();
    }






关键字：jQuery