|
想要使用zTree实现的效果如下: 即当鼠标点击进入文本框时，即通过ashx文件访问数据库后弹出zTree信息框。当点击窗口其他区域时此信息框隐藏。在这里，访问数据库的代码省略。 具体实现的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO </title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<link href='../plugins/JQuery_zTree_v2.5/demo/zTreeStyle/zTreeStyle.css' rel='Stylesheet'
type='text/css' />
<link href='../plugins/zTree/css/zTreeStyle/zTreeStyle.css' rel='Stylesheet' type='text/css' />
<script type='text/javascript' src='../js/util/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='../plugins/zTree/js/jquery.ztree.core-3.5.min.js'></script>
<script type='text/javascript'>
<!--
var setting = {
view: {
showLine: false,
// showIcon: showIconForTree,
dblClickExpand: true
},
data: {
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'pId',
rootPId: 0
}
},
callback: {
beforeClick: beforeClick,
onClick: onClick
}
};
function createTree() {
var zNodes;
$.ajax({
type: 'POST',
url: '../../caseTypeHandler.ashx?action=GetCaseType', //url action是方法的名称
data: { id: '0' },
dataType: 'text', //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
ContentType: 'application/json; charset=utf-8',
success: function (data) {
zNodes = data;
$.fn.zTree.init($('#treeDemo'), setting, eval('(' zNodes ')'));
},
error: function (msg) {
alert('失败');
}
});
}
$(document).ready(function () {
createTree();
});
// 控制父节点不显示图标
function showIconForTree(treeId, treeNode) {
return !treeNode.isParent;
};
function beforeClick(treeId, treeNode) {
var check = (treeNode && !treeNode.isParent);
if (!check) alert('请不要选择类别...');
return check;
}
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj('treeDemo'),
nodes = zTree.getSelectedNodes(),
v = '';
nodes.sort(function compare(a, b) { return a.id - b.id; });
for (var i = 0, l = nodes.length; i < l; i ) {
v = nodes[i].name ',';
}
if (v.length > 0) v = v.substring(0, v.length - 1);
var nameObj = $('#nameSel');
nameObj.attr('value', v);
var n = '';
for (var i = 0, l = nodes.length; i < l; i ) {
n = nodes[i].id ',';
}
if (n.length > 0) n = n.substring(0, n.length - 1);
nameObj.attr('nameid', n);
hideMenu();
}
function showMenu() {
var nameObj = $('#nameSel');
var nameOffset = $('#nameSel').offset();
$('#menuContent').css({ left: nameOffset.left 'px', top: nameOffset.top nameObj.outerHeight() 'px' }).slideDown('fast');
$('body').bind('mousedown', onBodyDown);
}
function hideMenu() {
$('#menuContent').fadeOut('fast');
$('body').unbind('mousedown', onBodyDown);
}
// 当点击窗口其他区域时zTree消息框隐藏
function onBodyDown(event) {
if (!(event.target.id == 'menuBtn' || event.target.id == 'menuContent' || $(event.target).parents('#menuContent').length > 0)) {
hideMenu();
}
}
//-->
</script>
<style type='text/css'>
ul.ztree
{
margin-top: 10px;
border: 1px solid #617775;
background: #f0f6e4;
width: 220px;
height: 360px;
overflow-y: scroll;
overflow-x: auto;
}
</style>
</head>
<body>
<div class='content_wrap'>
<div class='zTreeDemoBackground'>
<ul class='list'>
<li class='title'><span class='content_txt'>name:</span>
<input id='nameSel' type='text' readonly value='' nameid='' onclick='showMenu(); return false;' />
</li>
</ul>
</div>
<div id='menuContent' class='menuContent' style='display: none; position: absolute;'>
<ul id='treeDemo' class='ztree' style='margin-top: 0; width: 160px;'>
</ul>
</div>
</div>
</body>
</html>
zTree添加自定义属性zTree节点中添加自定义的属性键值， 可以直接在js中，如下。其中，attr是添加的自定义属性。
var zNodes =[
{ id:1, pId:0, name:'pNode 1', open:true, attr:'id1'},
{ id:11, pId:1, name:'pNode 11', attr:'id11'},
{ id:111, pId:11, name:'leaf node 111', attr:'id111'},
{ id:112, pId:11, name:'leaf node 112', attr:'id112'},
{ id:12, pId:1, name:'pNode 12', attr:'id12'},
{ id:2, pId:0, name:'pNode 2', attr:'id2'},
{ id:21, pId:2, name:'pNode 21', open:true, attr:'id21'}
];
也可以通过json转化到js对象来添加属性。
调用此属性的方式如下：
var zTree = $.fn.zTree.getZTreeObj('treeDemo')；
var nodes = zTree.getSelectedNodes()；
nodes.sort(function compare(a, b) { return a.id - b.id; });
var v = '';
for (var i = 0, l = nodes.length; i < l; i ) {
v = nodes[i].attr ',';
}
if (v.length > 0) v = v.substring(0, v.length - 1);
alert('The attr value of selected nodes:' v.toString());
|
|
|
