- 前端代码
需要用到的插件
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>商品分类</title>
<link href="~/Content/shuxing/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/shuxing/js/jquery-1.4.4.min.js"></script>
<script src="~/Content/shuxing/js/jquery.ztree.core.js"></script>
<script type="text/javascript">
var zTree;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
simpleData: {
enable: true,
idkey: "id",
pIdkey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function (treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParen) {
zTree.expandNode(treeNode);
return false;
} else {
return true;
}
}
}
}
};
var zNodes = [
{ id: 1, pId: 0, name: "超博软件", open: true },
{ id: 101, pId: 1, name: "文胸" },
{ id: 102, pId: 1, name: "香蕉" },
{ id: 103, pId: 1, name: "梨" },
{ id: 10101, pId: 101, name: "红富士苹果" },
{ id: 10102, pId: 101, name: "红星苹果" },
{ id: 10103, pId: 101, name: "红富士苹果" },
{ id: 10104, pId: 101, name: "红星苹果" },
{ id: 10201, pId: 102, name: "红富士苹果" },
{ id: 10202, pId: 101, name: "红星苹果" },
{ id: 10203, pId: 101, name: "红星苹果" },
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
</script>
</head>
<body class="no-skin">
<ul id="tree" class="ztree" style="width:260px;overflow:auto;"></ul>
@*导航条*@
</body>
</html>
- 效果图
扫一扫
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
