zTREE运用_读书人

zTREE使用

<%@ 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 id="mm" style="width:150px;"> ?

? ? ? ?<div id="mm-tabclose">关闭</div> ?

? ? ? ?<div fit="true" border="false">

<div title="我的主页" style="padding:20px;overflow:hidden;">?

<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;@Overridepublic 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;}}

?<action name="toGetZtreeData" method="toGetZtreeData">? ? ? ? ? ? <result type="json"><param name="root">lstTree</param>? ? ? ? ? ? </result>? ? ? ? </action>

zTREE运用

热点推荐