我在项目中用到产品类别的树形。各种地方都要用。 我就封装起来,方便以后调用。
记录下来,希望给新手们提供帮助。要记得导入jquery.js tree.js
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" type="text/css" href="page/plugin/zTree/zTreeStyle/zTreeStyle.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="page/js/jquery.ztree-2.6.min.js"></script>
<div id="goodsCategoryTree" class="tree"></div>
<input type="hidden" id="goodsCategoryTreeSelect" name="goodsCategoryTreeSelect"/>
<input type="hidden" id="goodsCategoryTreeSelectName" name="goodsCategoryTreeSelectName"/>
<script>
var goodsCategoryTree;
var treeNodes = eval('(${web.goodsCategoryJson})');//为节点进行json赋值
function getCheckTreeNode(event, treeId, treeNode){//获取选中节点id,name
var tId = treeNode.cateID;
var name = treeNode.cateName;
$("#goodsCategoryTreeSelect").val(tId);
$("#goodsCategoryTreeSelectName").val(name);
$("#goodsCategoryTreeSelect").focus();
}
var setting = {//参数设置
isSimpleData : true, //数据是否采用简单 Array 格式,默认false
treeNodeKey : "cateID", //在isSimpleData格式下,当前节点id属性
nameCol : "cateName",
treeNodeParentKey : "parentCateID", //在isSimpleData格式下,当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
checkable : false, //每个节点上是否显示 CheckBox
callback : {
click: getCheckTreeNode
}
};
goodsCategoryTree = $("#goodsCategoryTree").zTree(setting, treeNodes);//初始化树形
</script>