当前位置: 代码迷 >> Web前端 >> jquery,tree树形菜单兑现
  详细解决方案

jquery,tree树形菜单兑现

热度:390   发布时间:2012-06-27 14:20:09.0
jquery,tree树形菜单实现

? ? 我在项目中用到产品类别的树形。各种地方都要用。 我就封装起来,方便以后调用。

? ? 记录下来,希望给新手们提供帮助。要记得导入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"/>  
<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>  
?
1 楼 敲代码的小北 2012-06-02  
楼主,好人~
2 楼 wander312 2012-06-02  
不错, 两年测试员写出 这样的代码...
3 楼 hekuilove 2012-06-02  
多谢楼主
4 楼 aijuans2 2012-06-02  
  相关解决方案