b/s 进度条（jquery，c#）
2010-11-25 09:19 cnb_mtime 阅读(681) 评论(5) 编辑 收藏 举报
$(".window_iframe").progress({//详细参数参照插件内部参数填写
//back_width: "470", //背景宽度，不设置则取默认选择器的容易大小
//back_height: "500", //背景高度
r_count_url: "YWsupplyHandler.ashx?action=getcountdoMapping&solution=" + pc + "&ids=" + ids,
r_num_url: "YWsupplyHandler.ashx?action=getprogress&bz=doMapping",
success: function(state) {
//CallFun_1(state);
}
});
这个个头一回启动处理线程的代码，注意要写到Global.asax里面去，目的是保持线程的生命周期
/// <summary>
/// BeginRequest 事件发出信号表示创建任何给定的新请求。此事件始终被引发，并且始终是请求处理期间发生的第一个事件。
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Application_BeginRequest(object sender, EventArgs e)
{
string action = Request.QueryString["action"];//截取请求
pharseStr(action);//判断请求触发事件，此处目的是截取异步请求
}
private void pharseStr(string cmd)
{
switch (cmd)
{
case "impsbTree":
impsbtree();
break;
default:
break;
}
}
private void impsbtree()
{
parm p = new parm();
p.path = Request.QueryString["serverpath"];
p.userid = Request.QueryString["userid"];
p.gcNodeid = Request.QueryString["gcNodeid"];
ThreadPool.QueueUserWorkItem(new WaitCallback(impSbTreeByThread), p);//启动处理线程
Response.Write("ok");
Response.End();
}
private void impSbTreeByThread(object p2)
{
ImpSbTree_Excel impex = new ImpSbTree_Excel();
parm p = (parm)p2;
impex.OpenExcel(p.path, p.userid, p.gcNodeid);//在此处循环操作数据库
}
class parm
{
public string fat_id;
public string path;
public string userid;
public string serverPatch;
public string gcNodeid;
}
class parmDomap
{
public string ids;
public string folderid;
public string solution;
public string where;
public string pa;
public string ywid;
public string userid;
}
/*
* progress
* 页面进度条效果 ldp
*/
(function($) {
$.fn.progress = function(options) {
var defaults = {
text: "正在加载......", //
result_text: "共{0}条数据，已处理{1}条", //
r_count_url: "", //获取文件数据总数
r_num_url: "", //递归获取的数据处理条件
pro_width: "300", //进度条图片宽度
pro_height: "10", //进度条图片高度
pro_top: "", //进度条的绝对位置
pro_left: "", //进度条的绝对位置
back_width: "", //背景宽度
back_height: "", //背景高度
backcolor: "#CCCCCC", //整个背景颜色
opacity: "0.2", //背景颜色的透明度0.1-1.0
imgpath: "../UI/11.gif", //进度条的背景图片
pro_border: "1px solid blue", //进度条的边框颜色
font_back_color: "#FFF", //字体背景颜色
font_color: "#000", //字体颜色
success: function() { }
}
var options = $.extend(defaults, options);
this.each(function() {
var flag = true;
var clearTime = "";
var height = "";
var width = "";
var thispro = $(this);
height = thispro.height();
width = thispro.width();
var COUNT = 0; //待处理数据总数
if (options.back_height != "") {//如果背景高度不为空，则取设置值
height = options.back_height;
}
if (options.back_width != "") {//如果背景宽度不为空，则取设置值
width = options.back_width;
}
if (options.pro_top == "") {//计算进度条的位置，距离顶端
options.pro_top = (height / 2) - (options.pro_height / 2) - 30;
}
if (options.pro_left == "") {//计算进度条的位置，距离底端
options.pro_left = (width / 2) - (options.pro_width / 2);
}
var _temp = '<div class="progress" style="color:blue;position:absolute;width:' + width + ';height:' + height + ';BACKGROUND:' + options.backcolor + ';TOP:0px;LEFT:0px;Z-INDEX:998;FILTER: alpha(opacity=' + Number(options.opacity) * 100 + ');OPACITY:' + options.opacity + ';DISPLAY:table-cell;VERTICAL-ALIGN:middle;TEXT-ALIGN:center"></div>';
var _temp2 = '<div class="progress-img" style="border:' + options.pro_border + '; width:' + options.pro_width + ';height:' + options.pro_height + ';position:absolute;TOP:' + options.pro_top + ';LEFT:' + options.pro_left + ';Z-INDEX:999;"><div class="div_img" style="background:url(' + options.imgpath + ') no-repeat-y;width:' + (options.pro_width - options.pro_width) + ';height:' + options.pro_height + ';"></div></div>';
var _temp3 = '<div class="progress-font" style="BACKGROUND:' + options.font_back_color + ';color:' + options.font_color + '; width:' + options.pro_width + ';height:' + options.pro_height + ';position:absolute;TOP:' + (options.pro_top + 20) + ';LEFT:' + options.pro_left + ';Z-INDEX:999;"></div>'; ;
thispro.append(_temp);
thispro.append(_temp2);
thispro.append(_temp3);
$.ajax({//获取待处理文件总数
type: 'get',
url: options.r_count_url,
cache: false,
beforeSend: function(XMLHttpRequest) {
$('.progress-font').html('正在计算待处理数据总数，请稍后...');
},
success: function(data) {
COUNT = data;
$('.progress-font').html(options.result_text.replace('{0}', COUNT).replace(/[{]\d[}]/g, "0"));
clearTime = setInterval(getProgress, 1000); //成功获取待处理数据总数后，开始循环调用请求获取当前已处理多少条数据，未提供参数，自行修改
},
error: function() { },
complete: function(XHR, TS) {
}
});
function removeAll() {
$('.progress').remove();
$('.progress-img').remove();
$('.progress-font').remove();
}
function getProgress() {//定时获取处理多少条数据等
if (flag) {
flag = false;
$.ajax({
type: 'get',
url: options.r_num_url,
cache: false,
success: function(data) {
data = $.parseJSON(data); //格式化json数据
if (data.msg == "success") {
flag = true;
$('.div_img').width(options.pro_width / parseInt(COUNT) * parseInt(data.count)); //设置进度条的长度
$(".progress-font").html(options.result_text.replace('{0}', COUNT).replace(/[{]\d[}]/g, data.count) + '，' + parseInt(data.count / parseInt(COUNT) * 100) + "%");
if (data.count == COUNT) {
$(".progress-font").text(options.result_text.replace(/[{]\d[}]/g, data.count) + '，100%，全部处理完毕。请稍后...');
options.success("ok");
clearInterval(clearTime);
removeAll();
}
}
},
error: function() {
}
});
}
}
});
};
})(jQuery);
注意返回数据的格式，也可以直接调用
System.Web.Script.Serialization.JavaScriptSerializer
进行json格式的序列化，输出即可
/// <summary>
/// 获取文件解读进度
/// </summary>
private void getProgress()
{
string bz = request.QueryString["bz"];
string temp = "select * from TEMP_WJJD where username='" + Login.ReadCookie().UserID + "' and bz='" + bz + "'";
string _temp = "";
try
{
DataTable _dt = DbHelperOra.Query(temp);
if (_dt.Rows.Count > 0)
{
_temp = "{\"msg\":\"success\",\"count\":\"" + _dt.Rows[0]["count_file"] + "\",\"filepath\":\"" + Convert.ToString(_dt.Rows[0]["filepath"]).Replace(":", "^").Replace("\\", "\\\\") + "\"}";
}
else
{
_temp = "{\"msg\":\"success\",\"count\":\"0\",\"filepath\":\"\"}";
}
}
catch (Exception e)
{
_temp = "{\"msg\":\"error\",\"conunt\":\"" + e.Message + "\"}";
}
response.Write(_temp);
response.End();
}
/// <summary>
/// 获取文件总数
/// </summary>
private void getFileCount()
{
string folderid = request.QueryString["id"];
string where = request.QueryString["where"];
FileMappingService fms = new FileMappingService("0");
response.Write(fms.getAllCountByArchiveId(folderid, where));
response.End();
}
