<!--表格树js -->
<script>
$(function(){
var setting = {
view:{showLine:true, showIcon: false}, //有没有连线和显不示显示图标
//下面语句可以让pid相同的分层
data: {
simpleData: {
enable: true //自动成圣树结构
}
},
callback: {
onClick: zTreeOnClick //回调点击函数
}
}
//动态获取数据自动生成树
$.ajax({
type: "post",
url: "../tools/admin_ajax.ashx?action=GetCallContent&time=" + Math.random(),//链接地址
dataType: "html",
success: function (data) {
//转换一下json
var myNodes = JSON.parse(data)
var zNodes = []
// alert(myNodes)
for (var i = 0 i < myNodes.length i++) { //判断
if (myNodes[i].open != null) {
if (myNodes[i].checked != null && myNodes[i].checked )
zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, open: true, checked: true }
else
zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, open: true }
}
else {
if (myNodes[i].checked != null && myNodes[i].checked )
zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer, checked: true }
else
zNodes[i] = { id: myNodes[i].id, pId: myNodes[i].pId, name: myNodes[i].name, answer:myNodes[i].answer,}
}
}
$.fn.zTree.init($("#demoZtree"), setting, zNodes)//初始化树
$.fn.zTree.getZTreeObj("#demoZtree")//把得到的树赋给div
}
})
//动态生成树的 ztree子节点点击事件
function zTreeOnClick(event, treeId, treeNode) {
// alert(treeNode.tId + ", " + treeNode.name)
$("#eventProblemDesc1").html(treeNode.name)//把标题赋值给div
//插入节点到右边的框内 $("#tab_content_ztree_explain").html(treeNode.name+':')
$.ajax({
type: "get",
url: "../tools/admin_ajax.ashx?action=GetCallContent&time=" + Math.random(),
dataType: "html",
success: function (data) {
//转换一下
var myNodes = JSON.parse(data)
var zNodes = []
//利用Selected获取 zTree 当前被选中的节点数据集合
var treeObj = $.fn.zTree.getZTreeObj("demoZtree")
var nodes = treeObj.getSelectedNodes()
// console.log(nodes)
for (var i = 0 i < myNodes.length i++) {
var item = myNodes[i]
if(item.id == nodes[0].id){ //<span style="font-family: Arial, Helvetica, sans-serif">判断树节点与点击的节点对应的id是否相等</span>
// alert(item)
var cont = ''
cont+=item.answer
$('#tab_content_ztree_explain').html(cont) //赋值给div
// $('treeNode.name').html(answ)
}
}
}
})
}
})
</script>
方法很简单。插件中是将数据写死在js里面的。只要是这个格式即可。所以在你从后台把数据从数据库读取出来后。按照tree需要的这个格式,把数据拼接成这个格式。通过ajax传回前台再调用绑定方法即可。读取数据-组成需要的格式-传到前台js中-再执行tree的绑定方法调用即可。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)