ExtJS 4.2.1+Struts2 实现后台控制进度的进度条（progressbar）

最新推荐文章于 2024-01-07 12:31:07 发布

原创最新推荐文章于 2024-01-07 12:31:07 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#struts2 #extjs #progress #javascript

工作笔记专栏收录该内容

1 篇文章

订阅专栏

项目中一些收尾的工作，需要将EdoJS替换为ExtJS，其中比较重要的是后台传参的进度条的实现。

1.首先给出ExtJS实现进度条（progress.js）

var progressText;//进度条信息
var progressNum;//滚动条被刷新的次数
			
function progress(){
	var msgBox = Ext.Msg.show({    
		title:'请等待',    
		msg:'进程开始',    
		modal:true,//将msgBox建立为动态窗口，防止窗口重建    
		width:300,    
		progress:true,
		progressText:'准备中...',
		closable: false,//禁止关闭窗口
		fn: showResult
	});  
	var t = setInterval(function(){
		var percentage = progressNum/100;//进度条百分比
		msgBox.updateProgress(percentage, progressNum >= 100 ? '完成！' : progressText);
		if(progressNum>=100){
			clearInterval(t);//进度条结束后停止计时
			Ext.Msg.hide();
			progressEnd();//该方法应在调用进度条的页面中定义
		}else{
			progressIndex();
		}
	}, 200);
}
function progressIndex(){
	Ext.Ajax.request({
		url: 'obtProgressParaAction.action',//用来传递进度条参数的Action
		method: 'post',
		success: function(response){
			var data = Ext.decode(response.responseText);//将jsonStr解析出来（String）
			var obj = JSON.parse(data.jsonStr);//String转为Object
			progressNum = obj.progressNum;
			progressText = obj.progressName;
		},
		fail: function(){
			Ext.Msg.alert('获取进度条失败！');
		}
	});
}
function showResult(action, value){
	alert(action + ':' + value);
}

2.由于后台涉及较多，只给出关键代码

①首先创建一个结构体，这里叫做ProgressBufferRAM

/**
 * 
 */
package tools.progressBar;

/**
 * @author YcraD
 *
 */
public class ProgressBufferRAM {
	///成员变量
	private String progressName;//进度名称
	private int progressNum;//进度数值（0~100）
	private String progressMessage;	//错误信息（初始为“”）
	/**
	 * 无参构造
	 */
	public ProgressBufferRAM()	{}
	/**
	 * 有参构造
	 */
	public ProgressBufferRAM(String progressName, int progressNum, String progressMessage)	{
		this.progressName = progressName;
		this.progressNum = progressNum;
		this.progressMessage = progressMessage;
	}
	/**
	 * 进度名称[设置方法]
	 * @param progressName 进度名称
	 */
	public void setProgressName(String progressName)	{
	  this.progressName = progressName;
	}

	/**
	 * 进度名称[获取方法]
	 * @return progressName 进度名称
	 */
	public String getProgressName()	{
	  return this.progressName;
	}

	/**
	 * 进度数值[设置方法]
	 * @param progressNum 进度数值
	 */
	public void setProgressNum(int progressNum)	{
	  this.progressNum = progressNum;
	}

	/**
	 * 进度数值[获取方法]
	 * @return progressNum 进度数值
	 */
	public int getProgressNum()	{
	  return this.progressNum;
	}
	/**
	 * @return the progressMessage
	 */
	public String getProgressMessage() {
		return progressMessage;
	}
	/**
	 * @param progressMessage the progressMessage to set
	 */
	public void setProgressMessage(String progressMessage) {
		this.progressMessage = progressMessage;
	}
}

②为了方便与页面交互且使项目层次清晰，再创建一个ProgressBufferStr结构体

package tools.progressBar;

public class ProgressBufferStr {
	///成员变量
	private String progressName;//进度名称
	private String progressNum;//进度数值
	private String progressMessage;	//错误信息（初始为“”）
	
	public ProgressBufferStr(){}
	
	public ProgressBufferStr(ProgressBufferRAM buffer){
		this.progressName = buffer.getProgressName();
		this.progressNum = Integer.toString(buffer.getProgressNum());
		this.progressMessage = buffer.getProgressMessage();
	}
	
	public String getProgressName() {
		return progressName;
	}
	public void setProgressName(String progressName) {
		this.progressName = progressName;
	}
	public String getProgressNum() {
		return progressNum;
	}
	public void setProgressNum(String progressNum) {
		this.progressNum = progressNum;
	}
	public String getProgressMessage() {
		return progressMessage;
	}
	public void setProgressMessage(String progressMessage) {
		this.progressMessage = progressMessage;
	}
}

③定义一些对进度条参数的操作方法

由于项目涉及用户管理，所以进度条与登录用户绑定

/**
 * 
 */
package tools.progressBar;

import java.util.HashMap;
import java.util.Map;


/**
 * @author YcraD
 *
 */
public class ProgressBuffer {
	//Map<用户ID,Buffer数据结构体>
	private static Map<String,ProgressBufferRAM> data = new HashMap<String,ProgressBufferRAM>();
	/**
	 * 初始化
	 * @param idUser	用户ID
	 * @param name	进度条信息
	 * @param num	进度数（完成为100）
	 */
	public static void initValue(String idUser, String name, int num)	{
		//若Key不存在，则新建ProgressBufferRAM
		if(!data.containsKey(idUser))	{
			data.put(idUser, new ProgressBufferRAM());
		}
		//初始化进度条缓存
		data.put(idUser, new ProgressBufferRAM(name,num,""));
	}
	/**
	 * 获取进度条数值
	 * @param curFaci	外循环当前个数
	 * @param faciLevel	外循环总数
	 * @param curCal	内循环当前个数
	 * @param cLevel	内循环总数
	 * @return
	 */
	public static int obtProgressnum(int curFaci, int faciLevel, int curCal, int cLevel)	{
		int num = (int)(((float)(curFaci-1)*(float)cLevel+curCal)/((float)faciLevel*(float)cLevel)*100f);
		if(num==99)	{
			num = 100;
		}
		 return num;
	}
	/**
	 * 设置进度条参数
	 * @param idUser	用户ID
	 * @param name	进度条信息
	 * @param num	进度条数（完成为100）
	 */
	public static void setProgressValue(String idUser, String name, int num,String message)	{
		data.put(idUser, new ProgressBufferRAM(name,num,message));
	}
	/**
	 * 获取进度条信息
	 * @param idUser	用户ID
	 * @return
	 */
	public static ProgressBufferRAM obtProgressValue(String idUser)	{
		if(!data.containsKey(idUser))
			return null;
		else
			return data.get(idUser);
	}
	/**
	 * 删除指定用户的进度条参数
	 * @param idUser	用户ID
	 */
	public static void clear(String idUser)	{
		data.remove(idUser);
	}

}

④创建Action（Action配置这里省略了）

/**
 * 
 */
package tools.progressBar;

import com.opensymphony.xwork2.ActionSupport;

/**
 * @author YcraD
 *
 */
public class ObtProgressParaAction extends ActionSupport {
	private static final long serialVersionUID = 1L;
	private String jsonStr;//进度结果字符串
	/**
	 * 执行
	 */
	public String execute() throws Exception	{
		String idUser = "007";//这里是测试用户ID
		//读取执行进度
		ProgressBufferRAM progressPara= ProgressBuffer.obtProgressValue(idUser);
		ProgressBufferStr progressStr = new ProgressBufferStr(progressPara);
		jsonStr=Edo.util.JSON.Bean2Json(progressStr);
		//完成
		return SUCCESS;
	}
	
	
	//////////////////////////////GET_SET_METHOD//////////////////////////
	/**
	 * 进度结果字符串[设置方法]
	 * @param progressValueJsonStr 进度结果字符串
	 */
	public void setJsonStr(String jsonStr)	{
	  this.jsonStr = jsonStr;
	}

	/**
	 * 进度结果字符串[获取方法]
	 * @return JsonStr 进度结果字符串
	 */
	public String getJsonStr()	{
	  return this.jsonStr;
	}

}

3.线程Tread中调用进度条（测试进度条的用例）

package message.service;

import tools.progressBar.ProgressBuffer;

public class DelMessageThread extends Thread {
	private String idUser;
	private int num = 0;
	
	/**
	 * 无参构造
	 */
	public DelMessageThread(){}
	
	public DelMessageThread(String idUser){
		this.idUser = idUser;
	}
	
	/**
	 * 启动线程
	 */
	public void run()	{
		//初始化进度条参数
		ProgressBuffer.clear(idUser);
		ProgressBuffer.initValue(idUser, "开始进度条测试", 0);
		
		try {
			Thread.sleep(2000);//暂停Tread
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		//设置进度条参数
		num = ProgressBuffer.obtProgressnum(1, 1, 1, 3);
		ProgressBuffer.setProgressValue(idUser, "开始2s后进入第一阶段", num, "");
		
		try {
			Thread.sleep(3000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		//设置进度条参数
		num = ProgressBuffer.obtProgressnum(1, 1, 2, 3);
		ProgressBuffer.setProgressValue(idUser, "开始5s后进入第二阶段", num, "");
		
		try {
			Thread.sleep(3000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}		
		//设置进度条参数
		num = ProgressBuffer.obtProgressnum(1, 1, 3, 3);
		ProgressBuffer.setProgressValue(idUser, "开始8s后进入第三阶段", num, "");
		
		ProgressBuffer.setProgressValue(idUser, "进度条测试完成", 100, "");
	}
}

4.功能层函数调用Thread
①接口

package message.service;

public interface IMessage {
	/**
	 * 删除消息
	 * @param idUser
	 */
	public void fn_delMessage(String idUser);
}

②实现类

package message.service;

public class MessageImpl implements IMessage{

	public void fn_delMessage(String idUser) {
		// TODO Auto-generated method stub
		DelMessageThread t = new DelMessageThread(idUser);//构造线程
		t.start();//线程开始
	}

}

5.页面调用

①引入progress.js

<script type="text/javascript" src="ExtJs/base/progress.js"></script>

②js中调用

Ext.Ajax.request({
	url: 'delMessageAction.action',//测试用Action，不给出代码了
<span style="white-space:pre">	</span>params: {
<span style="white-space:pre">		</span>idUser: '007'
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>success: function() {
<span style="white-space:pre">		</span>progress();//调用进度条
<span style="white-space:pre">		</span>Ext.each(records,function(record){
<span style="white-space:pre">			</span>messStore.remove(record);
<span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span>}
});

③定义progressEnd

function progressEnd(){
	Ext.Msg.alert('消息','进度条已完成！');
}

以上就是实现与后台交互的实时进度条