访问Java Servlet中的JavaScript表DOM

I want to write reusable code that takes an HTML table from a JSP and converts it to Excel format to be exported to the user. I want to take advantage of the HTML DOM Table Object rather than parse the HTML in Java to extract the same information. The biggest advantage to this would be inspecting each cell for checkboxes, buttons, etc. so as to remove them before writing the cells to Excel. In my mind the setup would go something like this:

我想编写可重用的代码,该代码从JSP获取HTML表并将其转换为Excel格式以导出到用户。我想利用HTML DOM表对象,而不是用Java解析HTML来提取相同的信息。这样做的最大好处是检查每个单元格的复选框,按钮等,以便在将单元格写入Excel之前将其删除。在我看来,设置将是这样的:

HTML Table:

<a href="javascript: export();">Export to Excel</a>
<table id="exportTable">
  ...
</table>

JavaScript:

function export() {
  var table = document.getElementById("exportTable");
  // Send table object to Servlet somehow
}

The JavaScript would go in some sort of common.js so that the concept could be used on any table in any page of the site.

JavaScript将使用某种common.js,以便可以在站点的任何页面中的任何表上使用该概念。

** UPDATE **

**更新**

JSPs will be using Java objects to generate the table, but the table itself will be different every time. I'm looking for a generic solution whereby I can get the Table's DOM structure, thereby utilizing the table.rows and table.cells that is already done, inspect each cell to remove tags I don't want in the Excel (such as buttons, checkboxes, etc), and write that out to the user with the response type set to excel. Does that make more sense?

JSP将使用Java对象来生成表,但表本身每次都会有所不同。我正在寻找一个通用的解决方案,我可以获得Table的DOM结构,从而利用已经完成的table.rows和table.cells,检查每个单元格以删除我不想在Excel中使用的标签(例如按钮) ,复选框等),并将响应类型设置为excel的用户写出来。那更有意义吗?

2 个解决方案

#1

I'd serialize the data from the cells into a simple JSON object, then use one of the many JSON libraries available on the Java-side to convert it back into a usable object.

我将数据从单元格序列化为一个简单的JSON对象,然后使用Java端可用的许多JSON库之一将其转换回可用对象。

Something like this:

像这样的东西:

function processTable(tableId) {
    var jsonTable = [];
    var tableObj = document.getElementById(tableId);
    if (tableObj) {
        for (var x=0, y=tableObj.rows.length; x < y; x++) {
            var tableRow = tableObj.rows[x];
            var jsonRow = [];
            for (var i=0, j=tableRow.cells.length; i < j; i++) {
                var tableCell = tableRow.cells[i];
                // removes any line feeds or tabs
                jsonRow.push(tableCell.innerHTML.replace(/\t|\n/g, ""));
            }
            jsonTable.push(jsonRow)
        }
    }
    return JSON.stringify(jsonTable);
}

This uses the Public Domain JSON.stringify() routine, available directly here.

这使用Public Domain JSON.stringify()例程,可在此处直接使用。

You can now take this string, pass it to a server, and re-hydrate the object in Java-land. You'll get a multidimensional array of values corresponding directly to the contents of the table.

您现在可以获取此字符串,将其传递给服务器,并在Java-land中重新保持对象。您将获得一个直接对应于表内容的多维值数组。

NOTE: This retrieves the entire table. If you just want to get the table's body, you'll have to modify the above code to iterate over the tBodies, like this:

注意:这将检索整个表。如果你只想获得表格的主体,你将不得不修改上面的代码来迭代tBodies,如下所示:

function processTable(tableId) {
    var jsonTable = [];
    var tableObj = document.getElementById(tableId);
    if (tableObj) {
        for (var a=0, b=tableObj.tBodies.length; a < b; a++) {
            var tBody = tableObj.tBodies[a];
            for (var x=0, y=tBody.rows.length; x < y; x++) {
                var tableRow = tableObj.rows[x];
                var jsonRow = [];
                for (var i=0, j=tableRow.cells.length; i < j; i++) {
                    var tableCell = tableRow.cells[i];
                    // removes any line feeds or tabs
                    jsonRow.push(tableCell.innerHTML.replace(/\t|\n/g, ""));
                }
                jsonTable.push(jsonRow)
            }
        }
    }
    return JSON.stringify(jsonTable);
}

2 个解决方案

#1

更多相关文章

随机推荐