jqgrid 表格数据导出实例

首先,是一段javascript脚本:


代码如下:

/**
 * 
 * 
 * @param table_id 表格的id
 * @param container_id 容器的id
 * @param form_id 提交表单的id
 * @param title 文件名
 * @param rownumbers
 */ 
function getXlsFromTbl(table_id, container_id ,form_id, title, rownumbers) { 
    try { 
        var content = "";

if (table_id != null && table_id != "" && table_id != "null") { 
        <SPAN style="WHITE-SPACE: pre"> </SPAN>content = getTblData($('#' + table_id), $('#' + container_id), rownumbers); 
        } 
        if (content == "") { 
            alert("表格不存在"); 
            return; 
        } 
        var fileName = getExcelFileName(title);

doFileExport($('#' + form_id), fileName, content); 
    } 
    catch (e) { 
        alert("导出异常:" + e.name + "->" + e.description + "!"); 
    } 

function getTblData(tableobj, containerobj, rownumbers) {

var outStr = ""; 
    if (tableobj != null) { 
        var rowdata = tableobj.getRowData(); 
        var Lenr = 1;

for (i = 0; i < Lenr; i++) { 
            //var Lenc = curTbl.rows(i).cells.length;  
            var th; 
            if (rownumbers == false) { 
                th = containerobj.find('TH:not(:first-child)'); 
            } 
            else { 
                th = containerobj.find('TH'); 
            } 
            th.each(function(index, element) { 
                var j = index + 1; 
                var content = $(element).text(); 
                content = content.replace(/(^\s*)|(\s*$)/g, "");//去掉空格  
                outStr += content + ","; 
            }); 
            outStr += "+nl+"; 
        } 
        var tmp = ""; 
        for (i = 0; i < rowdata.length; i++) { 
            var row = eval(rowdata[i]); 
            for (each in row) { 
            <SPAN style="WHITE-SPACE: pre">   </SPAN>var temp = $(row[each]).text(); 
            <SPAN style="WHITE-SPACE: pre">   </SPAN>if($(row[each]).text() == null || $(row[each]).text() == ""){ 
            <SPAN style="WHITE-SPACE: pre">       </SPAN>if(row[each].charAt(0) != '<') 
            <SPAN style="WHITE-SPACE: pre">           </SPAN>outStr += row[each] + ","; 
            <SPAN style="WHITE-SPACE: pre">       </SPAN> 
            <SPAN style="WHITE-SPACE: pre">   </SPAN>} 
            <SPAN style="WHITE-SPACE: pre">   </SPAN>else 
            <SPAN style="WHITE-SPACE: pre">       </SPAN>outStr += $(row[each]).text() + ","; 
            } 
            outStr += "+nl+"; 
        } 
    } 
    else { 
        outStr = null; 
        alert(inTbl + " null!"); 
    } 
    return outStr; 

function getExcelFileName(title) { 
    var d = new Date(); 
    var curYear = d.getYear(); 
    var curMonth = "" + (d.getMonth() + 1); 
    var curDate = "" + d.getDate(); 
    var curHour = "" + d.getHours(); 
    var curMinute = "" + d.getMinutes(); 
    var curSecond = "" + d.getSeconds(); 
    if (curMonth.length == 1) { 
        curMonth = "0" + curMonth; 
    } 
    if (curDate.length == 1) { 
        curDate = "0" + curDate; 
    } 
    if (curHour.length == 1) { 
        curHour = "0" + curHour; 
    } 
    if (curMinute.length == 1) { 
        curMinute = "0" + curMinute; 
    } 
    if (curSecond.length == 1) { 
        curSecond = "0" + curSecond; 
    } 
    var fileName = title + "_" + curYear + curMonth + curDate + "_" 
            + curHour + curMinute + curSecond + ".csv";

return fileName; 

function doFileExport(formobj, filename, content) { 
<SPAN style="WHITE-SPACE: pre"> </SPAN>formobj.html("<input id='filename' name='filename' type='text' style='display: none'><input id='content' name='content' type='text' style='display: none'>"); 
    $("#filename").val(filename); 
    $("#content").val(content); 
    formobj.submit(); 
}

接着是页面调用的javascript:


代码如下:

<form id="download_form" method="post"  target="_blank" action="downLoadTableDataAction">

代码如下:

<div id="table_container"> 
<SPAN style="WHITE-SPACE: pre"> </SPAN><table id="keyword_detail"></table> 
<SPAN style="WHITE-SPACE: pre"> </SPAN><div id="footer"></div> 
</div>

代码如下:

//下载  
$('#download_file').click(function() { 
    getXlsFromTbl('keyword_detail', 'table_container' ,'download_form', '关键词详细数据', true) 
});

(0)

相关推荐

  • 通过点击jqgrid表格弹出需要的表格数据

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及删除资料等功能. 自定义的工具列 预设的Navigator工具列,可以很容易的使用新增.删除.编辑.检视及搜寻等功能. 完整的分页功能 按下任一栏位的标头,皆可以该栏位为排序项目.无论是升序或降序皆可. 预设的action formatter,可以快速而直觉地对每笔资料做运算. 支持多种数据格式.比如json.xm

  • Jqgrid表格随窗口大小改变而改变的简单实例

    使用jquery插件,主要实现当窗口发生改变时jqgird表格也随着改变大小 html:<div id="liste">  <table id="list" class="scroll" cellpadding='0' cellspacing='0' ></table>     <div id="pager" class="scroll" style="t

  • jqGrid jQuery 表格插件测试代码

    官方Demo地址:http://www.trirand.com/blog/jqgrid/jqgrid.html 效果图: 页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • Jqgrid之强大的表格插件应用

    jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合. jqGrid特性: 基于jquery UI主题,开发者可以根据客户要求更换不同的主题. 兼容目前所有流行的web浏览器. Ajax分页,可以控制每页显示的记录数. 支持XML,JSON,数组形式的数据源. 提供丰富的选项配置及方法事件接口. 支持表格排序,支持拖动列.隐藏列. 支持滚动加载数

  • jQuery中jqGrid分页实现代码

    (1)页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT

  • MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

    看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁.由于其本身的"非关系"的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的"ORM"框架. 下面我们将逐步

  • jQuery插件jqGrid动态获取列和列字段的方法

    本文实例讲述了jQuery插件jqGrid动态获取列和列字段的方法.分享给大家供大家参考,具体如下: 1.问题背景 jqGrid表格插件,利用自身方法获取表格的表头和表格字段:获取列名和列字段名显示在弹窗里,用复选框进行勾选 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jqGrid动态获取列和列字段</title> <

  • jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)

    jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信. 一.要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件. 1.css <link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 2.js <script src='/Scripts/js/jquery-2.

  • jqGrid表格应用之新增与删除数据附源码下载

    jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用. 下面给大家展示了效果图,喜欢的朋友可以直接下载源码哦. 效果展示    源码下载 在上一篇文章中,我们提到过jqGrid自身有强大的单元格操作模块,但是这些模块操作起来不太适合用户的习惯,在本文中,我们使用fancybox,以及表单插件来完成jqGrid数据的添加以及删除操作. XHTML 首先需要在he

  • jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法

    一般的,一个jqGrid的基本属性有一下几个常用的. 复制代码 代码如下: $("#id").jqGrid({ url: "", datatype: "local", postData: { strJson: Data }, mtype: "post", height: 45, width: 450, rowNum: rum, //每页的记录数 pgtext: "第{0}页 共{1}页", pgbutton

随机推荐