原OA系统“通讯录”。这是经理提出的要重新设计的一个功能。要求查询用户列表要快、添加用户信息一次完成并实现图片预览。
据我分析,这个功能的难点有:生成静态页、利用浏览器脚本技术实现查询、本地图片预览。估计了两周能够完成,但到最后一周感觉到时间紧迫,所以每天下班后又增加4~5个小时来写代码。主要用到动态生成页面代码实现“生成静态页”,jquery对html元素的强大操作功能实现快速查询,以及div的背景图片滤镜功能实现“本地图片预览”,最终按时完成。效果不错。
代码如下:
1. 上传文件方法
public static string UpLoadFile(FileUpload fileUpload, string urlPath, string extName)
{
FileUpload fp = new FileUpload();
if (null == fileUpload.PostedFile)
{
return null;
}
string fileName = Path.GetFileName(fileUpload.PostedFile.FileName);
if (string.Empty == fileName)
{
return string.Empty;
}
string fileExtension = Path.GetExtension(fileName);
//
//根据类型确定文件格式如果格式都不符合则返回
//
if (-1 == extName.IndexOf(fileExtension))
{
throw new ApplicationException("上传文件的数据格式不合法");
}
Random objRand = new Random();
System.DateTime date = DateTime.Now;
//生成随机文件名
string saveName = date.Year.ToString() + date.Month.ToString() + date.Day.ToString() + date.Hour.ToString() + date.Minute.ToString()
+ date.Second.ToString() + Convert.ToString(objRand.Next(99) * 97 + 100);
fileName = saveName + fileExtension;
string phyPath = HttpContext.Current.Request.MapPath(urlPath);
//
//保存文件
//
try
{
fileUpload.PostedFile.SaveAs(phyPath + fileName);
return urlPath +fileName;
}
catch
{
throw new ApplicationException("上传失败!");
}
}
2.生成静态也面方法:
public static bool CreateUserListHtmlPage()
{
bool success = false;
StringBuilder tempHtml = new StringBuilder();
tempHtml.AppendLine("<!DOCTYPE html PUBLIC /"-//W3C//DTD XHTML 1.0 Transitional//EN/" /"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd/">");
tempHtml.AppendLine("<html xmlns=/"http://www.w3.org/1999/xhtml/">");
tempHtml.AppendLine("<head><meta http-equiv=/"Content-Type/" content=/"text/html;charset=utf-8/" /><title>通讯录</title>");
tempHtml.AppendLine("<script src=/"js/jquery126.js/" type=/"text/javascript/"></script><script src=/"js/user_list.js/" type=/"text/javascript/"></script>");
tempHtml.AppendLine("<link href=/"style/com.css/" rel=/"stylesheet/" type=/"text/css/" /><link href=/"style/user_list.css/" rel=/"stylesheet/" type=/"text/css/" />");
tempHtml.AppendLine("</head><body>");
tempHtml.AppendLine("<div style=/"width: 980px/"><div style=/"width: 100%/">");
tempHtml.AppendLine("<div class=/"left fleft/"><div class=/"w100 line_s1 left_block/" style=/" height:41px;background:url(imgs/left_bg.gif)/"> 搜索<input id=/"search/" style=/"width: 80px;/" /><img id=/"btn_search/" src=/"imgs/search.gif/" alt=/"点击搜索/" /></div><div id=/"type_list/" class=/"w100 left_block/"><div class=/"w100/" style=/"height:28px;vertical-align:baseline; text-align:left;background:url(imgs/left_bg2.gif);/"><div style=/"width:14px;height:28px;float:left; background:url(imgs/left_type.gif)/"></div><div style=/"float:left; line-height:28px;/"><b>东方红海</b></div></div><div class=/"w100 line_s1/"> <a id=/"search0/" href=/"#/">所有成员</a></div>");
StreamWriter sw = null;
try
{
Dictionary<string, string> links = new Userinfo().GetallLinkData();
foreach (KeyValuePair<string, string> link in links)
{
tempHtml.AppendLine("<div class=/"w100 line_s1/"> <a id=/"" + link.Key + "/" href=/"#/">" + link.Value + "</a></div>");
}
tempHtml.AppendLine("<div class=/"w100 line_s1/"> <a id=/"try_date/" href=/"#/">试用期员工</a></div></div></div>");
tempHtml.AppendLine("<div class=/"right fright/">");
tempHtml.AppendLine("<div class=/"w100 cont_tit/">员工列表信息</div><div class=/"w100 line_s1/" style=/" font-size:14px;/"><div class=/"fleft/" style=/"width: 30px; /"></div><div class=/"fleft/" style=/"width: 100px;/"><b>姓名</b></div><div class=/"fleft/" style=/"width: 100px;/"><b>部门</b></div><div class=/"fleft/" style=/"width: 150px;/"><b>职务</b></div><div class=/"fleft/" style=/"width: 50px;/"><b>性别</b></div><div class=/"fleft/" style=/"width: 80px;/"><b>办公电话</b></div><div class=/"fleft/" style=/"width: 50px;/"><b>状态</b></div><div class=/"fleft/" style=/"width: 140px;/"><b>手机</b></div></div>");
List<MemberList> memList = new Userinfo().GetallMemberList();
foreach (MemberList mem in memList)
{
if ("离职" == mem.State)
{
tempHtml.AppendLine("<div class=/"w100 line_s1 data_line/" style=/"background:#ddd;/">");
}
else
{
tempHtml.AppendLine("<div class=/"w100 line_s1 data_line/">");
}
tempHtml.AppendLine("<div class=/"fleft/" style=/"width: 30px;margin-top:6px;/"><input type=/"checkbox/" class=/"checks/" value=/"" + mem.UserID + "/" /></div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:100px;border-right:1px dotted #ddd;/">" + mem.UserName + "</div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:100px;border-right:1px dotted #ddd;/">" + mem.Department + "</div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:150px;border-right:1px dotted #ddd;/">" + mem.Position + "</div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:50px;border-right:1px dotted #ddd;/">" + mem.Sex + "</div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:70px;border-right:1px dotted #ddd;/">" + mem.OfficeTel + "</div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:50px;border-right:1px dotted #ddd;/">" + mem.State + "</div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:150px;border-right:1px dotted #ddd;/">" + mem.Mobile + "</div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"width:80px;margin-top:8px;/"><img class=/"detial/" src=/"imgs/detial.gif/" alt=/"查看详细内容/"/></div>");
tempHtml.AppendLine("<div class=/"fleft/" style=/"display:none/">" + mem.Groups + "</div>");
tempHtml.AppendLine("</div>");
}
tempHtml.AppendLine("</div><hr class=/"w100 line_hr/" /></div></div></body></html>");
//写字符串到user_list.htm文件
sw = new StreamWriter(HttpContext.Current.Request.MapPath("") + "//user_list.htm", false, Encoding.UTF8);
sw.Write(tempHtml.ToString());
sw.Flush();
success = true;
return success;
}
catch (Exception ex)
{
throw ex;
}
finally
{
sw.Close();
}
}
3.图片上传,以及本地预览的代码:
html:
<div class="fleft w50">
<div>
<div style="vertical-align:top;">照片:</div>
<div id="user_photo" runat="server"></div>
<asp:HiddenField ID="Hphoto_url" runat="server" />
<div>
<asp:FileUpload ID="UpPhoto" runat="server" BackColor="#E2F5FA"
ForeColor="#885200" CssClass="control" Width="230px"/>
</div>
</div>
</div>
css:
#user_photo
{
width:100px;
height:120px;
background:url(../imgs/temp_user.gif);
cursor:pointer;
border:solid 1px #aaa;
}
.pre_img
{
cursor:pointer;
width:350px;
height:330px;
z-index:99999;
position:absolute;
display:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
jquery:
//图片本地显示
$('#UpPhoto').change(function() {
$('#user_photo').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)')
var newPreview = document.getElementById('user_photo');
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
});
//图片本地预览
$('#user_photo').click(function() {
if ($('#UpPhoto').val() != '') {
var temp = document.createElement('div');
document.body.appendChild(temp);
temp.id = 'preimg';
temp.className = 'pre_img';
var tempdiv = $('#preimg');
var offset = $(this).offset();
tempdiv.css('top', offset.top + "px");
tempdiv.css('left', offset.left + "px");
document.getElementById('preimg').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $('#UpPhoto').val();
tempdiv.show();
$('#preimg').click(function() {
$(this).hide();
});
}
});
jQuery(function($) {
$('.checks').hide();
//搜索
$('#btn_search').click(function() {
var stext = $.trim($('#search').val());
if (stext == '') {
showCount($('.data_line').length);
$('.data_line').show();
return;
}
var datas = $('.data_line:contains("' + stext + '")');
$('.data_line').hide();
datas.each(function() {
$(this).show();
});
showCount(datas.length);
});
//试用期员工
//分类查询实现
$('#type_list a').click(function() {
var group = $(this).attr('id');
if (group == 'search0') {
showCount($('.data_line').length);
$('.data_line').show();
return;
}
if (group == 'try_date') {
var datas_try = $('.data_line>div:contains("试用")');
$('.data_line').hide();
datas_try.each(function() {
$(this).parent().show();
});
showCount(datas_try.length);
return;
}
var datas = $('.data_line>div:last-child:contains(",' + group + ',")');
$('.data_line').hide();
datas.each(function() {
$(this).parent().show();
});
showCount(datas.length);
});
//详细信息事件,跳转到管理页
$('.detial').click(function() {
var id = $(this).parent().parent().find('input');
window.open('MemAdmin.aspx?uid=' + id.attr('value'), '_blank');
});
// //当分类输入框获得焦点时,显示分类选项
// $('#type_name').focus(function() {
// $('.checks').show();
// });
// //确定添加分组
// $('#sub_type').click(function() {
// //必须填写分组名称和选择至少一个员工
// var trueCheck = $('.checks[checked]');
// var group = '';
// trueCheck.each(function() {
// group = group + $(this).val() + ',';
// });
// if (group == '') {
// alert('请选择员工!');
// return;
// }
// var tname = $.trim($('#type_name').val());
// if (tname == '') {
// alert('请填写分组名称!');
// return;
// }
// $.get('TypeHandler.ashx?group=' + group + '&name=' + encodeURIComponent(tname), function(data) {
// if (data == '0') {
// alert('操作失败!');
// return;
// }
// //改变页面的分组结构,添加分组名;新加分组id添加到隐藏域
// $('#type_list').append('<div class="w100 line_s1"> <a id="' + data + '" href="#">' + tname + '</a></div>');
// var last = '';
// trueCheck.each(function() {
// last = $(this).parent().parent().children('div:last');
//
// last.append( ',' + data);
//
// });
// });
// });
// //取消添加分组
// $('#cal_type').click(function() {
// $('.checks').hide();
// $('#type_name').val('');
// });
$('#search').keydown(function(event) {
if (event.keyCode == 13) {
$('#btn_search').click();
}
});
});
function showCount(count) {
$('.cont_tit span').remove();
$('.cont_tit').append('<span style="color:red;font-size:12px;float:right">合计:' +count+'人</span>');
}