本文介绍点击文本框,显示树形列表,选中一个值得时候需要很清晰的看到来源,也就是选中的值能够寻根。
第一、定义文本框
<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();
}
第七、运行页面看看效果
第八、选中得到结果
咨询-医改政策-重大公共卫生服务项目