您的位置：首页 > 其它

Web端编写（五）——会议文件的列表

2015-04-15 13:03 148 查看

到了这一步，就很简单了，因为很多东西都讲过了。老规矩，效果图上来。

可恶的腾讯，可恶的华为，华为没有硬件截屏，软件截屏对全屏应用截不完，为了截屏装个腾讯管家，又偷偷装应用宝。

继续，上页面html代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MeetingFile.aspx.cs" Inherits="MeetingSys.MeetingFile" %>
<%@ Register TagName="WapTitle" TagPrefix="UC_Title" Src="AppUC/Title.ascx" %>
<%@ Register TagName="CopyRight" TagPrefix="UC_CopyRight" Src="AppUC/CopyRight.ascx" %>

<!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 runat="server">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-Control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="user-scalable=yes, width=device-width"/>
<title></title>
<link rel="stylesheet" type="text/css" href="..\Styles\WapStyle.css"/>
<script type="text/javascript" src="..\Scripts\MeetingSys.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<UC_Title:WapTitle ID="TopTitle" runat="server" />
<div id="PopMenu">
<p onclick="javascript :history.back(-1)">查看会议议程</p>
<hr style="border:0;background-color:#777777;height:1px;margin: 0;padding:0;"/>
<p onclick="PopContact();">联系我们</p>
<p onclick="PopAbout();">关于系统</p>
</div>
<div id="FileList">
<ul>
<asp:Repeater ID="FileRP" runat="server">
<ItemTemplate>
<li onclick="ViewFile('<%#Eval("ID").ToString().Trim()%>')"><%#Eval("mTitle").ToString().Trim()%></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<UC_CopyRight:CopyRight ID="CopyRightUC" runat="server" />
</div>
</form>
</body>
</html>

是不感觉就像会议列表的简化版？其实就是同一回事，只不过这里更简单，菜单那里多了个返回上一页面的JS函数，连函数都懒得写了，直接在onclick里面就搞定了；文件列表和会议列表有点不一样，Repeater控件放在ul里面了，重复的是li了。接下来玩的就是CSS，绑数据和li的onclick事件了。

FileList层的样式

#FileList
{
position:absolute;
width:96%;
left:2%;
right:2%;
top:3em;
}
#FileList ul
{
margin:0;
display:block;
list-style:none;
padding:0px;
width:100%;
}
#FileList ul li
{
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
font-size:1em;
text-align:left;
text-indent:1em;
height:3em;
line-height:3em;
background:#EEEEEE;
}
#FileList ul li:first-child
{
border-top-left-radius:5px;
border-top-right-radius:5px;
border-top:1px solid #999;
}
#FileList ul li:last-child
{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

first-child和last-child看字面就知道啦，分别是第一条记录和最后一条记录，这个样式纯粹是为了好看，弄4个圆角的框感觉比较高大上，哈哈。

绑定数据

protected void Page_Load(object sender, EventArgs e)
{
string mID=Request.QueryString["ID"];
DataTable DT = MeetingOP.DataOP.GetDataTable("Select * from MeetingFile where mMeetingID="+mID);
if (DT.Rows.Count > 0)
{
FileRP.DataSource = DT;
FileRP.DataBind();
TopTitle.sTitle = "请选择需要查看的会议文件";
}
else
{
TopTitle.sTitle = "这个会议管理员没有上传会议文件";
}
}

没有什么新鲜玩意，不说了

ViewFile()的JS函数

//查看指定ID的会议文件，仅支持PDF文件
function ViewFile(FileID) {
window.location = "ViewFile.aspx?ID=" + FileID;
}

也是个跳转函数，例牌菜了，下篇讲讲怎么打开PDF文件，这是最终的大菜，压轴的，讲完这个系列博文就结束了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航