码迷，mamicode.com
首页 > 编程语言 > 详细

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

时间：2014-07-30 12:09:13      阅读：290      评论：0      收藏：0      [点我收藏+]

标签：des   style   blog   http   color   java   使用   os   

 

直接先上效果图看看先。

bubuko.com,布布扣 

首先简单说明一下，后面会给所涉及到的代码都贴上来的。

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加载，包含分页、数据下载功能,布布扣,bubuko.com

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

标签：des   style   blog   http   color   java   使用   os   

原文地址：http://www.cnblogs.com/loushuibazi/p/3877549.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！