首页 > 代码库 > Javascript加载talbe(包含分页、数据下载功能)
Javascript加载talbe(包含分页、数据下载功能)
效果图如下：
首先简单说明一下，后面会给所涉及到的代码都贴上来的。
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="http://www.mamicode.com/~/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="http://www.mamicode.com/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).value; // 从后台获取一个总数 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).value; // 从后台获取数据，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 onl oad="PageInfoEvent();TableDataEvent(1);"> <form id="form1" runat="server"> <uc:tn_export runat="server" ID="uc_export" /> <div id="div_PageInfo"> </div> <div id="div_TableData"> </div> </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:13px;", trTitleCss: "text-align:center; COLOR: white; BACKGROUND-COLOR: #5d7b9d;", trCss1: "color: #000000;background-color: #ffffee;", trCss2: "color: #993300;background-color: #ffffaa;", trMouseCss: "color: #123456;background-color: #eaa;", trClickCss: "color: white;background-color: #6060F4;", /// <summary> /// 设置需要初始化的变量 /// <summary> Fields: new Array(), // 需要显示的字段，表列名 DispField: new Array(), // 需要显示的字段，中文名 ShowItemCount: 10, // 设置每页显示的数量 // 是否显示复选框以及复选框绑定的字段 IsShowCheckbox: false, CheckboxField: "", SetCheckbox: function (isShow, field) { this.IsShowCheckbox = isShow; this.CheckboxField = field; }, 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.length; i++) { this.DispField.push(dt.Columns[i].Name); } this.Fields = this.DispField; } else { var temFields = new Array(); var temDispField = new Array(); for (var i = 0; i < this.Fields.length; i++) { temFields.push(this.Fields[i].split(":")[0]); temDispField.push(this.Fields[i].split(":")[1]); } this.Fields = temFields; this.DispField = temDispField; } // 确定是否需要显示复选框 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_checkboxIdAll; 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.trTitleCss; if (this.IsShowCheckbox) { thead_tr.appendChild(td_ckAll); } for (var i = 0; i < this.DispField.length; 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.ShowItemCount; 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_checkboxItemName; ck_CheckboxItem.name = ck_checkboxItemName; ck_CheckboxItem.setAttribute("checkboxAllId", ck_checkboxIdAll); ck_CheckboxItem.value = http://www.mamicode.com/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.length; 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.tableCss; 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:2px; margin:2px; "; var spanCss = "padding:2px; font-size:13px; "; // 页码 { 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 = http://www.mamicode.com/1;"输入数值后按回车键触发"; txtNowPage.style.cssText = "font-weight: bold;color: Blue; text-align: center;"; txtNowPage.onkeyup = function () { this.value = http://www.mamicode.com/this.value.replace(/D/g, ‘‘); }"离开事件"); } spanInfo.style.cssText = spanCss; 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 = http://www.mamicode.com/this.ShowItemCount;"输入数值后按回车键触发"; txtPageItemCount.style.cssText = "font-weight: bold;color: Blue; text-align: center;"; txtPageItemCount.onkeyup = function () { this.value = http://www.mamicode.com/this.value.replace(/D/g, ‘‘); }"input"); btnFirst.type = "button"; btnFirst.value = "http://www.mamicode.com/首页"; btnFirst.title = btnFirst.value; btnFirst.id = divId + "_FirstButtonId"; btnFirst.style.cssText = buttonCss; btnFirst.onclick = function (e) { PageEvent(spanInfo, "first", callback); } var btnPre = CreateElement("input"); btnPre.type = "button"; btnPre.value = "http://www.mamicode.com/上页"; btnPre.title = btnPre.value; btnPre.style.cssText = buttonCss; btnPre.onclick = function (e) { PageEvent(spanInfo, "pre", callback); } var btnNext = CreateElement("input"); btnNext.type = "button"; btnNext.value = "http://www.mamicode.com/下页"; btnNext.title = btnNext.value; btnNext.style.cssText = buttonCss; btnNext.onclick = function (e) { PageEvent(spanInfo, "next", callback); } var btnEnd = CreateElement("input"); btnEnd.type = "button"; btnEnd.value = "http://www.mamicode.com/尾页"; btnEnd.title = btnEnd.value; btnEnd.style.cssText = buttonCss; btnEnd.onclick = function (e) { PageEvent(spanInfo, "end", callback); } var btnExport = CreateElement("input"); btnExport.type = "button"; btnExport.value = "http://www.mamicode.com/导出"; btnExport.title = btnEnd.value; btnExport.style.cssText = buttonCss; 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 = pageItemCount; 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 = nowPage; 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 = pageCount; } break; } spanPage.setAttribute("attr_NowPage", nowPage); // spanPage.innerHTML = "当前第" + nowPage + "/" + pageCount + "页 共" + itemCount + "项"; document.getElementById(txtNowPage).value = http://www.mamicode.com/nowPage;"checkboxItemName")); for (var i = 0; i < cks.length; i++) { cks[i].checked = obj.checked; } } var TableCheckboxCheck = function (obj) { var ckAllObj = document.getElementById(obj.getAttribute("checkboxAllId")); var ckNames = document.getElementsByName(obj.name); for (var i = 0; i < ckNames.length; 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.trClickCss; 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.trMouseCss; } 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 = http://www.mamicode.com/fileName;"uc_export_hf_headStr"); if (ucH != null && ucH != undefined) { document.getElementById("uc_export_hf_headStr").value = http://www.mamicode.com/headStr;"uc_export_hf_bodyStr"); if (ucB != null && ucB != undefined) { document.getElementById("uc_export_hf_bodyStr").value = http://www.mamicode.com/bodyStr;""; if (ckAll.checked) { for (var i = 0; i < cks.length; i++) { bodyStr += GetCheckedRowStr(cks[i]) + "\n"; } } else { for (var i = 0; i < cks.length; 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.childNodes; var trStr = ""; for (var i = 1; i < textArr.length; i++) { trStr += textArr[i].innerText + "\t"; } return trStr; } /// <summary> /// 创建节点对象 /// <summary> var CreateElement = function (elementName) { return document.createElement(elementName); } } return TableEvent;})();
下面的是ajax调用的后台的两个方法，一个是获取总数，一个是获取数据
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Data;public 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) * itemCount; int endNum = pageNum * itemCount; string fenyeSql = "select * from(select a.*,rownum r from (" + sql + ") a where rownum <= " + endNum + ") b where r > " + beginNum; DataTable dt = DataAccessManager.GetDataTable(fenyeSql, "PGISAPP"); return dt; } /// <summary> /// 统计sql的总数 /// </summary> /// <param name="sql"></param> /// <returns></returns> [AjaxPro.AjaxMethod] public int GetFaultCount(string sql) { int count = DataAccessManager.GetItemsCount(sql, "PGISAPP"); return count; }}
接下来的两个是用户控件的前台代码跟后台代码
<%@ 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 System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;public 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) { try { // 创建标题行 string excelHead = ""; string[] dhs = new string[] { "标题1", "标题2" }; for (int i = 0; i < dhs.Length; 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.Value; excelBody = this.hf_bodyStr.Value; 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", "attachment; filename=" + fileName); Response.ContentType = "application/ms-excel"; Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312"); Response.Write(sw); Response.End(); }}
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。