p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
amis/gh-pages/docs/renderers/Table_3e512fa.js

59 lines
26 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

define('docs/renderers/Table.md', function(require, exports, module) {
module.exports = {
"html": "<h2><a class=\"anchor\" name=\"table\" href=\"#table\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Table</h2><p>表格展示，不负责拉取数据，所以你需要配置 source 用来关联数据，一般需要搭配其他具备获取接口数据能力的渲染器一起使用，比如: Page 的 initApi 或者 Service 的 api。有了数据后，配置 columns 就能完成渲染了。</p>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td><code>string</code></td>\n<td></td>\n<td><code>&quot;type&quot;</code> 指定为 table 渲染器</td>\n</tr>\n<tr>\n<td>title</td>\n<td><code>string</code></td>\n<td></td>\n<td>标题</td>\n</tr>\n<tr>\n<td>source</td>\n<td><code>string</code></td>\n<td><code>${items}</code></td>\n<td>数据源, 绑定当前环境变量</td>\n</tr>\n<tr>\n<td>affixHeader</td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td>是否固定表头</td>\n</tr>\n<tr>\n<td>columnsTogglable</td>\n<td><code>auto</code> 或者 <code>boolean</code></td>\n<td><code>auto</code></td>\n<td>展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>string</td>\n<td><code>暂无数据</code></td>\n<td>当没数据的时候的文字提示</td>\n</tr>\n<tr>\n<td>className</td>\n<td><code>string</code></td>\n<td><code>panel-default</code></td>\n<td>外层 CSS 类名</td>\n</tr>\n<tr>\n<td>tableClassName</td>\n<td><code>string</code></td>\n<td><code>table-db table-striped</code></td>\n<td>表格 CSS 类名</td>\n</tr>\n<tr>\n<td>headerClassName</td>\n<td><code>string</code></td>\n<td><code>Action.md-table-header</code></td>\n<td>顶部外层 CSS 类名</td>\n</tr>\n<tr>\n<td>footerClassName</td>\n<td><code>string</code></td>\n<td><code>Action.md-table-footer</code></td>\n<td>底部外层 CSS 类名</td>\n</tr>\n<tr>\n<td>toolbarClassName</td>\n<td><code>string</code></td>\n<td><code>Action.md-table-toolbar</code></td>\n<td>工具栏 CSS 类名</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>Array of <a href=\"/amis/docs/renderers/Column\">Column</a></td>\n<td></td>\n<td>用来设置列信息</td>\n</tr>\n<tr>\n<td>combineNum</td>\n<td><code>number</code></td>\n<td></td>\n<td>自动合并单元格</td>\n</tr>\n</tbody>\n</table>\n<div class=\"amis-preview\" style=\"height: 900px\"><script type=\"text/schema\" height=\"900\" scope=\"body\">{\n \"type\": \"service\",\n \"api\": \"https://houtai.baidu.com/api/sample?perPage=5\",\n \"body\": [\n {\n \"type\": \"table\",\n \"title\": \"表格1\",\n \"source\": \"$rows\",\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Engine\"\n },\n\n {\n \"name\": \"version\",\n \"label\": \"Version\"\n }\n ]\n },\n\n {\n \"type\": \"table\",\n \"source\": \"$rows\",\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Engine\"\n },\n\n {\n \"name\": \"version\",\n \"label\": \"Version\"\n }\n ]\n }\n ]\n}\n</script></div>\n<h3><a class=\"anchor\" name=\"%E5%88%97%E5%BC%80%E5%85%B3\" href=\"#%E5%88%97%E5%BC%80%E5%85%B3\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>列开关</h3><p>默认 <code>columnsTogglable</code> 配置为 <code>auto</code>，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 <code>true</code> 或者 <code>false</code> 来强制开或者关。在列配置中可以通过配置 <code>toggled</code> 为 <code>false</code> 默认不展示这列，比如下面这个栗子中 ID 这一栏。</p>\n<div class=\"amis-preview\" style=\"height: 530px\"><script type=\"text/schema\" height=\"530\" scope=\"body\">{\n \"type\": \"service\",\n \"api\": \"https://houtai.baidu.com/api/sample?perPage=5\",\n \"body\": [\n {\n \"type\": \"table\",\n \"source\": \"$rows\",\n \"className\": \"m-b-none\",\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Engine\"\n },\n\n {\n \"name\": \"grade\",\n \"label\": \"Grade\"\n },\n\n {\n \"name\": \"version\",\n \"label\": \"Version\"\n },\n\n {\n \"name\": \"browser\",\n \"label\": \"Browser\"\n },\n\n {\n \"name\": \"id\",\n \"label\": \"ID\",\n \"toggled\": false\n },\n\n {\n \"name\": \"platform\",\n \"label\": \"Platform\"\n }\n ]\n }\n ]\n}\n</script></div>\n<h3><a class=\"anchor\" name=\"%E5%B5%8C%E5%A5%97\" href=\"#%E5%B5%8C%E5%A5%97\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>嵌套</h3><p>当行数据中存在 children 属性时，可以自动嵌套显示下去。示例：<a href=\"https://baidu.github.io/amis/crud/nested?page=1\">https://baidu.github.io/amis/crud/nested?page=1</a></p>\n<div class=\"amis-preview\" style=\"height: 600px\"><script type=\"text/schema\" height=\"600\" scope=\"body\">{\n \"type\": \"service\",\n \"data\": {\n \"rows\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"X\",\n \"id\": 1,\n \"children\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"X\",\n \"id\": 1001\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"5\",\n \"grade\": \"C\",\n \"id\": 1002\n }\n ]\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"5\",\n \"grade\": \"C\",\n \"id\": 2,\n \"children\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"X\",\n \"id\": 2001\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"5\",\n \"grade\": \"C\",\n \"id\": 2002\n }\n ]\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.5\",\n \"platform\": \"Win 95+\",\n \"version\": \"5.5\",\n \"grade\": \"A\",\n \"id\": 3,\n \"children\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"X\",\n \"id\": 3001\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"5\",\n \"grade\": \"C\",\n \"id\": 3002\n }\n ]\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 6\",\n \"platform\": \"Win 98+\",\n \"version\": \"6\",\n \"grade\": \"A\",\n \"id\": 4,\n \"children\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"X\",\n \"id\": 4001\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"5\",\n \"grade\": \"C\",\n \"id\": 4002\n }\n ]\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 7\",\n \"platform\": \"Win XP SP2+\",\n \"version\": \"7\",\n \"grade\": \"A\",\n \"id\": 5,\n \"children\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"X\",\n \"id\": 5001\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"5\",\n \"grade\": \"C\",\n \"id\": 5002\n }\n ]\n }\n ]\n },\n \"body\": [\n {\n \"type\": \"table\",\n \"source\": \"$rows\",\n \"className\": \"m-b-none\",\n \"columnsTogglable\": false,\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Engine\"\n },\n\n {\n \"name\": \"grade\",\n \"label\": \"Grade\"\n },\n\n {\n \"name\": \"version\",\n \"label\": \"Version\"\n },\n\n {\n \"name\": \"browser\",\n \"label\": \"Browser\"\n },\n\n {\n \"name\": \"id\",\n \"label\": \"ID\"\n },\n\n {\n \"name\": \"platform\",\n \"label\": \"Platform\"\n }\n ]\n }\n ]\n}\n</script></div>\n<h3><a class=\"anchor\" name=\"%E5%BA%95%E9%83%A8%E5%B1%95%E7%A4%BA-footable-\" href=\"#%E5%BA%95%E9%83%A8%E5%B1%95%E7%A4%BA-footable-\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>底部展示 (Footable)</h3><p>列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 <code>footable</code> 属性，同时将想在底部展示的列加个 <code>breakpoint</code> 属性为 <code>*</code> 即可。</p>\n<p>示例：<a href=\"https://baidu.github.io/amis/crud/footable?page=1\">https://baidu.github.io/amis/crud/footable?page=1</a></p>\n<div class=\"amis-preview\" style=\"height: 600px\"><script type=\"text/schema\" height=\"600\" scope=\"body\">{\n \"type\": \"service\",\n \"api\": \"https://houtai.baidu.com/api/sample?perPage=5\",\n \"body\": [\n {\n \"type\": \"table\",\n \"source\": \"$rows\",\n \"className\": \"m-b-none\",\n \"columnsTogglable\": false,\n \"footable\": true,\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Engine\"\n },\n\n {\n \"name\": \"grade\",\n \"label\": \"Grade\"\n },\n\n {\n \"name\": \"version\",\n \"label\": \"Version\",\n \"breakpoint\": \"*\"\n },\n\n {\n \"name\": \"browser\",\n \"label\": \"Browser\",\n \"breakpoint\": \"*\"\n },\n\n {\n \"name\": \"id\",\n \"label\": \"ID\",\n \"breakpoint\": \"*\"\n },\n\n {\n \"name\": \"platform\",\n \"label\": \"Platform\",\n \"breakpoint\": \"*\"\n }\n ]\n }\n ]\n}\n</script></div>\n<p>默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。</p>\n<pre><code class=\"lang-json\">{\n <span class=\"hljs-attr\">\"footable\"</span>: {\n <span class=\"hljs-attr\">\"expand\"</span>: <span class=\"hljs-string\">\"first\"</span>\n }\n}\n</code></pre>\n<p>当配置成 <code>all</code> 时表示全部展开。</p>\n<h3><a class=\"anchor\" name=\"%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC\" href=\"#%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>合并单元格</h3><p>只需要配置 <code>combineNum</code> 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。</p>\n<p>示例：<a href=\"https://baidu.github.io/amis/crud/merge-cell\">https://baidu.github.io/amis/crud/merge-cell</a></p>\n<div class=\"amis-preview\" style=\"height: 700px\"><script type=\"text/schema\" height=\"700\" scope=\"body\">{\n \"type\": \"service\",\n \"data\": {\n \"rows\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.2\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"A\"\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.2\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"B\"\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"AOL browser (AOL desktop)\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"C\"\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"AOL browser (AOL desktop)\",\n \"platform\": \"Win 98\",\n \"version\": \"3\",\n \"grade\": \"A\"\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"AOL browser (AOL desktop)\",\n \"platform\": \"Win 98\",\n \"version\": \"4\",\n \"grade\": \"A\"\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 1.0\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"4\",\n \"grade\": \"A\"\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 1.0\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"5\",\n \"grade\": \"A\"\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 2.0\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"5\",\n \"grade\": \"B\"\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 2.0\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"5\",\n \"grade\": \"C\"\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 2.0\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"5\",\n \"grade\": \"D\"\n }\n ]\n },\n \"body\": [\n {\n \"type\": \"table\",\n \"source\": \"$rows\",\n \"className\": \"m-b-none\",\n \"combineNum\": 3,\n \"columnsTogglable\": false,\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Rendering engine\"\n },\n {\n \"name\": \"browser\",\n \"label\": \"Browser\"\n },\n {\n \"name\": \"platform\",\n \"label\": \"Platform(s)\"\n },\n {\n \"name\": \"version\",\n \"label\": \"Engine version\"\n },\n {\n \"name\": \"grade\",\n \"label\": \"CSS grade\"\n }\n ]\n }\n ]\n}\n</script></div>\n<h3><a class=\"anchor\" name=\"%E8%B6%85%E7%BA%A7%E8%A1%A8%E5%A4%B4\" href=\"#%E8%B6%85%E7%BA%A7%E8%A1%A8%E5%A4%B4\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>超级表头</h3><p>超级表头意思是，表头还可以再一次进行分组。额外添加个 <code>groupName</code> 属性即可。</p>\n<p>示例：<a href=\"https://baidu.github.io/amis/crud/header-group\">https://baidu.github.io/amis/crud/header-group</a></p>\n<div class=\"amis-preview\" style=\"height: 630px\"><script type=\"text/schema\" height=\"630\" scope=\"body\">{\n \"type\": \"service\",\n \"api\": \"https://houtai.baidu.com/api/sample?perPage=5\",\n \"body\": [\n {\n \"type\": \"table\",\n \"source\": \"$rows\",\n \"className\": \"m-b-none\",\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Engine\",\n \"groupName\": \"分组1\"\n },\n\n {\n \"name\": \"grade\",\n \"label\": \"Grade\",\n \"groupName\": \"分组1\"\n },\n\n {\n \"name\": \"version\",\n \"label\": \"Version\",\n \"groupName\": \"分组2\"\n },\n\n {\n \"name\": \"browser\",\n \"label\": \"Browser\",\n \"groupName\": \"分组2\"\n },\n\n {\n \"name\": \"id\",\n \"label\": \"ID\",\n \"toggled\": false,\n \"groupName\": \"分组2\"\n },\n\n {\n \"name\": \"platform\",\n \"label\": \"Platform\",\n \"groupName\": \"分组2\"\n }\n ]\n }\n ]\n}\n</script></div>\n<h3><a class=\"anchor\" name=\"%E5%9B%BA%E5%AE%9A%E5%88%97\" href=\"#%E5%9B%BA%E5%AE%9A%E5%88%97\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>固定列</h3><p>列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 <code>fixed</code> 属性，配置 <code>left</code> 或者 <code>right</code>。</p>\n<p>示例：<a href=\"https://baidu.github.io/amis/crud/fixed\">https://baidu.github.io/amis/crud/fixed</a></p>\n<div class=\"amis-preview\" style=\"height: 730px\"><script type=\"text/schema\" height=\"730\" scope=\"body\">{\n \"type\": \"service\",\n \"api\": \"https://houtai.baidu.com/api/sample?perPage=5\",\n \"className\": \"w-xxl\",\n \"body\": [\n {\n \"type\": \"table\",\n \"source\": \"$rows\",\n \"className\": \"m-b-none\",\n \"columnsTogglable\": false,\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"Engine\",\n \"fixed\": \"left\"\n },\n\n {\n \"name\": \"grade\",\n \"label\": \"Grade\"\n },\n\n {\n \"name\": \"version\",\n \"label\": \"Version\"\n },\n\n {\n \"name\": \"browser\",\n \"label\": \"Browser\"\n },\n\n {\n \"name\": \"id\",\n \"label\": \"ID\"\n },\n\n {\n \"name\": \"platform\",\n \"label\": \"Platform\",\n \"fixed\": \"right\"\n }\n ]\n }\n ]\n}\n</script></div>\n\n\n<div class=\"m-t-lg b-l b-info b-3x wrapper bg-light dk\">文档内容有误？欢迎大家一起来编写，文档地址：<i class=\"fa fa-github\"></i><a href=\"https://github.com/baidu/amis/tree/master/docs/renderers/Table.md\">/docs/renderers/Table.md</a>。</div>",
"toc": {
"label": "目录",
"type": "toc",
"children": [
{
"label": "Table",
"fragment": "table",
"fullPath": "#table",
"level": 2,
"children": [
{
"label": "列开关",
"fragment": "%E5%88%97%E5%BC%80%E5%85%B3",
"fullPath": "#%E5%88%97%E5%BC%80%E5%85%B3",
"level": 3
},
{
"label": "嵌套",
"fragment": "%E5%B5%8C%E5%A5%97",
"fullPath": "#%E5%B5%8C%E5%A5%97",
"level": 3
},
{
"label": "底部展示 (Footable)",
"fragment": "%E5%BA%95%E9%83%A8%E5%B1%95%E7%A4%BA-footable-",
"fullPath": "#%E5%BA%95%E9%83%A8%E5%B1%95%E7%A4%BA-footable-",
"level": 3
},
{
"label": "合并单元格",
"fragment": "%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC",
"fullPath": "#%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC",
"level": 3
},
{
"label": "超级表头",
"fragment": "%E8%B6%85%E7%BA%A7%E8%A1%A8%E5%A4%B4",
"fullPath": "#%E8%B6%85%E7%BA%A7%E8%A1%A8%E5%A4%B4",
"level": 3
},
{
"label": "固定列",
"fragment": "%E5%9B%BA%E5%AE%9A%E5%88%97",
"fullPath": "#%E5%9B%BA%E5%AE%9A%E5%88%97",
"level": 3
}
]
}
],
"level": 0
}
};
});
Reference in New Issue View Git Blame Copy Permalink