Struts1基于Json数据格式的ExtJs单选树(Struts1+Spring+Hibernate)-白红宇

Struts1基于Json数据格式的ExtJs单选树(Struts1+Spring+Hibernate)

阅读量：5267 次

发布时间：2019-06-14

本文共 13540 字，大约阅读时间需要 45 分钟。

功能描述：根据Json格式数据生成单选树，然后将选择后的数据回调到文本框中

http://172.16.1.136:5000/tjfae_oa_service/org/orgtree?parentId=0&code=e8ca9f833c615e52647b4e88b87bc32c&type=oa&time=1332746215687

json数据格式：[{"id":"1","text":"根机构","leaf":false}],

当parentId=1时,数据为：[{"id":"20","text":"山东资产交易所","leaf":false},{"id":"10","text":"北京地区总部","leaf":true},{"id":"30","text":"上海地区总部","leaf":true}, {"id":"40","text":"深圳地区总部","leaf":true}]

同理：当从action跳转时也一样：/members/urlEncapsulation.do?

一、先看效果图再贴代码：

1、

2、当点击上图的"选择管理员",就会通过action跳转到一个新的窗口(我的是RadioTree.jsp),然后显示以下数据

3、当点击根机构时,实现异步加载形成单选树结构

4、当选中一个员工,确定,将选中的员工回调到文本框

二、以上是效果图,接下来是实现的代码：

1、userRadioTree.jsp代码：

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

String Path = request.getContextPath();

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="/scripts/ext/TreeCheckNodeUI.js"></script> //该js好多版本都没有,但是对于单选树来说很重要,(如果不加的话可能会形成复选框,这一点我没有试)我会在下面将代码贴出来

Ext.onReady(function(){

var treeLoader = new Ext.tree.TreeLoader({

baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI }

});

// 添加一个树形面板

var treepanel = new Ext.tree.TreePanel({

// renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。

el : 'tree-panel',// 将树形添加到一个指定的div中,非常重要！

baseCls:'',

region : 'west',

title : '人员单选树',

width : 200,

minSize : 180,

maxSize : 250,

split : true,

autoHeight : false,

frame : true,// 美化界面

autoScroll : true, // 自动滚动

enableDD : false,// 是否支持拖拽效果

onlyLeafCheckable: true,

containerScroll : true,// 是否支持滚动条

checkModel: 'single', // 对树的级联多选多选: 'multiple'(默认)单选: 'single'

//级联多选: 'cascade'(同时选父和子); 'parentCascade'(选父);'childCascade'(选子)

rootVisible : false, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性

border : true, // 边框

animate : true, // 动画效果

loader : treeLoader,

buttons: [{

text: '确认',

handler: function(){

var chooseNodeName = '',chooseNodeId = '',selNodes = treepanel.getChecked();

var chooseParentId='',chooseParentName='';

Ext.each(selNodes, function(node){

if(chooseNodeName.length > 0){

chooseNodeName += ',';

chooseNodeId += ',';

}

chooseNodeName += node.text;//选中的员工姓名

chooseNodeId += node.id;//选中的员工ID

chooseParentId=node.parentNode.id;//父结点ID,此处一定要注意：node.parentNode后面一定要加.id,不加的话在火狐不报错,在IE就会报

});

window.opener.userRadioCallBack(chooseNodeId,chooseNodeName,'',chooseParentId);//回调函数同样重要

window.close();

}

}]

});

// 异步加载根节点

var rootnode = new Ext.tree.AsyncTreeNode({

id : '${rootId}', //根结点ID,因为我的根结点为0(),所以id也可以直接写成"id:0",当然你也可以根据自己的需求用uuid来表示，或者用其他变量表示都可以

text : '根节点',

draggable : false,// 根节点不容许拖动

expanded : true

});

// 为tree设置根节点

treepanel.setRootNode(rootnode);

// 响应加载前事件，传递node参数

treepanel.on('beforeload', function(node) {

treepanel.loader.dataUrl = "${Path}/members/interdomainTurnAction.htm?parentId="+node.id+""; // 定义子节点的Loader,此处调用action就是实现了点击不同结点,展开不同的机构

});

// 渲染树形

treepanel.render();

// 展开节点,第一个参数表示是否级联展开子节点

rootnode.expand(false);//默认为false

});

</script>

<body>

</body>

</html>

2、/members/interdomainTurnAction.htm跳转的action: InterdomainTurnAction(异步加载结点形成树结构,不需要跳转任何页面)

package com.score.web.action.members;

import java.io.BufferedReader;

import java.io.InputStreamReader;

import java.io.OutputStream;

import java.io.PrintWriter;

import java.net.HttpURLConnection;

import java.net.URL;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import com.score.common.util.Security;

import com.score.web.action.core.BaseAction;

/**

* 跨域跳转,根据接口获取不同服务器上的数据，写入到相应的页面,并生成单选树

* @author Administrator

public class InterdomainTurnAction extends BaseAction {

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

PrintWriter out = response.getWriter();

String urlString = "http://172.16.1.136:5000/tjfae_oa_service/org/usertree?";//此处为另一台服务器上的接口,当然我们也可以用自己的action地址来实现该功能(在自己的action中实现返回json数据的方法,格式一定要和上面的json格式一样,其他的json格式没试过)

String type = "oa";//加密用(自己的里面也可以不用写)

Date date = new Date();

Long timeLong = date.getTime();//加密用(自己的里面也可以不用写)

String keys = type+timeLong; //加密用(自己的里面也可以不用写)

//接收从userRadioTree.jsp页面传过来的当前节点

String pid = request.getParameter("parentId");

//进行加密,获取32位密码

String result =Security.getPassword(keys, "UTF-8");//该方法为加密方法,同上面一样用来加密的,可以不用写(加密方法在我的博客中有[MD5加密],可以自己找,此处就不贴代码了)

//拼接URL

StringBuffer sBuffer = new StringBuffer();

sBuffer.append(urlString).append("parentId=").append(pid).append("&code=").append(result).append("&type=").append(type).append("&time=").append(timeLong);

// 根据拼凑的URL，打开连接，URL.openConnection函数会根据URL的类型，

// 返回不同的URLConnection子类的对象，这里URL是一个http，因此实际返回的是HttpURLConnection

URL getUrl = new URL(sBuffer.toString());

HttpURLConnection connection = (HttpURLConnection) getUrl

.openConnection();

// 进行连接，但是实际上get request要在下一句的connection.getInputStream()函数中才会真正发到服务器

connection.connect();

// 取得输入流，并使用Reader读取

BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"utf-8"));//设置编码,否则中文乱码

System.out.println("=============================");

System.out.println("InterdomainTurnAction....");

System.out.println("=============================");

String lines;

//如果读取的数据不为null的话，将数据写入页面

while ((lines = reader.readLine()) != null){

out.print(lines);

System.out.println(lines);

}

//关闭输入流

reader.close();

return null;

}

3、选择管理员页面(效果图1所在的页面selectManager.jsp)设置：

<tr>

管理员：

</td>

</td>

</tr>

</table>

selectManager.jsp页面JavaScript代码：

//选择管理员

function selectManager(){

window.open("/members/urlEncapsulation.htm");

}

//回调函数,(userRadioTree.jsp)返回OA系统办工人员的ID及姓名,并赋值给文本框

//注意：回调函数一定要和InterdomainTurnAction里面的回调函数一致

function userRadioCallBack(chooseNodeId,chooseNodeName,n){

$("#managerId").val(chooseNodeId);

$("#managerName").val(chooseNodeName);

}

4、/members/urlEncapsulation.htm action:

package com.score.web.action.members;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import com.score.web.action.core.BaseAction;

/**

* 跳转单选树页面

* @author Administrator

public class UrlEncapsulationAction extends BaseAction{

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

//获取根节点

String rootId = request.getParameter("parentId");

if("".equals(rootId)||rootId==null){//如果根节点为空的话，将根节点设置为0

rootId="0";

}

System.out.println("-------UrlEncapsulationAction--------->>>"+rootId);

request.setAttribute("rootId", rootId);

return mapping.findForward("oaUrl");

}

5、TreeCheckNodeUI.js(此处代码不需要修改,只需要引用即可)

/**

* @class Ext.ux.TreeCheckNodeUI

* @extends Ext.tree.TreeNodeUI

* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性

* 扩展的功能点有：

* 一、支持只对树的叶子进行选择

* 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选

* 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false

* 二、支持对树的单选

* 只允许选择一个结点

* 使用时，只需在声明树时，加上属性 checkModel: "single" 既可

* 二、支持对树的级联多选

* 当选择结点时，自动选择该结点下的所有子结点，或该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中

* 使用时，只需在声明树时，加上属性 checkModel: "cascade" 或"parentCascade"或"childCascade"既可

* 三、添加"check"事件

* 该事件会在树结点的checkbox发生改变时触发

* 使用时，只需给树注册事件,如：

* tree.on("check",function(node,checked){...});

* 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选

* 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 既可.

* 例如：

* var tree = new Ext.tree.TreePanel({

* el:'tree-ct',

* width:568,

* height:300,

* checkModel: 'cascade', //对树的级联多选

* onlyLeafCheckable: false,//对树所有结点都可选

* animate: false,

* rootVisible: false,

* autoScroll:true,

* loader: new Ext.tree.DWRTreeLoader({

* dwrCall:Tmplt.getTmpltTree,

* baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性

* }),

* root: new Ext.tree.AsyncTreeNode({ id:'0' })

* });

* tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件

* tree.render();

Ext.ux.TreeCheckNodeUI = function() {

//多选: 'multiple'(默认)

//单选: 'single'

//级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)

this.checkModel = 'multiple';

//only leaf can checked

this.onlyLeafCheckable = false;

Ext.ux.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);

};

Ext.extend(Ext.ux.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {

renderElements : function(n, a, targetNode, bulkRender){

var tree = n.getOwnerTree();

this.checkModel = tree.checkModel || this.checkModel;

this.onlyLeafCheckable = tree.onlyLeafCheckable || false;

// add some indent caching, this helps performance when rendering a large tree

this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

//var cb = typeof a.checked == 'boolean';

var cb = (!this.onlyLeafCheckable || a.leaf);

var href = a.href ? a.href : Ext.isGecko ? "" : "#";

var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',

'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",

'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',

'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',

cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',

'<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',

a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",

'<ul class="x-tree-node-ct" style="display:none;"></ul>',

"</li>"].join('');

var nel;

if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){

this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);

}else{

this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);

}

this.elNode = this.wrap.childNodes[0];

this.ctNode = this.wrap.childNodes[1];

var cs = this.elNode.childNodes;

this.indentNode = cs[0];

this.ecNode = cs[1];

this.iconNode = cs[2];

var index = 3;

if(cb){

this.checkbox = cs[3];

Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));

index++;

}

this.anchor = cs[index];

this.textNode = cs[index].firstChild;

// private

check : function(checked){

var n = this.node;

var tree = n.getOwnerTree();

this.checkModel = tree.checkModel || this.checkModel;

if( checked === null ) {

checked = this.checkbox.checked;

} else {

this.checkbox.checked = checked;

}

n.attributes.checked = checked;

tree.fireEvent('check', n, checked);

if(this.checkModel == 'single'){

var checkedNodes = tree.getChecked();

for(var i=0;i<checkedNodes.length;i++){

var node = checkedNodes[i];

if(node.id != n.id){

node.getUI().checkbox.checked = false;

node.attributes.checked = false;

tree.fireEvent('check', node, false);

}

} else if(!this.onlyLeafCheckable){

if(this.checkModel == 'cascade' || this.checkModel == 'parentCascade'){

var parentNode = n.parentNode;

if(parentNode !== null) {

this.parentCheck(parentNode,checked);

}

if(this.checkModel == 'cascade' || this.checkModel == 'childCascade'){

if( !n.expanded && !n.childrenRendered ) {

n.expand(false,false,this.childCheck);

}else {

this.childCheck(n);

}

// private

childCheck : function(node){

var a = node.attributes;

if(!a.leaf) {

var cs = node.childNodes;

var csui;

for(var i = 0; i < cs.length; i++) {

csui = cs[i].getUI();

if(csui.checkbox.checked ^ a.checked)

csui.check(a.checked);

}

// private

parentCheck : function(node ,checked){

var checkbox = node.getUI().checkbox;

if(typeof checkbox == 'undefined')return ;

if(!(checked ^ checkbox.checked))return;

if(!checked && this.childHasChecked(node))return;

checkbox.checked = checked;

node.attributes.checked = checked;

node.getOwnerTree().fireEvent('check', node, checked);

var parentNode = node.parentNode;

if( parentNode !== null){

this.parentCheck(parentNode,checked);

}

// private

childHasChecked : function(node){

var childNodes = node.childNodes;

if(childNodes || childNodes.length>0){

for(var i=0;i<childNodes.length;i++){

if(childNodes[i].getUI().checkbox.checked)

return true;

}

return false;

toggleCheck : function(value){

var cb = this.checkbox;

if(cb){

var checked = (value === undefined ? !cb.checked : value);

this.check(checked);

}

});

转载于:https://www.cnblogs.com/golon/archive/2012/05/04/2482589.html

你可能感兴趣的文章

[原创]基于Zynq Linux环境搭建(三)

查看>>

WPF基础之路由事件

查看>>

模板类的约束模板友元函数：template friend functions

查看>>

系统如何端子app弄root才干

查看>>

ORA-12638: 无法检索身份证明解决的方法

查看>>

ExtJs给表格某个单元格元素添加链接

查看>>

[condition][]规则开始=$list : ArrayList()

android 报错column '_id' does not exist的解决方案

Software Defined Networking(Week 2, part 3)

查看>>

用命令安装/卸载 windows服务（转）