我有一个带有水平和垂直滚动的表格，其中标题是固定的。由于使用了固定标题，因此生成了标题的克隆体，因此调整大小无法在上面工作。我还需要调整表格列的大小。请帮忙...
以下是代码：http://jsfiddle.net/manishan/Hx7ak/
以下是代码：http://jsfiddle.net/manishan/Hx7ak/
6个回答
5
我没有看到有人提到DataTables.net插件，它有一些适用于这些情况的附加组件。它是完全可定制和可扩展的。
由于某种原因，我的jsfiddle向我显示了无法调试的错误，但在这里尝试使用xammp后，它完美地呈现了分页、列排序和固定标题示例.. 如您所见，初始化代码非常简短，但您可能需要下载代码库以获得图片。我基本上采取了您提供的代码元素并安排它们应用于DataTables.net jQuery插件。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
TEST DataTables.net plugin - Fixed Header example
</title>
<script src='jquery182.js' ></script>
<script src='jquery.dataTables.js' ></script>
<script src='FixedHeader.js' ></script>
<link rel='stylesheet' href='demo_table.css'/>
<link rel='stylesheet' href='demo_page.css'/>
</head>
<body>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display data_Table" >
<thead>
<tr>
<th style='width:47px; height:29px' >
<input name="chkSelectAll" type="checkbox" value="" id="chkSelectAll"/></th>
<th style='width:159px;font-weight:bold'>Computer <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Group <span class="actdiv"> </span></th>
<th style='width:97px;font-weight:bold'>Policy <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Domain <span class="actdiv"> </span></th>
<th style='width:126px;font-weight:bold'>Address<span class="actdiv"> </span></th>
<th style='width:127px;font-weight:bold'>Type <span class="actdiv"> </span></th>
<th style='width:109px;font-weight:bold'>Status <span class="actdiv"> </span></th>
<th style='width:181px;font-weight:bold'>Test Status <span class="actdiv"> </span></th>
<th style='width:165px;font-weight:bold'>Version <span class="actdiv"> </span></th>
<th style='width:131px;font-weight:bold'>Date <span class="actdiv"> </span></th>
<th style='width:160px;font-weight:bold'>Last Date <span class="actdiv"> </span></th>
<th style='width:173px;font-weight:bold'>Count </th>
</tr>
</thead>
<tbody>
<tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr> </tbody>
</table>
</div>
<script>
jQuery(document).ready(function($){
var oTable = $('.data_Table').dataTable( {
// "sDom": 'RC<"clear">lfrtip'
//options: we are using
"sDom": 'Rlfrtip',
"sScrollY": "200px",
"bPaginate": true //Disable pagination false
} );
});
</script>
</body>
</html>
从JSFIDDLE链接包含JS和CSS
- JSFiddle链接： [http://jsfiddle.net/Hx7ak/60/][1]
如果您获取HTML部分在jsfiddle中的源代码，并从该jsfiddle链接下载依赖项（Javascript和CSS文件）并将此HTML放置在同一目录中，它应该可以让您很快入手。
虽然，取决于你想选择哪些选项来使用这个jQuery插件，但请记住它有一个非常活跃的社区和支持，在论坛上开发人员应该是专家。
更多信息请参阅DataTables.net示例部分。
根据您如何使用此插件呈现数据的方式，可以帮助您的有趣链接是：
FixedHeader
http://www.datatables.net/release-datatables/extras/FixedHeader/two_tables.html
http://www.datatables.net/release-datatables/extras/FixedHeader/index.html
http://www.datatables.net/release-datatables/extras/FixedHeader/html_table.html
ColReorder
http://www.datatables.net/release-datatables/extras/ColReorder/scrolling.html
http://www.datatables.net/release-datatables/extras/ColReorder/fixedheader.html
http://www.datatables.net/release-datatables/extras/ColReorder/fixedcolumns.html
Colvis（看起来很有趣）
FixedColumns
如您所见，http://www.datatables.net/examples/ 上的示例列表相当长，但希望这能帮到您！
使用此jQuery插件的预期结果
- Jean G.T
4
嗨Prahalad，很抱歉我不太理解你的陈述。在我提到的特定插件中有许多选项...实际上，我自己在更新一些客户软件的专有过程中使用了它，并且已经证明可以适用于任何客户端尝试考虑的情况..我的意思是，它得到了社区的充分支持，上次我检查时，Alan（DataTables.net插件作者）非常乐于回答您可能有的任何问题..话虽如此，请在http://datatables.net上查看它 - Jean G.T
2我希望能够像在 Excel 中那样使用鼠标调整表格列的大小！ - Prahalad Gaggar
Prahalad，关于DataTables插件，我需要进一步了解一下，虽然我不确定你所寻找的是否是默认功能，但它可能存在于某个地方..请考虑到Excel是一个程序，而DataTables可能有一个重新绘制列的选项，这可能需要在每次交互中添加某种侦听器..我不确定，因为我还没有尝试过，但我会尝试并让你知道.. :) - Jean G.T
@Luv，我并不认为您所询问的功能已经存在，但我可能错了。从DataTables网站上看，有一个自定义搜索..我确实看到了许多有趣的插件和附加组件，但我从未需要将表格产品编辑为可编辑列，我相信这值得在回复中输入这些评论。 - Jean G.T
4
与表格或基于表格的内容一起使用的有用jQuery插件（包括可调整大小的列和固定标头）
jQuery DataTables表格插件（请参见Jean Paul的答案;)）
2015年10月28日：由于一个链接不可用，因此已进行编辑以备将来参考。
- palaѕн
2
编辑：如果需要可调整大小的列和固定标题，请尝试使用此插件http://www.tablefixedheader.com/fullpagedemo/，它可以让您调整标题以及列。
我最近为固定表头列编写了一个插件。这主要是为了解决滚动表格的问题，在滚动时，表头和列会消失在视野之外。
请在Git上查看插件演示页面：http://meetselva.github.com/fixed-table-rows-cols/
以及您的HTML的完整页面演示：http://jsfiddle.net/ryB2n/4/embedded/result/
演示：http://jsfiddle.net/ryB2n/4/
此外，此插件支持固定列，可以使用fixedCols选项进行配置。请注意，这只是一个可选配置，因此没有该选项将呈现固定表头表格。
注意：我仍在完善该插件以处理异常情况和其他功能，因此请谨慎使用。
- Selvakumar Arumugam
1
1谢谢提供信息，但是如果您仔细看问题，主要部分是“我还需要调整表格列的大小。”我猜测您的插件不支持调整大小，或者我漏掉了什么？ - Gautam
0
@Luv / 不确定我是否完全理解了你在问题中提到的excel.exe与使用鼠标拖动调整大小的情况的参考，但我会尝试回答一下我在使用DataTables时所遇到的问题以及在浏览他们的网站（http://www.datatables.net）时的一些阅读和考虑。
有一个非常酷的插件（我自己还没有尝试过），它允许您执行CRUD（编程的创建-读取-更新-删除周期..如果您正在使用某些本地存储或基于DB的方法来保存应用程序数据）。此外，我无法猜测您最终的功能是什么，这里有一些需要考虑的想法：
DataTables的付费插件（Editor插件）
http://editor.datatables.net/release/DataTables/extras/Editor/examples/events_keySubmit.html
许可证费用大约15美元，如果我没记错的话，但它内置了一堆准备好的CRUD开发API，看起来非常酷。我认为它使用某种面向事件触发的facebox模态窗口打开。值得一试！
如果您想要在DataTable中进行内联编辑，我认为有一个插件可以实现。
http://datatables.net/release-datatables/examples/api/editable.html
据我所知，Allan Jardine创建的dataTables得到了社区的大力支持。如果您计划使用它进行开发，我建议您成为他们论坛的常客，或向Allan提问，以确定您正在寻找的所需功能是否已经在当前稳定版本中开发出来。
另一方面，如果您想要像jQuery UI resizable方法那样编辑列宽度，我认为您需要挂钩重绘函数，并编写类似于以下示例的自定义扩展：
http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html
另外，您可能会对查看以下内容感兴趣：(http://jqueryui.com/resizable/)，以了解更多关于如何使用一些链接事件编程原型重新设计fnReDraw列（当我们使用DaTatables的排序或过滤选项时非常有用）的信息。
我还没有尝试过这个方法，但作为最后的手段它可能有效...祝编码愉快 ;)
- Jean G.T
-1
只需使用以下代码行，即可正常工作。
$(window).on('resize', function () { $('.fixedHeader').remove(); new $.fn.dataTable.FixedHeader(table); });
- Srinivasu Velagapudi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接