Winform分页控件使用详细介绍 - 伍华聪 - 博客园
随笔 - 474, 文章 - 20, 评论 - 7090, 引用 - 20
自从上篇随笔《》介绍了最新版本的分页控件，并提供下载使用后，很多人对分页控件非常感兴趣（毕竟Winform数据分页是很常见的），并关注该分页控件应该如何使用，其实分页控件在之前很多篇随笔中断断续续都有介绍，为了使大家对分页控件有个系统的认识，本篇详细介绍分页控件的一些属性设置及相关使用注意事项，使大家对该分页控件有一个更深的了解、跟系统的认识，以便在相关的项目开发中熟练使用。分页控件效果
&1、在Visual Studio开发环境的工具箱中，添加一个分页控件（可以其他名称）的项目，然后选择WHC.Pager.WinControl.dll文件，导入分页控件的工具箱图标，如下所示。
其中WinGridViewPager和WinGridView两个控件就是我们常用到的分页控件，两者用法几乎一致，界面效果不同在于WinGridViewPager具有分页工具条，而WinGridView是提供显示所有内容，没有工具条。
2、拖动到指定的窗体中。
3、在代码引用相关的代码实现动态调用。&
1、在窗体加载实现中添加分页控件的实现代码，以On开始的是相关操作的实现事件，如OnPageChanged表示分页控件页面发生变化的时候，需要实现的事件处理（这个是必须的），另外AppendedMenu是可以在分页控件自带菜单上增加的菜单，如下所示。注意，只要实现相关的事件处理，那么对应的上下文菜单将会出现，默认几个标准的上下文菜单如下所示，包含新建、编辑选定项、删除选定项、打印列表、刷新列表菜单。注意，为了使分页控件能够显示总数，并记住当前的分页，那么在OnPageChanged实现中需要修改分页控件的
RecordCount和
CurrenetPageIndex
这两个属性。如果需要添加自己的菜单，则指定AppendedMenu对象即可。
主要实现代码如下：&
&private&void&FrmCustomer_Load(object&sender,&EventArgs&e) & &
{&&&&&&&&BindData();&&&&&&&&&&&this.winGridViewPager1.OnPageChanged&+=&new&EventHandler(winGridViewPager1_OnPageChanged);&&&&&&&&this.winGridViewPager1.OnStartExport&+=&new&EventHandler(winGridViewPager1_OnStartExport);&&&&&&&&this.winGridViewPager1.OnEditSelected&+=&new&EventHandler(winGridViewPager1_OnEditSelected);&&&&&&&&this.winGridViewPager1.OnDeleteSelected&+=&new&EventHandler(winGridViewPager1_OnDeleteSelected);&&&&&&&&this.winGridViewPager1.OnRefresh&+=&new&EventHandler(winGridViewPager1_OnRefresh);&&&&&&&&this.winGridViewPager1.OnAddNew&+=&new&EventHandler(winGridViewPager1_OnAddNew);&&&&&&&&this.winGridViewPager1.AppendedMenu&=&this.contextMenuStrip1; &&}
2、其他代码的实现如下所示，包含分页事件、刷新事件、删除事件、编辑事件、新增事件、导出Excel事件等。&
private&void&winGridViewPager1_OnPageChanged(object&sender,&EventArgs&e)&&&&{&&&&&&&&BindData();&&&&}&&&&&&&private&void&winGridViewPager1_OnRefresh(object&sender,&EventArgs&e)&&&&{&&&&&&&&BindData();&&&&}&&&&&&&private&void&winGridViewPager1_OnDeleteSelected(object&sender,&EventArgs&e)&&&&{&&&&&&&&if&(MessageUtil.ShowYesNoAndTips("您确定删除选定的记录么？")&==&DialogResult.No)&&&&&&&&{&&&&&&&&&&&&return;&&&&&&&&}&&&&&&&&&&&DataGridView&grid&=&sender&as&DataGridV&&&&&&&&if&(grid&!=&null)&&&&&&&&{&&&&&&&&&&&&foreach&(DataGridViewRow&row&in&grid.SelectedRows)&&&&&&&&&&&&{&&&&&&&&&&&&&&&&BLLFactory&Customer&.Instance.Delete(row.Cells[0].Value.ToString());&&&&&&&&&&&&}&&&&&&&&&&&&BindData();&&&&&&&&}&&&&}&&&&&&&private&void&winGridViewPager1_OnEditSelected(object&sender,&EventArgs&e)&&&&{&&&&&&&&DataGridView&grid&=&sender&as&DataGridV&&&&&&&&if&(grid&!=&null)&&&&&&&&{&&&&&&&&&&&&foreach&(DataGridViewRow&row&in&grid.SelectedRows)&&&&&&&&&&&&{&&&&&&&&&&&&&&&&FrmEditCustomer&dlg&=&new&FrmEditCustomer();&&&&&&&&&&&&&&&&dlg.ID&=&row.Cells[0].Value.ToString();&&&&&&&&&&&&&&&&if&(DialogResult.OK&==&dlg.ShowDialog())&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&BindData();&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&break;&&&&&&&&&&&&}&&&&&&&&}&&&&}&&&&&&&private&void&winGridViewPager1_OnAddNew(object&sender,&EventArgs&e)&&&&{&&&&&&&&btnAddNew_Click(null,&null);&&&&}&&&&&&&private&void&winGridViewPager1_OnStartExport(object&sender,&EventArgs&e)&&&&{&&&&&&&&string&where&=&GetSearchSql();&&&&&&&&this.winGridViewPager1.AllToExport&=&BLLFactory&Customer&.Instance.FindToTable(where);&&&&}&&&&&&&private&void&BindData()&&&&{&&&&&&&#region&添加别名解析&&&&&&&&this.winGridViewPager1.AddColumnAlias("ID",&"编号");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Number",&"客户编号");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Name",&"客户名称");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Type",&"客户类型");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Area",&"客户地区");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Company",&"客户单位");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Address",&"客户地址");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Telephone1",&"电话1");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Telephone2",&"电话2");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Telephone3",&"电话3");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Telephone4",&"电话4");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Telephone5",&"电话5");&&&&&&&&this.winGridViewPager1.AddColumnAlias("CreateDate",&"开户日期");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Shop_ID",&"分店ID");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Note",&"备注");&&&&&&&&this.winGridViewPager1.AddColumnAlias("LastUpdated",&"更新日期");&&&&&&&#endregion&&&&&&&&&&&&&&string&where&=&GetSearchSql();&&&&&&&&this.winGridViewPager1.DataSource&=&BLLFactory&Customer&.Instance.Find(where,&this.winGridViewPager1.PagerInfo);&&&&&&&&this.winGridViewPager1.dataGridView1.Refresh();&&&&}
3、如果不想把所有的实体类属性或者表字段都显示处理（默认全部显示），那么可以设置属性DisplayColumns即可。this.winGridViewPager1.DisplayColumns&=&"ID,ItemNo,ItemName,Manufacture,MapNo,Specification,StockQuantity,AlarmQuantity,WareHouse"; &&
4、设备报表标题如下所示。&
this.winGridViewPager1.PrintTitle&=&Portal.gc.gAppUnit&+&"&--&"&+&"备件信息报表"; &&
5、绑定自定义Datatable对象的实现。
private&void&BindData()&&&&{&&&&&&&&this.winGridViewPager1.DisplayColumns&=&"ID,ItemNo,ItemName,Manufacture,MapNo,Specification,Material,ItemBigType,ItemType,Unit,Price,Source,StoragePos,UsagePos,StockQuantity,AlarmQuantity,Note,Dept,WareHouse";&&&&&&&#region&添加别名解析&&&&&&&&&&&this.winGridViewPager1.AddColumnAlias("ID",&"编号");&&&&&&&&this.winGridViewPager1.AddColumnAlias("ItemNo",&"项目编号");&&&&&&&&this.winGridViewPager1.AddColumnAlias("ItemName",&"项目名称");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Manufacture",&"供货商");&&&&&&&&this.winGridViewPager1.AddColumnAlias("MapNo",&"图号");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Specification",&"规格型号");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Material",&"材质");&&&&&&&&this.winGridViewPager1.AddColumnAlias("ItemBigType",&"备件属类");&&&&&&&&this.winGridViewPager1.AddColumnAlias("ItemType",&"备件类别");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Unit",&"单位");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Price",&"单价");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Source",&"来源");&&&&&&&&this.winGridViewPager1.AddColumnAlias("StoragePos",&"库位");&&&&&&&&this.winGridViewPager1.AddColumnAlias("UsagePos",&"使用位置");&&&&&&&&this.winGridViewPager1.AddColumnAlias("StockQuantity",&"当前库存");&&&&&&&&this.winGridViewPager1.AddColumnAlias("WareHouse",&"所属库房");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Dept",&"所属部门");&&&&&&&&this.winGridViewPager1.AddColumnAlias("Note",&"备注");&&&&&&&&&#endregion&&&&&&&&&&&string&where&=&GetConditionSql();&&&&&&&&List&ItemDetailInfo&&list&=&BLLFactory&ItemDetail&.Instance.Find(where,&this.winGridViewPager1.PagerInfo);&&&&&&&&string&tableColumns&=&"ID|int,ItemNo,ItemName,StockQuantity|int,Manufacture,MapNo,Specification,Material,ItemBigType,ItemType,Unit,Price|decimal,Source,StoragePos,UsagePos,Note,WareHouse,Dept";&&&&&&&&DataTable&dt&=&DataTableHelper.CreateTable(tableColumns);&&&&&&&&DataRow&dr&=&null;&&&&&&&&foreach&(ItemDetailInfo&info&in&list)&&&&&&&&{&&&&&&&&&&&&dr&=&dt.NewRow();&&&&&&&&&&&&dr["ID"]&=&info.ID;&&&&&&&&&&&&dr["ItemBigType"]&=&info.ItemBigT&&&&&&&&&&&&dr["ItemName"]&=&info.ItemN&&&&&&&&&&&&dr["ItemNo"]&=&info.ItemNo;&&&&&&&&&&&&dr["ItemType"]&=&info.ItemT&&&&&&&&&&&&dr["Manufacture"]&=&info.M&&&&&&&&&&&&dr["MapNo"]&=&info.MapNo;&&&&&&&&&&&&dr["Material"]&=&info.M&&&&&&&&&&&&dr["Note"]&=&info.N&&&&&&&&&&&&dr["Price"]&=&info.P&&&&&&&&&&&&dr["Source"]&=&info.S&&&&&&&&&&&&dr["Specification"]&=&info.S&&&&&&&&&&&&dr["StoragePos"]&=&info.StorageP&&&&&&&&&&&&dr["Unit"]&=&info.U&&&&&&&&&&&&dr["UsagePos"]&=&info.UsageP&&&&&&&&&&&&dr["WareHouse"]&=&info.WareH&&&&&&&&&&&&dr["Dept"]&=&info.D&&&&&&&&&&&&&&&StockInfo&stockInfo&=&BLLFactory&Stock&.Instance.FindByItemNo(info.ItemNo);&&&&&&&&&&&&int&quantity&=&0;&&&&&&&&&&&&if&(stockInfo&!=&null)&&&&&&&&&&&&{&&&&&&&&&&&&&&&&quantity&=&stockInfo.StockQ&&&&&&&&&&&&}&&&&&&&&&&&&dr["StockQuantity"]&=&&&&&&&&&&&&&dt.Rows.Add(dr);&&&&&&&&}&&&&&&&&&&&this.winGridViewPager1.DataSource&=&dt.DefaultV//new&WHC.Pager.WinControl.SortableBindingList&ItemDetailInfo&(list);&&&&&&&&this.winGridViewPager1.PrintTitle&=&Portal.gc.gAppUnit&+&"&--&"&+&"备件信息报表";&&&&}
下面提供相关分页控件的下载地址：
1、传统界面的的Winform分页控件：&&
2、Dotnetbar界面效果的Winform分页控件：&&&
WInform分页控件的CHM格式帮助文档：&后台动态生成的Table
怎样实现分页效果
[问题点数：50分，结帖人shayne0123]
后台动态生成的Table
怎样实现分页效果
[问题点数：50分，结帖人shayne0123]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2010年 总版技术专家分年内排行榜第一2009年 总版技术专家分年内排行榜第一
2011年 总版技术专家分年内排行榜第二
本帖子已过去太久远了，不再提供回复功能。& & & &学习任何一门语言前肯定是有业务需求来驱动你去学习它，当然ng也不例外，在学习ng前我第一个想做的demo就是基于ng实现分页，除去基本的计算思路外就是使用指令封装成一个插件，在需要分页的列表页面内直接引用。
& & & 在封装分页插件时我实现了几种方式总体都比较零散，最后找到了一个朋友()封装的插件，觉还不错，读了下他的源码就直接在项目中使用了。
原理和使用说明
& & & 1、插件源码主要基于angular&directive来实现。
& & & 2、调用时关键地方是后台请求处理函数，也就是从后台取数据。
& & & 3、插件有两个关键参数currentPage、itemsPerPage，当前页码和每页的记录数。
& & & 4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。 在调用的页码中我使用了$watch来监控。 &我初次使用时是把调用函数放在了插件的onchange中，结果发现每次都会触发两次后台。这个地方需要注意。
& & & 5、我把请求后台封装成了Service层，然后在Controller里调用，也符合MVC思想。
&div ng-app="DemoApp" ng-controller="DemoController"&
&table class="table table-striped"&
&td&ID&/td&
&td&FirstName&/td&
&td&LastName&/td&
&td&Status&/td&
&td&Address&/td&
&tr ng-repeat="emp in persons"&
&td&{{emp.ID}}&/td&
&td&{{emp.FirstName}}&/td&
&td&{{emp.LastName}}&/td&
&td&{{emp.Status}}&/td&
&td&{{emp.Address}}&/td&
&tm-pagination conf="paginationConf"&&/tm-pagination&
&script type="text/javascript"&
var app = angular.module('DemoApp', ['tm.pagination']);
app.controller('DemoController', ['$scope', 'BusinessService', function ($scope, BusinessService) {
var GetAllEmployee = function () {
var postData = {
pageIndex: $scope.paginationConf.currentPage,
pageSize: $scope.paginationConf.itemsPerPage
BusinessService.list(postData).success(function (response) {
$scope.paginationConf.totalItems = response.
$scope.persons = response.
//配置分页基本参数
$scope.paginationConf = {
currentPage: 1,
itemsPerPage: 5
/***************************************************************
当页码和页面记录数发生变化时监控后台查询
如果把currentPage和itemsPerPage分开监控的话则会触发两次后台事件。
***************************************************************/
$scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', GetAllEmployee);
app.factory('BusinessService', ['$http', function ($http) {
var list = function (postData) {
return $http.post('/Employee/GetAllEmployee', postData);
list: function (postData) {
return list(postData);
插件和Demo下载
&访问密码 be74
阅读(...) 评论()纯javascript写的table加载，包含分页、数据下载功能
&直接先上效果图看看先。&首先简单说明一下，后面会给所涉及到的代码都贴上来的。1.excel图标是一个用户控件，用来触发下载2.首页、上页......每页多少条，这一块是一个整体，你可以选择放置在表格下面，或者表格上面都可以3.表格则也是单独的一个，自己任意设置位置4.复选框是否显示，自己设置，并可设置绑定的值，并有自带的方法可供你用于获取选中的复选框的对象跟值5.表格的单行、双行、点击、悬浮、标题栏、表格的样式，都可以通过设置参数来修改，图为自带的效果6.分页默认每页10行，分页的检测、复选框选择的检测，都已封装好7.每页显示的数量、以及跳转到第几页的事件也都已经写好8.关于导出按钮的数据导出功能，数据查询的时候，将数据绑定到用户控件中，而导出按钮则用来检测是否有复选框，如果有复选框，则用来先检测用户选中的进行拼接导出&功能大概就上面这些了吧，先给调用的方法贴上来。&%@ Page Language="C#" AutoEventWireup="true" CodeFile="CommonTable.aspx.cs" Inherits="ChildrenPageFolder_CommonTable" %&&%@ Register TagPrefix="uc" TagName="tn_export" Src="~/UserControl/DataExport.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"&
&title&添加表格&/title&
&script src="../js/CommonHtmlOperation.js" type="text/javascript"&&/script&
&script language="javascript" type="text/javascript"&
function PageInfoEvent() {
var sql = "select count(*) from camera_fault t";
var sqlQueryCount = ChildrenPageFolder_CommonTable.GetFaultCount(sql).
// 从后台获取一个总数
CommonJS.HtmlTableOperation.LoadPageTool("div_PageInfo", sqlQueryCount, TableDataEvent);
// 调用分页加载的方法，传入：divID，总数，回调函数
function TableDataEvent(nowPage) {
var sql = "select * from camera_fault t";
var dt = ChildrenPageFolder_CommonTable.GetFault(sql, nowPage, CommonJS.HtmlTableOperation.ShowItemCount).
// 从后台获取数据，DataTable类型
// 设置显示的列名，每一列绑定的值
CommonJS.HtmlTableOperation.Fields = ["CF_TYPE:故障类型", "CF_CREATEUSERNAME:申报人姓名", "CF_CREATEUSERID:申报人ID", "CF_CREATETIME:申报时间"];
CommonJS.HtmlTableOperation.SetCheckbox(true, "CF_CAMERAID"); // 设置是否显示复选框，以及复选框绑定那个列，传数据库的列名进去
// 绑定行事件
// CommonJS.HtmlTableOperation.trClickFun = trC;
// CommonJS.HtmlTableOperation.trDblclickFun = trC;
// CommonJS.HtmlTableOperation.trMouseFun = trC;
// CommonJS.HtmlTableOperation.trOutFun = trC;
CommonJS.HtmlTableOperation.LoadData("div_TableData", dt);
// 加载数据。传递 divID 以及 DataTable
// 获取用户选中的复选框的value值
function GetCheckedValue() {
CommonJS.HtmlTableOperation.GetCheckedValue("div_TableData");
// 行的方法，返回行对象
function trC(obj) {
alert(obj.innerHTML);
&/script&&/head&&body onload="PageInfoEvent();TableDataEvent(1);"&
&form id="form1" runat="server"&
&uc:tn_export runat="server" ID="uc_export" /&
&div id="div_PageInfo"&
&div id="div_TableData"&
&/form&&/body&&/html&简单说说代码的调用：1.自己定义好两个div，一个用户控件。两个div呢，一个是放置上一页下一页的位置，另外一个div则用来放置table的位置，至于用户控件，放上来之后，可以隐藏，也可以显示，这个随意。2.PageInfoEvent的三行代码，只需要理解第三行代码就够了，第二行的代码通过ajax从后台获取一个总数。而第三行代码则是调用封装的封装代码，你需要传入三个参数，一个参数是分页按钮显示的div的ID，之后就是总数，最后一个是回调函数，该回调函数是用来当分页触发之后调用的方法，封装的方法会返回一个页数回来。3.TableDataEvent事件中，获取页数。从后台查询该页的数据之后里面有各种参数设置，比如：显示的列名、每个列对应绑定的数据列、是否显示复选框、复选框绑定哪个列、设置每页显示的数量、行的单击双击悬浮离开事件的绑定、表格的颜色，皆可自定义设置，当然，你若不设置，也都可以，都有默认值。4.此处需要注意的是：数据类型暂时限制了C#中的DataTable类型，因为现有的项目全是这个类型的，所以先用这个数据类型来写这个例子，如果要用其它类型，自己改代码5.后面还有两个方法，一个是GetCheckedValue，是获取用户选中的值。TrC呢，是在加载table数据的时候，你绑定了回调方法，那么就在回调的时候，将当前行的对象返回给你自定义&下面是自己封装好的JS方法了/// &summary&/// table 控件操作方式/// &summary&var CommonJS = {};CommonJS.HtmlTableOperation = (function () {
/// &summary&
/// 静态公有方法跟属性
/// &summary&
var TableEvent = {
// 表格涉及到的样式
tableCss: "font-size:13",
trTitleCss: "text-align: COLOR: BACKGROUND-COLOR: #5d7b9d;",
trCss1: "color: #000000;background-color: #",
trCss2: "color: #993300;background-color: #",
trMouseCss: "color: #123456;background-color: #",
trClickCss: "color:background-color: #6060F4;",
/// &summary&
/// 设置需要初始化的变量
/// &summary&
Fields: new Array(),
// 需要显示的字段，表列名
DispField: new Array(),
// 需要显示的字段，中文名
ShowItemCount: 10,
// 设置每页显示的数量
// 是否显示复选框以及复选框绑定的字段
IsShowCheckbox: false,
CheckboxField: "",
SetCheckbox: function (isShow, field) {
this.IsShowCheckbox = isS
this.CheckboxField =
trClickFun: null,
trDblclickFun: null,
trMouseFun: null,
trOutFun: null,
/// &summary&
/// 加载表格数据
/// &summary&
LoadData: function (divId, dt) {
if (dt != null && dt != undefined) {
document.getElementById(divId).innerHTML = "";
var excelHead = "";
var excelBody = "";
// 整理好显示的列
if (this.Fields.length == 0) {
for (var i = 0; i & dt.Columns. i++) {
this.DispField.push(dt.Columns[i].Name);
this.Fields = this.DispF
var temFields = new Array();
var temDispField = new Array();
for (var i = 0; i & this.Fields. i++) {
temFields.push(this.Fields[i].split(":")[0]);
temDispField.push(this.Fields[i].split(":")[1]);
this.Fields = temF
this.DispField = temDispF
// 确定是否需要显示复选框
var td_ckAll = null;
var ck_CheckboxAll = null;
var ck_checkboxIdAll = tableCheckboxAllId = divId + "_CheckboxAll";
var ck_checkboxItemName = tableCheckboxItemName = divId + "_CheckboxItem";
if (this.IsShowCheckbox) {
ck_CheckboxAll = CreateElement("input");
ck_CheckboxAll.type = "checkbox";
ck_CheckboxAll.title = "全选/全不选";
ck_CheckboxAll.id = ck_checkboxIdA
ck_CheckboxAll.setAttribute("checkboxItemName", ck_checkboxItemName);
ck_CheckboxAll.onclick = function (e) { TableCheckboxCheckAll(this); }
td_ckAll = CreateElement("td");
td_ckAll.appendChild(ck_CheckboxAll);
// 创建表格的标题行
var thead = CreateElement("thead");
var thead_tr = CreateElement("tr");
thead_tr.style.cssText = this.trTitleC
if (this.IsShowCheckbox) { thead_tr.appendChild(td_ckAll); }
for (var i = 0; i & this.DispField. i++) {
var thead_tr_td = CreateElement("td");
thead_tr_td.innerHTML = this.DispField[i];
thead_tr.appendChild(thead_tr_td);
excelHead += this.DispField[i] + "/t";
thead.appendChild(thead_tr);
// 创建表格的数据行
var tbody = CreateElement("tbody");
for (var i = 0; i & dt.Rows.length && i & this.ShowItemC i++) {
var tbody_tr = CreateElement("tr");
var tr_titleMsg = "";
if (this.IsShowCheckbox) {
var ck_CheckboxItem = CreateElement("input");
ck_CheckboxItem.type = "checkbox";
ck_CheckboxItem.id = ck_checkboxItemN
ck_CheckboxItem.name = ck_checkboxItemN
ck_CheckboxItem.setAttribute("checkboxAllId", ck_checkboxIdAll);
ck_CheckboxItem.value = dt.Rows[i][this.CheckboxField] == undefined ? "" : dt.Rows[i][this.CheckboxField];
ck_CheckboxItem.onclick = function () { TableCheckboxCheck(this); }
var tbody_tr_td_checkbox = CreateElement("td");
tbody_tr_td_checkbox.appendChild(ck_CheckboxItem);
tbody_tr.appendChild(tbody_tr_td_checkbox);
// 数据内容
for (var j = 0; j & this.Fields. j++) {
var tbody_tr_td = CreateElement("td");
tbody_tr_td.innerHTML = dt.Rows[i][this.Fields[j]];
tbody_tr.appendChild(tbody_tr_td);
tr_titleMsg += this.DispField[j] + ":" + dt.Rows[i][this.Fields[j]] + "/r/n";
excelBody += tbody_tr_td.innerHTML + "/t";
excelBody += "/n";
tbody_tr.title = tr_titleMsg.substring(0, tr_titleMsg.length - 2);
// 添加行的title提示内容
if (i % 2 == 1) { tbody_tr.style.cssText = this.trCss2; } else { tbody_tr.style.cssText = this.trCss1; }
tbody_tr.setAttribute("trNowClass", tbody_tr.style.cssText);
// 数据行的事件绑定
tbody_tr.onclick = function () { trClickEvent(this); }
tbody_tr.ondblclick = function () { trDblclickEvent(this); }
tbody_tr.onmouseover = function () { trMouseEvent(this); }
tbody_tr.onmouseout = function () { trOutEvent(this); }
tbody.appendChild(tbody_tr);
// 将拼接的内容放置到表格中，并添加到页面
var table = CreateElement("table");
table.style.cssText = this.tableC
table.appendChild(thead);
table.appendChild(tbody);
document.getElementById(divId).appendChild(table);
BindExcelExportData(excelHead, excelBody);
/// &summary&
/// 加载分页信息
/// &summary&
LoadPageTool: function (divId, itemCount, callback) {
var pageDivObject = document.getElementById(divId);
var buttonCss = "padding:2 margin:2 ";
var spanCss = "padding:2 font-size:13 ";
var spanInfo = CreateElement("span");
spanInfo.id = "span_" + divId;
var pageCount = Math.floor(itemCount / this.ShowItemCount)
if (itemCount % this.ShowItemCount != 0) { pageCount++; }
spanInfo.setAttribute("attr_PageCount", pageCount);
spanInfo.setAttribute("attr_NowPage", 1);
spanInfo.setAttribute("attr_ItemCount", itemCount);
spanInfo.setAttribute("attr_PageItemCount", this.ShowItemCount);
spanInfo.setAttribute("attr_TxtNowPage", "txt_NowPage_" + divId);
var spanInfo1 = CreateElement("span");
spanInfo1.innerHTML = "当前第";
var spanInfo2 = CreateElement("span");
spanInfo2.innerHTML = "/" + pageCount + "页&共" + itemCount + "项";
var txtNowPage = CreateElement("input");
txtNowPage.id = "txt_NowPage_" + divId;
txtNowPage.type = "text";
txtNowPage.size = 2;
txtNowPage.value = 1;
txtNowPage.title = "输入数值后按回车键触发";
txtNowPage.style.cssText = "font-weight:color: B text-align:";
txtNowPage.onkeyup = function () { this.value = this.value.replace(//D/g, ''); }
txtNowPage.onafterpaste = function () { this.value = this.value.replace(//D/g, ''); }
txtNowPage.onblur = function () { alert("离开事件"); }
spanInfo.style.cssText = spanC
spanInfo.appendChild(spanInfo1);
spanInfo.appendChild(txtNowPage);
spanInfo.appendChild(spanInfo2);
var spanPageItemCount = CreateElement("span");
var spanPageItemCount1 = CreateElement("span");
spanPageItemCount1.innerHTML = "&每页显示";
var spanPageItemCount2 = CreateElement("span");
spanPageItemCount2.innerHTML = "条";
var txtPageItemCount = CreateElement("input");
txtPageItemCount.type = "text";
txtPageItemCount.size = 2;
txtPageItemCount.value = this.ShowItemC
txtPageItemCount.title = "输入数值后按回车键触发";
txtPageItemCount.style.cssText = "font-weight:color: B text-align:";
txtPageItemCount.onkeyup = function () { this.value = this.value.replace(//D/g, ''); }
txtPageItemCount.onafterpaste = function () { this.value = this.value.replace(//D/g, ''); }
txtPageItemCount.onblur = function () { UpdateItemCount(divId, itemCount, this.value, callback); }
spanPageItemCount.style.cssText = spanC
spanPageItemCount.appendChild(spanPageItemCount1);
spanPageItemCount.appendChild(txtPageItemCount);
spanPageItemCount.appendChild(spanPageItemCount2);
var btnFirst = CreateElement("input");
btnFirst.type = "button";
btnFirst.value = "首页";
btnFirst.title = btnFirst.
btnFirst.id = divId + "_FirstButtonId";
btnFirst.style.cssText = buttonC
btnFirst.onclick = function (e) { PageEvent(spanInfo, "first", callback); }
var btnPre = CreateElement("input");
btnPre.type = "button";
btnPre.value = "上页";
btnPre.title = btnPre.
btnPre.style.cssText = buttonC
btnPre.onclick = function (e) { PageEvent(spanInfo, "pre", callback); }
var btnNext = CreateElement("input");
btnNext.type = "button";
btnNext.value = "下页";
btnNext.title = btnNext.
btnNext.style.cssText = buttonC
btnNext.onclick = function (e) { PageEvent(spanInfo, "next", callback); }
var btnEnd = CreateElement("input");
btnEnd.type = "button";
btnEnd.value = "尾页";
btnEnd.title = btnEnd.
btnEnd.style.cssText = buttonC
btnEnd.onclick = function (e) { PageEvent(spanInfo, "end", callback); }
var btnExport = CreateElement("input");
btnExport.type = "button";
btnExport.value = "导出";
btnExport.title = btnEnd.
btnExport.style.cssText = buttonC
btnExport.onclick = function (e) { DataExportToExcel(); }
pageDivObject.innerHTML = "";
pageDivObject.appendChild(btnFirst);
pageDivObject.appendChild(btnPre);
pageDivObject.appendChild(btnNext);
pageDivObject.appendChild(btnEnd);
pageDivObject.appendChild(btnExport);
pageDivObject.appendChild(CreateElement("br"));
pageDivObject.appendChild(spanInfo);
pageDivObject.appendChild(spanPageItemCount);
/// &summary&
/// 获取用户选中的项
/// &summary&
GetCheckedValue: function (divId) { return divId + "_CheckboxItem"; }
/// &summary&
/// 私有属性
/// &summary&
// 绑定为当前选中的行，用来行变色使用
var trClickRowObject = null;
// 表格的全选复选框ID跟数据的复选框NAME
var tableCheckboxAllId = "";
var tableCheckboxItemName = "";
/// &summary&
/// 私有方法
/// &summary&
/// &summary&
/// 分页及复选框使用的方法
/// &summary&
/// &summary&
/// 当更换每页显示的数量时
/// &summary&
var UpdateItemCount = function (divId, itemCount, pageItemCount, callback) {
CommonJS.HtmlTableOperation.ShowItemCount = pageItemC
CommonJS.HtmlTableOperation.LoadPageTool(divId, itemCount, callback);
callback(1);
/// &summary&
/// 页面跳转检测
/// &summary&
var PageEvent = function (spanPage, type, callback) {
var pageCount = spanPage.getAttribute("attr_PageCount");
var nowPage = spanPage.getAttribute("attr_NowPage");
var itemCount = spanPage.getAttribute("attr_ItemCount");
var pageItemCount = spanPage.getAttribute("attr_PageItemCount");
var txtNowPage = spanPage.getAttribute("attr_TxtNowPage");
var newPage = nowP
switch (type) {
case "first": if (nowPage == 1) { alert("已经是首页！"); return; } else { nowPage = 1; } break;
case "pre": if (nowPage - 1 & 1) { alert("已经是首页！"); return; } else { nowPage = nowPage - 1; } break;
case "next": if (nowPage + 1 & pageCount) { alert("已经是尾页！"); return; } else { nowPage = nowPage + 1; } break;
case "end": if (nowPage == pageCount) { alert("已经是尾页！"); return; } else { nowPage = pageC } break;
spanPage.setAttribute("attr_NowPage", nowPage);
// spanPage.innerHTML = "当前第" + nowPage + "/" + pageCount + "页&共" + itemCount + "项";
document.getElementById(txtNowPage).value = nowP
// 回调，返回用户需要的参数
callback(nowPage);
/// &summary&
/// 全选按钮事件、单个复选框点击
/// &summary&
var TableCheckboxCheckAll = function (obj) {
var cks = document.getElementsByName(obj.getAttribute("checkboxItemName"));
for (var i = 0; i & cks. i++) { cks[i].checked = obj. }
var TableCheckboxCheck = function (obj) {
var ckAllObj = document.getElementById(obj.getAttribute("checkboxAllId"));
var ckNames = document.getElementsByName(obj.name);
for (var i = 0; i & ckNames. i++) {
ckAllObj.checked = ckNames[i].checked
if (!ckNames[i].checked) { break; }
/// &summary&
/// 数据行涉及的事件：单击、双击、悬浮、离开...
/// &summary&
function trClickEvent(trObj) {
if (trClickRowObject != trObj && trClickRowObject != null) {
trClickRowObject.style.cssText = trClickRowObject.getAttribute("trNowClass");
trObj.style.cssText = CommonJS.HtmlTableOperation.trClickC
trClickRowObject = trObj
if (CommonJS.HtmlTableOperation.trClickFun != null) {
CommonJS.HtmlTableOperation.trClickFun(trObj);
function trDblclickEvent(trObj) {
if (CommonJS.HtmlTableOperation.trDblclickFun != null) {
CommonJS.HtmlTableOperation.trDblclickFun(trObj);
function trMouseEvent(trObj) {
if (trClickRowObject != trObj) {
trObj.style.cssText = CommonJS.HtmlTableOperation.trMouseC
if (CommonJS.HtmlTableOperation.trMouseFun != null) {
CommonJS.HtmlTableOperation.trMouseFun(trObj);
function trOutEvent(trObj) {
if (trClickRowObject != trObj) {
trObj.style.cssText = trObj.getAttribute("trNowClass");
if (CommonJS.HtmlTableOperation.trOutFun != null) {
CommonJS.HtmlTableOperation.trOutFun(trObj);
/// &summary&
/// 将查询出来的数据绑定到导出的隐藏变量中
/// &summary&
function BindExcelExportData(headStr, bodyStr) {
var ucFn = document.getElementById("uc_export_hf_fileName");
if (ucFn != null && ucFn != undefined) {
var fileName = "Excel_" + (new Date()).toLocaleDateString() + ".xls";
fileName.replace("年", "_").replace("月", "_").replace("日", "");
document.getElementById("uc_export_hf_fileName").value = fileN
var ucH = document.getElementById("uc_export_hf_headStr");
if (ucH != null && ucH != undefined) {
document.getElementById("uc_export_hf_headStr").value = headS
var ucB = document.getElementById("uc_export_hf_bodyStr");
if (ucB != null && ucB != undefined) {
document.getElementById("uc_export_hf_bodyStr").value = bodyS
function DataExportToExcel() {
// 检测用户选中项
var ckAll = document.getElementById(tableCheckboxAllId);
var cks = document.getElementsByName(tableCheckboxItemName);
if (ckAll != null) {
var headStr = GetCheckedRowStr(ckAll);
var bodyStr = "";
if (ckAll.checked) {
for (var i = 0; i & cks. i++) { bodyStr += GetCheckedRowStr(cks[i]) + "/n"; }
for (var i = 0; i & cks. i++) { if (cks[i].checked) { bodyStr += GetCheckedRowStr(cks[i]) + "/n"; } }
BindExcelExportData(headStr, bodyStr);
// 调用下载事件
var ucD = document.getElementById("uc_export_img_downExcel");
if (ucD != null && ucD != undefined) {
document.getElementById("uc_export_img_downExcel").click();
function GetCheckedRowStr(ckObj) {
var textArr = ckObj.parentElement.parentElement.childN
var trStr = "";
for (var i = 1; i & textArr. i++) {
trStr += textArr[i].innerText + "/t";
return trS
/// &summary&
/// 创建节点对象
/// &summary&
var CreateElement = function (elementName) { return document.createElement(elementName); }
return TableE})();&下面的是ajax调用的后台的两个方法，一个是获取总数，一个是获取数据using Susing System.Collections.Gusing System.Lusing System.Wusing System.Web.UI;using System.Web.UI.WebCusing System.Dpublic partial class ChildrenPageFolder_CommonTable : System.Web.UI.Page{
protected void Page_Load(object sender, EventArgs e)
AjaxPro.Utility.RegisterTypeForAjax(typeof(ChildrenPageFolder_CommonTable));
/// &summary&
/// 执行传入的sql获取报障的数据
/// &/summary&
/// &param name="sql"&&/param&
/// &returns&&/returns&
[AjaxPro.AjaxMethod]
public DataTable GetFault(string sql, int pageNum, int itemCount)
int beginNum = (pageNum - 1) * itemC
int endNum = pageNum * itemC
string fenyeSql = "select * from(select a.*,rownum r from (" + sql + ") a where rownum &= " + endNum + ") b where r & " + beginN
DataTable dt = DataAccessManager.GetDataTable(fenyeSql, "PGISAPP");
/// &summary&
/// 统计sql的总数
/// &/summary&
/// &param name="sql"&&/param&
/// &returns&&/returns&
[AjaxPro.AjaxMethod]
public int GetFaultCount(string sql)
int count = DataAccessManager.GetItemsCount(sql, "PGISAPP");
}}&&接下来的两个是用户控件的前台代码跟后台代码&%@ Control Language="C#" AutoEventWireup="true" CodeFile="DataExport.ascx.cs" Inherits="UserControl_DataExport" %&&asp:ImageButton ID="img_downExcel" runat="server"
ImageUrl="~/images/excel.png" ToolTip="导出Excel"
Width="26px" Height="26px" ImageAlign="AbsMiddle"
onclick="img_downExcel_Click" /&
&asp:HiddenField ID="hf_fileName" runat="server" Value="" /&
&asp:HiddenField ID="hf_headStr" runat="server" Value="" /&
&asp:HiddenField ID="hf_bodyStr" runat="server" Value="" /&using Susing System.Collections.Gusing System.Lusing System.Wusing System.Web.UI;using System.Web.UI.WebCpublic partial class UserControl_DataExport : System.Web.UI.UserControl{
protected void Page_Load(object sender, EventArgs e)
/// &summary&
/// &/summary&
protected void img_downExcel_Click(object sender, ImageClickEventArgs e)
// 创建标题行
string excelHead = "";
string[] dhs = new string[] { "标题1", "标题2" };
for (int i = 0; i & dhs.L i++)
excelHead += dhs[i] + "/t";
// 创建数据行
string excelBody = "";
for (int i = 0; i & 2; i++)
for (int j = 0; j & 10; j++)
excelBody += "" + j + "/t";
excelBody += "/n";
excelHead = this.hf_headStr.V
excelBody = this.hf_bodyStr.V
DownExcel(excelHead, excelBody);
catch (Exception ex)
/// &summary&
/// Excel下载输出
/// &/summary&
/// &param name="fileName"&文件名称&/param&
/// &param name="headStr"&标题栏&/param&
/// &param name="bodyStr"&内容主体&/param&
public void DownExcel(string headStr,string bodyStr)
// 文件名称
string fileName = "Excel_" + System.DateTime.Now.ToShortDateString() + ".xls"; // 或者 .et
Response.Clear();
Response.Buffer = true;
System.IO.StringWriter sw = new System.IO.StringWriter();
sw.WriteLine(headStr);
sw.WriteLine(bodyStr);
sw.Close();
Response.AddHeader("Content-Disposition", " filename=" + fileName);
Response.ContentType = "application/ms-excel";
Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");
Response.Write(sw);
Response.End();
}}嘿嘿，大功告成，整个过程如上，有问题再联系。另外，若转载，请添加转载说明，该文为自己原创的，有好的建议，一块学习，一块修改进步，谢谢！&
最新教程周点击榜
微信扫一扫