QQ：1187362408 欢迎技术交流和学习
帮助文档，业务需求
TODO：
1，绘制帮助文档首页（HelpDocumentList.aspx）
2，下载文件
讲解篇：1，服务端aspx,2，服务端后台返回数据（这里采用服务器端程序：aspx.cs）3，前端javascript
服务端aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HelpDocumentList.aspx.cs" Inherits="HMFW.Web.Pages.SystemHelp.HelpDocumentList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>帮助文档列表</title>
<script src="../../Js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../../Js/jquerytree/jquery.ztree.core-3.1.min.js" type="text/javascript"></script>
<link href="../../Js/jquerytree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="../../Js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../Js/jquery.form.js" type="text/javascript"></script>
<link href="../../themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../../themes/icon.css" rel="stylesheet" type="text/css" />
<link href="../../css/Common.css" rel="stylesheet" type="text/css" />
<script src="../../Js/jquery-loadmask-0.4/jquery.loadmask.min.js" type="text/javascript"></script>
<link href="../../Js/jquery-loadmask-0.4/jquery.loadmask.css" rel="stylesheet" type="text/css" />
<link href="../../css/width.css" rel="stylesheet" type="text/css" />
<script src="../../Js/list.js" type="text/javascript"></script>
<script src="../../Js/Common.js" type="text/javascript"></script>
<script src="../../Js/Pages/Ajax.js" type="text/javascript"></script>
<script src="HelpDocumentList.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="div_action" style="margin: 10px 0 0 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="findk" id="searchbar">
<tbody>
<tr id="trsearchbar" align="left">
<td align="right" style="width: 10%">
<div class="divnr-auto">
文件说明：
</div>
</td>
<td align="left" style="width: 23%">
<input id="txt_sName" name="txt_sName" type="text" class="srk150" />
</td>
<td id="tdsCreateUserTitle" align="right" style="width: 10%">
<div class="divnr-auto">
创建人名称：
</div>
</td>
<td id="tdsCreateUser" align="left" style="width: 23%">
<input id="txt_sCreateUserRealname" name="txt_sCreateUserRealname" type="text" class="srk150" />
</td>
</tr>
</tbody>
</table>
<div class="datagrid-toolbar" id="btnbar">
<xhm:xhmLinkButtionEasyUI ID="btn_Add" runat="server" IconTypeSelected="add" OnClientClick="GoAdd();return false;">新增</xhm:xhmLinkButtionEasyUI>
<xhm:xhmLinkButtionEasyUI ID="btn_Edit" runat="server" IconTypeSelected="edit" OnClientClick="Edit();return false;">编辑</xhm:xhmLinkButtionEasyUI>
<xhm:xhmLinkButtionEasyUI ID="btn_Delete" runat="server" IconTypeSelected="delete"
OnClientClick="Delete();return false;">删除</xhm:xhmLinkButtionEasyUI>
<div style="float: right">
<xhm:xhmLinkButtionEasyUI ID="btn_Search" runat="server" IconTypeSelected="search"
ShowSeparator="False" OnClientClick="query();return false;">查询</xhm:xhmLinkButtionEasyUI>
</div>
</div>
</div>
<table id="TList">
</table>
<div id="win" iconcls="icon-save" title="帮助文档" style="overflow: hidden;">
</div>
<input runat="server" type="hidden" id="hidiType" value="0" />
<input runat="server" type="hidden" id="hidIsChange" value="0" />
<input runat="server" type="hidden" id="hidIsCMP" value="0" />
<input runat="server" type="hidden" id="hidConfig" value="" />
</form>
</body>
</html>
服务端后台返回数据
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace HMFW.Web.Pages.SystemHelp
{
public partial class HelpDocumentList : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
string action = GetParam("action");
if (!IsPostBack && string.IsNullOrEmpty(action))
{
var iType = GetParam("type");
hidiType.Value = iType;
}
if (!string.IsNullOrEmpty(action))
Download();
}
private void Download()
{
string sPath = Request["filepath"]; //最得前台的JS的第一个参数
string sName = Request["filename"]; //最得前台的JS的第一个参数
//客户端保存的文件名
sPath = Server.UrlDecode(Server.MapPath(sPath));
sName = Server.UrlDecode(sName);
sPath = sPath.Replace('/', '\\').Replace(@"Pages\SystemHelp\","");
//D:\NewHmFrameWork\HMFW.Web\Pages\SystemHelp\upload\SystemHelp\HelpDocument\20141208101952873.png
if (!System.IO.File.Exists((sPath)))
{
Message("文件不存在！");
return;
}
//以字符流的形式下载文件
FileStream fs = new FileStream((sPath), FileMode.Open);
if (fs.Length > 0)
{
byte[] bytes = new byte[(int)fs.Length];
fs.Read(bytes, 0, bytes.Length);
fs.Close();
Response.ContentType = "application/octet-stream";
//通知浏览器下载文件而不是打开
Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(sName, System.Text.Encoding.UTF8));
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
else
{
Message("指定文件内容为空！");
}
}
}
}具体download.aspx.cs涉及下载文件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace HMFW.Web.Pages.SystemHelp
{
public partial class download : BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Download();
}
}
private void Download()
{
string sPath = Request["filepath"]; //最得前台的JS的第一个参数
string sName = Request["filename"]; //最得前台的JS的第一个参数
string iType = Request["iType"];//页面类型 1，上传页面List 2，下载页面List
//客户端保存的文件名
sPath = Server.UrlDecode(Server.MapPath(sPath));
sName = Server.UrlDecode(sName);
sPath = sPath.Replace('/', '\\').Replace(@"Pages\SystemHelp\", "");
//D:\NewHmFrameWork\HMFW.Web\Pages\SystemHelp\upload\SystemHelp\HelpDocument\20141208101952873.png
if (!System.IO.File.Exists((sPath)))
{
//Message("文件不存在！");
if (!string.IsNullOrEmpty(iType) && iType.Equals("1"))
{
Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>alert('文件不存在！');window.location.href='HelpDocumentList.aspx?type=1'</script>");
}
else
{
Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>alert('文件不存在！');window.location.href='UsersToHelpDocument.aspx'</script>");
}
return;
}
//以字符流的形式下载文件
FileStream fs = new FileStream((sPath), FileMode.Open);
if (fs.Length > 0)
{
//byte[] bytes = new byte[(int)fs.Length];
//fs.Read(bytes, 0, bytes.Length);
//fs.Close();
//等待标识
//Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "javascript:beforeSend();", true);
#region 分 段 读 取 文 件
//打开文件
try
{
//fs1 = new FileStream((sPath), FileMode.Open);
}
catch (Exception)
{
throw;
}
//尚未读取的文件内容长度
long left = fs.Length;
//存储读取结果
byte[] bytes = new byte[100];
//每次读取长度
int maxLength = bytes.Length;
//读取位置
int start = 0;
//实际返回结果长度
int num = 0;
//当文件未读取长度大于0时，不断进行读取
while (left > 0)
{
fs.Position = start;
num = 0;
if (left < maxLength)
{
num = fs.Read(bytes, 0, Convert.ToInt32(left));
Response.BinaryWrite(new byte[left]);
}
else
{
num = fs.Read(bytes, 0, maxLength);
Response.BinaryWrite(bytes);
}
if (num == 0)
break;
start += num;
left -= num;
}
fs.Close();
//等待标识
//Page.ClientScript.RegisterStartupScript(Page.GetType(), "bbb", "<script>complete();</script>");
#endregion
Response.ContentType = "application/octet-stream";
//通知浏览器下载文件而不是打开
Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(sName, System.Text.Encoding.UTF8));
/******Open 写入HTPP输出流*************/
//FileStream fs1 = new FileStream((sPath), FileMode.Open);
//Response.BinaryWrite(new byte[fs1.Length]);
//fs.Close();
Response.Flush();
Response.End();
}
else
{
Message("指定文件内容为空！");
}
}
}
}前端javascript
list.js
/// <reference path="download.aspx" />
var infoflag = false; //窗口模式 True 弹出框口 False 打开新页面
var infowidth = 700; //弹出窗口宽
var infoheight = 600; //弹出窗口高
var infourl = "HelpDocumentInfo.aspx"; //编辑页面路径
var handleurl = "HelpDocument.ashx"; //一般处理程序路径
$(function () {
/********type:1,帮助文档列表<上传附件> 2,帮助文档列表<下载附件>****************/
//例:获得名为type的参数值
var type = $("#hidiType").val();
//加载数据的后台程序页面
//参数
var queryPar = {
action: 'getlist',
sName: $("#txt_sName").val(),
sCreateUserRealname: $("#txt_sCreateUserRealname").val()
};
/************iType:1,上传List 2，下载List***************/
//排序字段
var sortName = "";
//排序方式
var sortOrder = "dec";
//主键字段标识
var idField = 'gID';
//静止列
var frozenColumns = [[
{ field: 'ck', checkbox: true },
{
field: 'opt', title: '操作', width: 150, align: 'center',
formatter: function (value, rec) {
var sPath = rec.sPath.substr(1);
var ht = "<a href=\"#\" οnclick=\"javascript:location.href=\'download.aspx?filepath=" + encodeURIComponent(sPath) + "&filename=" + encodeURIComponent(rec.sFileName) + "&iType=1'\" class=\"alink\" ><span style=\"color:#15428B\">下载文件</span></a>";
// if (!cmp)ruant=\"server\"
// ht = "<a href=\"#\" class=\"alink\" οnclick=\"Edit2('" + rec.gID + "');return false;\"><span style=\"color:#15428B\">编辑</span></a> " + ht;
return ht;
}
}
]];
//活动列
var columns = [
[
{ field: 'sName', title: '文件说明', width: 200, align: 'center', sortable: false },
{ field: 'sFileName', title: '文件名称', width: 200, align: 'center', sortable: false },
{ field: 'sMemo', title: '备注', width: 200, align: 'center', sortable: false },
{
field: 'dCreateDate', title: '创建时间', width: 80, align: 'center', sortable: false,
formatter: function (value, rec) {
return renderTime(value, true);
}
},
{ field: 'sCreateUserRealname', title: '创建人名称', width: 180, align: 'center', sortable: false }
]];
//执行公共方法
fReadyLoad(handleurl, queryPar, sortName, sortOrder, idField, frozenColumns, columns);
/************type:1,上传List 2，下载List***************/
//$('#TList').datagrid('hideColumn', 'sName');
if (type != null && type == "1") {
//$('#TList').datagrid('hideColumn', 'opt');
} else if (type != null && type == "2") {
//var showimg = "<td align=\"right\" style=\"width:10%\"><div class=\"divnr-auto\"></div></td><td align=\"right\" style=\"width:23%\"><div class=\"divnr-auto\"></div></td>";
//$("#trsearchbar").append(showimg);
//$("#searchbar #tdsCreateUserTitle,#tdsCreateUser").remove();
$("#btnbar #btn_Add,#btn_Edit,#btn_Delete").remove();
$(".datagrid-btn-separator").remove();
$('#TList').datagrid('hideColumn', 'ck');
$('#TList').datagrid('hideColumn', 'sMemo');
$('#TList').datagrid('hideColumn', 'dCreateDate');
}
});
function sUploadFiles(filesPath, filesName) {
$.ajax({
type: "POST",
url: "HelpDocumentList.aspx?action=xiazai&filepath=" + filesPath + "&filename=" + filesName + "",
async: false,
success: function (data) {
}
});
}
function Delete() {
Delete_1(handleurl);
}
function getSelections() {
var ids = [];
var rows = $('#TList').datagrid('getSelections');
for (var i = 0; i < rows.length; i++) {
ids.push(rows[i].gID);
}
return ids;
}
//新增
function GoAdd() {
Add_1(infourl, infowidth, infoheight, infoflag, '帮助文档');
}
//编辑方法，点击按钮行的按钮进行编辑
function Edit() {
var listval = getSelections();
var strparm = "gID=" + listval;
var MultiRow = false; //需要验证是否只有一条记录
Edit_1(infourl, strparm, infowidth, infoheight, infoflag, MultiRow, '帮助文档');
}
function query() {
SetFirstPage(); //重新设置为第一页
var queryParams = $('#TList').datagrid('options').queryParams;
queryParams.sName = $("#txt_sName").val();
queryParams.sCreateUserRealname = $("#txt_sCreateUserRealname").val();
$('#TList').datagrid('reload');
clearSelections(); //清空grid的选中项
}info.js
var infoflag = true; //窗口模式 True 弹出框口 False 打开新页面
var infowidth = 700; //弹出窗口宽
var infoheight = 600; //弹出窗口高
var infourl = "HelpDocumentInfo.aspx"; //编辑页面路径
var handleurl = "HelpDocument.ashx"; //一般处理程序路径
$().ready(function () {
var ID = GetID();
if (ID != "") {
Load(ID);
}
});
//function DelFiles() {
// $("#delsPath").click(function () {
// //var pathLength = $("#txt_sPath").val().length;
// if ($("#txt_sPath").val().length > 0) {
// $.messager.confirm('警告', '确认删除这个文件吗?', function (r) {
// if (r) {
// debugger;
// $("#txt_sPath").val("");
// $("#FieldUrl1").val("");
// return false;
// }
// });
// } else {
// $.messager.alert('信息', '请上传要删除的文件!', 'info');
// return false;
// }
// });
// return false;
//}
//新增
function GoAdd() {
alert(infourl)
Add_1(infourl, infowidth, infoheight, infoflag, '帮助文档');
}
function CheckInput() {
var result = $("#form1").validate({
rules: {
txt_sName: {
required: true,
maxlength: 200
}
//txt_sProjectContent: {
// required: true,
// maxlength: 200
//},
//txt_StartDate: {
// required: true,
// dateISO: true
//},
//txt_EndDate: {
// required: true,
// dateISO: true
//},
//ddl_sTypeCode: {
// required: true
//},
//txt_sMemo: {
// required: true,
// maxlength: 500
//}
}
});
return result.form();
};
function Load(ID) {
var data = "action=get" + "&gID=" + ID;
$.ajax({
type: "POST", //用POST方式传输
dataType: "json", //数据格式:JSON
url: handleurl, //目标地址
data: data,
cache: false,
success: function (data) {
//数据获取完毕，填充页面据显示
if (data != null) {
$("#txt_sName").val(data.sName);
$("#txt_sPath").val(data.sPath);
$("#txt_iSort").val(data.iSort);
$("#txt_dCreateDate").val(renderTime(data.dCreateDate, true));
$("#txt_sMemo").val(data.sMemo);
$('#hidsFileName').val(data.sFileName);
}
},
error: function (XmlHttpRequest, textStatus, errorThrown) { $.messager.alert('错误', errorThrown, 'error'); },
beforeSend: function () {
},
complete: function () {
$("hidLoad").val("1");
}
});
}
function Save(isDoNew) {
if (!CheckInput())
return false;
if ($("#txt_sPath").val() == "") {//判断是否上传了文件
$.messager.alert('信息', "请上传文件！", 'info');
return false;
}
var action = "add";
if (GetID() != "") {
action = "edit";
}
var _flag = 0;
var queryString = $('#T_Content :input').fieldSerialize();
var data = "action=" + action + "&gID=" + GetID() + "&" + queryString;
Save_1(isDoNew, handleurl, data, infoflag);
var str = $('#T_Content #txt_dCreateDate').context.fileCreatedDate;
var arr = str.split('/');
var newStr = arr[2] + '-' + (arr[0].length > 1 ? '' : '0') + arr[0] + '-' + (arr[1].length > 1 ? '' : '0') + arr[1]
$("#txt_dCreateDate").val(newStr);
}
//清空隐藏域并设置界面默认值
function clearFields() {
$('#T_Content :input').clearFields(); //清空界面
SetID(""); //清空ID的隐藏域
}
扫一扫
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
