纯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).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 onload="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 = 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 + "页&nbsp;共" + 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: bold;color: Blue; text-align: center;";
                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 = spanCss;
                spanInfo.appendChild(spanInfo1);
                spanInfo.appendChild(txtNowPage);
                spanInfo.appendChild(spanInfo2);

                var spanPageItemCount = CreateElement("span");

                var spanPageItemCount1 = CreateElement("span");
                spanPageItemCount1.innerHTML = "&nbsp;每页显示";
                var spanPageItemCount2 = CreateElement("span");
                spanPageItemCount2.innerHTML = "条";
                var txtPageItemCount = CreateElement("input");
                txtPageItemCount.type = "text";
                txtPageItemCount.size = 2;
                txtPageItemCount.value = this.ShowItemCount;
                txtPageItemCount.title = "输入数值后按回车键触发";
                txtPageItemCount.style.cssText = "font-weight: bold;color: Blue; text-align: center;";
                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 = spanCss;
                spanPageItemCount.appendChild(spanPageItemCount1);
                spanPageItemCount.appendChild(txtPageItemCount);
                spanPageItemCount.appendChild(spanPageItemCount2);

            }

            // 按钮
            {
                var btnFirst = CreateElement("input");
                btnFirst.type = "button";
                btnFirst.value = "首页";
                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 = "上页";
                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 = "下页";
                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 = "尾页";
                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 = "导出";
                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 + "页&nbsp;共" + itemCount + "项";
                document.getElementById(txtNowPage).value = nowPage;

                // 回调,返回用户需要的参数
                callback(nowPage);
            }

            /// <summary>
            /// 全选按钮事件、单个复选框点击
            /// <summary>
            var TableCheckboxCheckAll = function (obj) {
                var cks = document.getElementsByName(obj.getAttribute("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 = fileName;
            //            }

            var ucH = document.getElementById("uc_export_hf_headStr");
            if (ucH != null && ucH != undefined) {
                document.getElementById("uc_export_hf_headStr").value = headStr;
            }

            var ucB = document.getElementById("uc_export_hf_bodyStr");
            if (ucB != null && ucB != undefined) {
                document.getElementById("uc_export_hf_bodyStr").value = bodyStr;
            }

        }
        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.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();
    }

}

嘿嘿,大功告成,整个过程如上,有问题再联系。

另外,若转载,请添加转载说明,该文为自己原创的,有好的建议,一块学习,一块修改进步,谢谢!

纯javascript写的table加载,包含分页、数据下载功能

时间: 2024-10-06 00:28:09

纯javascript写的table加载,包含分页、数据下载功能的相关文章

纯css写出爱心版加载效果,等待加载也是一种享受

现在互联网时代网站何其多,各有各得风格,但是什么样的风格能留住用户的停留观看呢?就从加载来说,很多加载效果都是同一种风格可能用户经常逛网站早已经习惯,要是你的加载时间比其他网站时间长,效果还是一样的,可能就会关掉你的网站去其他网站观看,但是如果你的加载效果别具一格,有特点,可能用户看你加载效果的时候你的网站就打开了,这样用户也就不会立刻关掉你的网站. html代码: <div class="flex-container"> <div class="unit&

Javascript加载talbe(包含分页、数据下载功能)

效果图如下: 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或者表格上面都可以 3.表格则也是单独的一个,自己任意设置位置 4.复选框是否显示,自己设置,并可设置绑定的值,并有自带的方法可供你用于获取选中的复选框的对象跟值 5.表格的单行.双行.点击.悬浮.标题栏.表格的样式,都可以通过设置参数来修改,图为自带的效果 6.分页默认每页10行,分页的检测.复选框

JavaScript之:模块加载程序的历史与背景

原文:History and Background of JavaScript Module Loaders 作者:Elias Carlston 翻译:leotso 介绍 Web 应用程序的应用程序逻辑不断从后端移到浏览器端.但是,由于富客户端 JavaScript 应用程序的规模变得更大,它们遇到了类似于多年来传统应用所面临的挑战:共享代码以便重用,同时保持架构的隔离分层,并且足够灵活以便于轻松扩展. 这些挑战的一个解决方案是开发 JavaScript 模块和模块加载系统.这篇文章将着重于比较

16款纯CSS3实现的loading加载动画

分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="grid"> <div class="cell"> <div class="card"> <span class="spinner-loader">Loading…</span

写个重新加载 ocelot 配置的接口

原文:写个重新加载 ocelot 配置的接口 写个重新加载 ocelot 配置的接口 Intro 我们想把 ocelot 的配置放在自己的存储中,放在 Redis 或者数据库中,当修改了 Ocelot 的配置之后希望即时生效,又不想在网关这边定时刷新 ocelot 配置,ocelot 配置没变化的时候,定时刷新配置是一种无意义的资源浪费,ocelot 自带的有一个 Administration ,感觉对于我来说,有点太重了,不想去集成这个东西,于是就想自己实现一个重新加载配置的接口. 实现代码

Javascript图片的懒加载与预加载

1. 缓载.预载的概念 这些技术不仅限于图片加载,但我们首先讨论最常用的图片加载. 缓载:延迟加载图片或符合某些条件时才加载某些图片. 预载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.缓载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力. 2. 缓载的意义与实现 缓载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 主要体现在三种模式上: 第一种是纯粹的延迟加载,使用setTimeOut

使用JavaScript判断图片是否加载完成的三种实现方式

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http:/

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

[Android学习系列2]用webview写界面,加载本地js,js,html文件

以jquery mobile为例 1.在android界面拖入一个webview,然后添加一个internet权限 <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" /> <uses-permission android:name="android.permission.INTERNET"/> <application ........