zTREE使用

最新推荐文章于 2024-09-30 15:23:15 发布

weida11179

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量146

点赞数

文章标签： javascript java json ViewUI

本文链接：https://blog.csdn.net/weida11179/article/details/84215732

版权

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="/common/taglibs.jsp" %>

<%@taglib prefix="page" uri="/WEB-INF/pageTag.tld" %>

<!DOCTYPE html>

<html>

<head>

<title>Border Layout - jQuery EasyUI Demo</title>

/* ztree样式重写 */

.ztree li button.noline_open{

background: url('./js/jquery-easyui-1.2.5/themes/gray/images/tree_arrows.gif') no-repeat -18px 0px;

}

.ztree li button.noline_close {

background: url('./js/jquery-easyui-1.2.5/themes/gray/images/tree_arrows.gif') no-repeat 0px 0px;

}

.ztree li button.pIcon02_ico_open,.ztree li button.pIcon02_ico_close{

margin-right:2px; background: url('${ctx}/js/JQuery zTree v3.0/css/zTreeStyle/img/diy/2.png') no-repeat scroll 0 0 transparent;

vertical-align:top;

*vertical-align:middle;

}

</style>

$(function(){

bindTabEvent();

bindTabMenuEvent();

$('#tt2').datagrid({

title:'My Title',

iconCls:'icon-save',

width:600,

height:350,

nowrap: false,

striped: true,

fit: true,

url:'datagrid_data.json',

sortName: 'code',

sortOrder: 'desc',

idField:'code',

frozenColumns:[[

{field:'ck',checkbox:true},

{title:'code',field:'code',width:80,sortable:true}

]],

columns:[[

{title:'Base Information',colspan:3},

{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,

formatter:function(value,rec){

return '<span style="color:red">Edit Delete</span>';

}

],[

{field:'name',title:'Name',width:120},

{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},

{field:'col4',title:'Col41',width:150,rowspan:2}

]],

pagination:true,

rownumbers:true

});

$('#tt1').tree({

checkbox: false,

url: './data/tree_data.json',

onClick:function(node){

$(this).tree('toggle', node.target);

//alert('you click '+node.text);

onContextMenu: function(e, node){

e.preventDefault();

$('#tt2').tree('select', node.target);

$('#mm').menu('show', {

left: e.pageX,

top: e.pageY

});

}

});

//zTree 开始 --------

var setting = {

data: {

simpleData: {

enable: true

}

async: {

enable: true,

url:"${ctx}/system/toGetZtreeData.action"

view: {

showLine: false

callback: {

/* beforeClick: beforeClick,

beforeCollapse: beforeCollapse,

beforeExpand: beforeExpand,

onCollapse: onCollapse,

onExpand: onExpand */

}

};

var zNodes =[

{ id:1, pId:0, name:"zTree Home",iconOpen:"/img/open.gif"},

{ id:2, pId:1, name:"zTree in Google"},

{ id:3, pId:2, name:"zTree in Iteye"},

{ id:12, pId:11, name:"zTree in Google"},

{ id:13, pId:12, name:"zTree in Iteye"},

{ id:4, pId:2, name:"Nothing..."}

];

$.fn.zTree.init($("#treeDemo"), setting);

});

//zTree回调函数

function zTreeOnClick(event, treeId, treeNode) {

//alert("${ctx}/"+treeNode.tabUrl);

//alert(treeNode.tId + ", " + treeNode.name+", " + treeNode.url);

if(treeNode.tabUrl && treeNode.tabUrl != null){

addTab(treeNode.name,"${ctx}/"+treeNode.tabUrl);

}

</script>

</head>

<div>

<a href="${ctx}/system/login.action">系统主页面</a>

<p>The north content.</p>

</div>

<div region="center">sub center</div>

<div region="east" split="true" style="width:200px;">sub center</div>

</div>

<li>

<span>Folder</span>

<ul>

<span>Sub Folder 1</span>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

</ul>

</div>

</div>

<div id="mm-tabcloseright">关闭右侧标签</div>

<div id="mm-tabcloseleft">关闭左侧标签</div>

</div>

<h3>jQuery EasyUI framework help you build your web page easily.</h3>

<li>easyui is a collection of user-interface plugin based on jQuery.</li>

<li>using easyui you don't write many javascript code, instead you defines user-interface by writing some HTML markup.</li>

<li>easyui is very easy but powerful.</li>

<%-- <page:pageInfo pageSize="1" url="index.jsp" totalPage="20" curPage="2"></page:pageInfo> --%>

</div>

</body>

</html>

package com.grace.project.test.pojo;

public class SimpleTree {

private Long id;

private Long pId;

private String name;

private boolean open;

private String iconSkin;

private boolean isParent = false;

public SimpleTree(){}

public SimpleTree(Long id, Long pId, String name, boolean open) {

super();

this.id = id;

this.pId = pId;

this.name = name;

this.open = open;

}

public Long getId() {

return id;

}

public void setId(Long id) {

this.id = id;

}

public Long getpId() {

return pId;

}

public void setpId(Long pId) {

this.pId = pId;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public boolean isOpen() {

return open;

}

public void setOpen(boolean open) {

this.open = open;

}

public String getIconSkin() {

return iconSkin;

}

public void setIconSkin(String iconSkin) {

this.iconSkin = iconSkin;

}

public boolean getIsParent() {

return isParent;

}

public void setIsParent(boolean isParent) {

this.isParent = isParent;

}

package com.grace.project.test.action;

import java.util.ArrayList;

import java.util.List;

import com.grace.project.test.model.AcctPrivilege;

import com.grace.project.test.pojo.SimpleTree;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")

public class PrivilegeAction extends ActionSupport{

private List<AcctPrivilege> privileges;

public List<SimpleTree> getLstTree() {

return lstTree;

}

public void setLstTree(List<SimpleTree> lstTree) {

this.lstTree = lstTree;

}

List<SimpleTree> lstTree;

@Override

public String execute() throws Exception {

return SUCCESS;

}

/**

* 获取树形数据

* @return String

* @throws Exception

public String toGetPrivilege() throws Exception {

AcctPrivilege privilege1 = new AcctPrivilege();

privilege1.setId(1L);

privilege1.setParentId(0L);

privilege1.setName("name 1");

AcctPrivilege privilege2 = new AcctPrivilege();

privilege2.setId(2L);

privilege2.setParentId(1L);

privilege2.setName("name 2");

AcctPrivilege privilege3 = new AcctPrivilege();

privilege3.setId(3L);

privilege3.setParentId(1L);

privilege3.setName("name 3");

privilege3.setUrl("datagrid.jsp");

AcctPrivilege privilege4 = new AcctPrivilege();

privilege4.setId(4L);

privilege4.setParentId(2L);

privilege4.setName("name 4");

privilege4.setUrl("datagrid.jsp");

List<AcctPrivilege> privilegleTree = new ArrayList<AcctPrivilege>();

privilegleTree.add(privilege1);

privilegleTree.add(privilege2);

privilegleTree.add(privilege3);

privilegleTree.add(privilege4);

this.setPrivileges(privilegleTree);

setLstTree(lstTree);

return SUCCESS;

}

public String toGetZtreeData() throws Exception {

AcctPrivilege privilege1 = new AcctPrivilege();

privilege1.setId(1L);

privilege1.setParentId(0L);

privilege1.setName("name 1");

AcctPrivilege privilege2 = new AcctPrivilege();

privilege2.setId(2L);

privilege2.setParentId(1L);

privilege2.setName("name 2");

AcctPrivilege privilege3 = new AcctPrivilege();

privilege3.setId(3L);

privilege3.setParentId(1L);

privilege3.setName("name 3");

privilege3.setUrl("datagrid.jsp");

AcctPrivilege privilege4 = new AcctPrivilege();

privilege4.setId(4L);

privilege4.setParentId(2L);

privilege4.setName("name 4");

privilege4.setUrl("datagrid.jsp");

List<AcctPrivilege> privilegleTree = new ArrayList<AcctPrivilege>();

privilegleTree.add(privilege1);

privilegleTree.add(privilege2);

privilegleTree.add(privilege3);

privilegleTree.add(privilege4);

this.setPrivileges(privilegleTree);

SimpleTree nodes1 = new SimpleTree(1L,0L,"test1",true);

SimpleTree nodes2 = new SimpleTree(2L,1L,"test2",true);

SimpleTree nodes3 = new SimpleTree(3L,1L,"test3",true);

SimpleTree nodes4 = new SimpleTree(4L,2L,"test4",false);

SimpleTree nodes5 = new SimpleTree(5L,0L,"test5",true);

SimpleTree nodes6 = new SimpleTree(6L,3L,"test6",false);

SimpleTree nodes7 = new SimpleTree(7L,6L,"test7",false);

SimpleTree nodes8 = new SimpleTree(8L,null,"test8",false);

nodes8.setIsParent(true);

nodes1.setIconSkin("pIcon02");

lstTree = new ArrayList<SimpleTree>();

lstTree.add(nodes3);

lstTree.add(nodes4);

lstTree.add(nodes5);

lstTree.add(nodes6);

lstTree.add(nodes7);

lstTree.add(nodes1);

lstTree.add(nodes2);

lstTree.add(nodes8);

setLstTree(lstTree);

return SUCCESS;

}

public List<AcctPrivilege> getPrivileges() {

return privileges;

}

public void setPrivileges(List<AcctPrivilege> privileges) {

this.privileges = privileges;

}

<param name="root">lstTree</param>

</result>

</action>

weida11179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫