bootStrap Treeview插入+struts2+jQuery+ajax实现动态树

根据网上查询资料,经过测试,完成一个简单的树,涉及以下三个页面:tree.jsp

一、tree.jsp页面关键代码

 1、引入文件   

    <link href="bootstrap-3.3.4.css" rel="stylesheet">
    <link href="css/bootstrap-treeview.css" rel="stylesheet">
    <script src="jquery.min.js"></script>
    <script src="js/bootstrap-treeview.js"></script>

2、tree容器

<div id="treeview" ></div>

3、js代码

 <script type="text/javascript">
    function getNodesData() {//此函数请求后台数据
        var data=null;
        $.ajax({
            url : "tree!getNodesData",
            type : "post",
            async : false,//同步
            dataType : "json",
            success : function(jsonData) {
                data = jsonData;
            }
        });
        return data;
    }

//选择名称为treeview的DIV容器,加载树

    $("#treeview")
       .treeview({
           data: "["+getNodesData()+"]",
           icon: "glyphicon glyphicon-stop",
           selectedIcon: "glyphicon glyphicon-stop",
           collapseIcon: "glyphicon glyphicon-minus",
           expandIcon: "glyphicon glyphicon-plus",
           color: "#000000",
           backColor: "#FFFFFF",
           showIcon: true,
           showCheckbox: false,
           onhoverColor: "#E8E8E8",
           showBorder: true,
           showTags: true,
           highlightSelected: true,
           highlightSearchResults: false,
           selectedBackColor: "#8D9CAA",
           levels: 3,
           tags: ['available'],
           onNodeSelected: function(event, data) { //选择节点后的事件处理代码
               alert("Hello");
           }
       });

二、Class类文件,实现数据 读取,此处直接返回一个固定值,需进一步书写

package com.kehai.action;

import javax.servlet.http.HttpServletRequest;

import net.sf.json.JSONObject;

import org.apache.struts2.interceptor.ServletRequestAware;

import com.opensymphony.xwork2.ActionSupport;

public class TreeAction extends ActionSupport implements ServletRequestAware{
    private static final long serialVersionUID = 1L;

    private HttpServletRequest request;
    private String result;
    

    public String getResult() {
        return result;
    }

    public void setResult(String result) {
        this.result = result;
    }

    public String getNodesData(){
        result="{text:'p1'}" ;
        JSONObject json = JSONObject.fromObject(result);
        result = json.toString();
        return SUCCESS;
    }

    public HttpServletRequest getRequest() {
        return request;
    }

    @Override
    public void setServletRequest(HttpServletRequest request) {
            this.request=request;
    }

}

三、struts.xml文件

        <action name="tree" class="com.kehai.action.TreeAction">
                <result type="json"> 
                     <param name="root">result</param>
                 </result>
        </action>

    

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值