这个存储过程并没有对sql语句进行复杂的拼接(因为那样可能会影响性能),麻雀虽小,却五脏俱全,兼具排序和分页两大功能,通用性强,结构紧凑高效。代码如下:
1 CREATE procedure [dbo].[sp_super_page]
2
3 @TableName varchar(5000), --要进行分页的表,也可以用联接,如dbo.employee或dbo.employee INNER JOIN dbo.jobs ON (dbo.employee.job_id=dbo.jobs.job_id)
4
5 @Fields varchar(5000), --表中的字段,可以使用*代替
6
7 @OrderField varchar(5000), --要排序的字段
8
9 @sqlWhere varchar(5000), --WHERE子句
10
11 @pageSize int, --分页的大小
12
13 @pageIndex int, --要显示的页的索引
14
15 @TotalPage int output --页的总数
16
17 as
18
19 begin
20
21 Begin Tran
22
23 Declare @sql nvarchar(4000);
24
25 Declare @totalRecord int; --记录总数
26
27
28
29 if (@sqlWhere IS NULL or @sqlWhere = '')
30
31 --在没有WHERE子句的情况下得到表中所有的记录总数
32
33 set @sql = 'select @totalRecord = count(*) from ' + @TableName
34
35 else
36
37 --利用WHERE子句进行过滤
38
39 set @sql = 'select @totalRecord = count(*) from ' + @TableName + ' where ' + @sqlWhere
40
41
42
43 --执行sql语句得到记录总数
44
45 EXEC sp_executesql @sql,N'@totalRecord int OUTPUT',@totalRecord OUTPUT
46
47
48
49 select @TotalPage=CEILING((@totalRecord+0.0)/@PageSize)
50
51
52
53 --根据特定的排序字段为为行分配唯一ROW_NUMBER的顺序
54
55 if (@sqlWhere IS NULL or @sqlWhere = '')
56
57 set @sql = 'select * from (select ROW_NUMBER() over(order by ' + @OrderField + ') as rowId,' + @Fields + ' from ' + @TableName
58
59 else
60
61 set @sql = 'select * from (select ROW_NUMBER() over(order by ' + @OrderField + ') as rowId,' + @Fields + ' from ' + @TableName + ' where ' + @SqlWhere
62
63
64
65 --确保当前页的索引在合理的范围之内
66
67 if @PageIndex<=0
68
69 Set @pageIndex = 1
70
71 if @pageIndex>@TotalPage
72
73 Set @pageIndex = @TotalPage
74
75
76
77 --得到当前页在整个结果集中准确的ROW_NUMBER值
78
79 Declare @StartRecord int
80
81 Declare @EndRecord int
82
83 set @StartRecord = (@pageIndex-1)*@PageSize + 1
84
85 set @EndRecord = @StartRecord + @pageSize - 1
86
87
88
89 --输出当前页中的数据
90
91 set @Sql = @Sql + ') as t' + ' where rowId between ' + Convert(varchar(50),@StartRecord) + ' and ' + Convert(varchar(50),@EndRecord)
92
93 Exec(@Sql)
94
95
96
97 If @@Error <> 0
98
99 Begin
100
101 RollBack Tran
102
103 Return -1
104
105 End
106
107 Else
108
109 Begin
110
111 Commit Tran
112
113 Return @totalRecord
114
115 End
116
117 end
118
119
120
121 下面用pubs数据库做测试,
122
123 USE [pubs]
124
125 GO
126
127 DECLARE @return_value int,
128
129 @TotalPage int
130
131
132
133 EXEC @return_value = [dbo].[sp_super_page]
134
135 @TableName = N'dbo.employee INNER JOIN dbo.jobs ON (dbo.employee.job_id=dbo.jobs.job_id)',
136
137 @Fields = N'emp_id,fname,minit,lname,jobs.job_id,job_lvl,pub_id,hire_date,job_desc,min_lvl,max_lvl',
138
139 @OrderField = N'max_lvl, min_lvl desc',
140
141 @sqlWhere = NULL,
142
143 @pageSize = 10,
144
145 @pageIndex = 3,
146
147 @TotalPage = @TotalPage OUTPUT
148
149
150
151 SELECT @TotalPage as N'@TotalPage'
152
153
154
155 SELECT 'Return Value' = @return_value
156
157
158
159 GO
结果如下所示:

在项目中,我们经常会遇到需要查看数据表中所有字段详细信息的情况,通常我们会把某些必要的字段如ID等显示出来,然后把其它字段汇总放到DetailView或者另一个页面,然后提供一个“查看详细信息”的LinkButton,抑或是利用脚本弹出另一个Web窗口。这些做法都稍显蹩脚,如果只是为“查看详细信息”而查看详细信息(额,有些拗口),我们还有更好的解决办法,利用div+css来达到类似ToolTip的效果。
众所周知,一些HTML元素或者ASP.NET控件都有一个叫做ToolTip的属性。这个属性主要是在鼠标移上的时候显示一些提示和描述信息。不幸的是,它不能像InnerHtml属性一样内嵌HTML代码。比如:
<asp:Image ID="Image1" ImageUrl="~/images/more.gif" ToolTip="<b>抗震救灾 众志成城</b>" runat="server" />
<asp:Label ID="Label2" runat="server" Text="<b>抗震救灾 众志成城</b>"></asp:Label>
并没有达到我们预期的效果,好了,下面我们利用div+css在GridView模板内达到我们想要的效果。
首先,我们添加一个数据源控件。
<asp:SqlDataSource
ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:MySqlConnectionString %>"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT * FROM [authors]">
</asp:SqlDataSource>
Web.config配置如下:
<connectionStrings>
<add name="MySqlConnectionString" connectionString="Data Source=.\sqlexpress;AttachDBFilename=|DataDirectory|pubs.mdf;Integrated Security=True" />
</connectionStrings>
再添加一个GridView
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="au_id"
DataSourceID="SqlDataSource1" AllowPaging="True">
<Columns>
<asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />
<asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
<asp:TemplateField HeaderText="au_fname" SortExpression="au_fname">
<ItemTemplate>
<%--想要添加的代码--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Pubs数据库中的authors表有很多字段,我们只在Gridview里面显示前三个,之后,我们重点在au_fname模板列上做文章。
我们要达到这样的效果:每一行的au_fname后面都有一个小图片,鼠标移上时就弹出tooltip,里面有我们想要的详细信息。
首先,我们需要一个总的div容器。
<ItemTemplate>
<div>
</div>
</ItemTemplate>
接着绑定要显示的字段:
<ItemTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("au_fname") %>'></asp:Label>
</div>
</ItemTemplate>
接着我们再添加一个div,这个div的作用十分重要,不可或缺,它主要是协调和Label1的布局(display:inline)并且框定tooltip的位置(position:relative),使tooltip不至于在页面上“乱跑”。
<ItemTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("au_fname") %>'></asp:Label>
<div style="display:inline; position:relative;z-index:1000">
<img src="images/more.gif" alt="" />
<div id="div<%# Eval("au_id") %>" class="tooltip">
<strong>phone</strong>:<%# Eval("phone")%><br />
<strong>address</strong>:<%# Eval("address")%><br />
<strong>city</strong>:<%# Eval("city")%><br />
<strong>state</strong>:<%# Eval("state")%><br />
<strong>zip</strong>:<%# Eval("zip")%><br />
<strong>contract</strong>:<asp:CheckBox ID="CheckBox1" Checked='<%#Convert.ToBoolean(Eval("contract").ToString())%>' runat="server" />
</div>
</div>
</div>
</ItemTemplate>
Id为div<%# Eval("au_id") %>的div就是我们要的类似tooltip的容器,它是可定制的,也就是说,它可以是相当复杂的,你可以往里面添加任何你想要的HTML代码。
编辑模板列,使其对齐:

下一步,我们要利用CSS代码来控制这个div,使其状态在初始时隐藏,当img对象的onmousemove事件发生时显示,onmouseout事件发生时又隐藏。
下面是CSS代码和Javascript脚本,都很简单。
<style type="text/css">
.tooltip
{
display: none;
position: absolute;
z-index: 1001;
left: 10px;
top: 15px;
width: 170px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, Sans-Serif;
font-size: 0.8em;
padding: 3px;
border: dotted 1px;
background-color: InfoBackground
}
</style>
<script type="text/javascript">
function showPanel(divName) {
var ctl = window.document.getElementById(divName);
ctl.style.display = 'block';
ctl.scrollIntoView();
}
function hidePanel(divName) {
var ct2 = window.document.getElementById(divName);
ct2.style.display = 'none';
}
</script>
好了,终于完成任务了,看一看实际效果吧。

这里有一个问题就是:

这样相当难看,请熟悉CSS的朋友给解决一下,谢谢了!
源代码下载:SmartToolTip.zip