表格使用
<h1><center>表格使用</center></h1>
<h2>表格组件基于bootstrap table组件进行封装，轻松实现数据表格。</h2>
<p>表格初始化<code>$.table.init</code>
表的各项(Table options )</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>String</td>
<td>Null</td>
<td>请求后台的URL</td>
</tr>
<tr>
<td>uniqueId</td>
<td>String</td>
<td>Null</td>
<td>指定唯一列属性 配合删除/修改使用 未指定则使用表格行首列</td>
</tr>
<tr>
<td>createUrl</td>
<td>String</td>
<td>Null</td>
<td>新增URL 配合使用 $.operate.add()，$.operate.addTab()</td>
</tr>
<tr>
<td>updateUrl</td>
<td>String</td>
<td>Null</td>
<td>修改URL 配合使用 $.operate.edit()，$.operate.editTab()</td>
</tr>
<tr>
<td>removeUrl</td>
<td>String</td>
<td>Null</td>
<td>删除URL 配合使用 $.operate.remove()</td>
</tr>
<tr>
<td>exportUrl</td>
<td>String</td>
<td>Null</td>
<td>导出URL 配合使用 $.table.exportExcel()</td>
</tr>
<tr>
<td>importUrl</td>
<td>String</td>
<td>Null</td>
<td>导入URL 配合使用 $.table.importExcel()</td>
</tr>
<tr>
<td>detailUrl</td>
<td>String</td>
<td>Null</td>
<td>详细URL 配合使用 $.operate.detail()</td>
</tr>
<tr>
<td>cleanUrl</td>
<td>String</td>
<td>Null</td>
<td>清空URL 配合使用 $.operate.clean()</td>
</tr>
<tr>
<td>importTemplateUrl</td>
<td>String</td>
<td>Null</td>
<td>模板URL 配合使用 $.table.importTemplate()</td>
</tr>
<tr>
<td>height</td>
<td>String</td>
<td>undefined</td>
<td>表格的高度</td>
</tr>
<tr>
<td>striped</td>
<td>String</td>
<td>FALSE</td>
<td>是否显示行间隔色</td>
</tr>
<tr>
<td>sortName</td>
<td>String</td>
<td>Null</td>
<td>排序列名称</td>
</tr>
<tr>
<td>sortOrder</td>
<td>String</td>
<td>Null</td>
<td>排序方式 asc 或者 desc</td>
</tr>
<tr>
<td>pagination</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true表格的底部工具栏会显示分页条，设为false不显示</td>
</tr>
<tr>
<td>paginationLoop</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为true不启用分页条无限循环的功能</td>
</tr>
<tr>
<td>pageSize</td>
<td>int</td>
<td>10</td>
<td>每页的记录行数（*）</td>
</tr>
<tr>
<td>pageList</td>
<td>Array</td>
<td>[10, 25, 50]</td>
<td>可供选择的每页的行数</td>
</tr>
<tr>
<td>id</td>
<td>String</td>
<td>bootstrap-table</td>
<td>表格ID属性</td>
</tr>
<tr>
<td>toolbar</td>
<td>String</td>
<td>toolbar</td>
<td>表格工具栏ID属性</td>
</tr>
<tr>
<td>escape</td>
<td>Boolean</td>
<td>FALSE</td>
<td>是否转义HTML字符串</td>
</tr>
<tr>
<td>firstLoad</td>
<td>Boolean</td>
<td>TRUE</td>
<td>是否首次请求加载数据，对于数据较大可以配置false</td>
</tr>
<tr>
<td>showFooter</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false隐藏表尾，设为true显示</td>
</tr>
<tr>
<td>sidePagination</td>
<td>String</td>
<td>server</td>
<td>server启用服务端分页client客户端分页</td>
</tr>
<tr>
<td>search</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示搜索框功能，设为false隐藏</td>
</tr>
<tr>
<td>searchText</td>
<td>String</td>
<td>''</td>
<td>搜索框初始显示的内容，需要启用search设为true</td>
</tr>
<tr>
<td>showSearch</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示检索信息，设为false隐藏</td>
</tr>
<tr>
<td>showPageGo</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false不显示跳转页，设为true显示</td>
</tr>
<tr>
<td>showRefresh</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示刷新按钮，设为false隐藏</td>
</tr>
<tr>
<td>showColumns</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示某列下拉菜单，设为false隐藏</td>
</tr>
<tr>
<td>showToggle</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示视图切换按钮，设为false隐藏</td>
</tr>
<tr>
<td>showExport</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示导出文件按钮，设为false隐藏</td>
</tr>
<tr>
<td>showHeader</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示表头，设为false隐藏</td>
</tr>
<tr>
<td>showFullscreen</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false不全屏显示，设为true全屏显示</td>
</tr>
<tr>
<td>clickToSelect</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false不启用点击选中行，设为true启用</td>
</tr>
<tr>
<td>singleSelect</td>
<td>Boolean</td>
<td>FALSE</td>
<td>是否单选checkbox</td>
</tr>
<tr>
<td>mobileResponsive</td>
<td>Boolean</td>
<td>TRUE</td>
<td>是否支持移动端适配</td>
</tr>
<tr>
<td>cardView</td>
<td>Boolean</td>
<td>FALSE</td>
<td>是否启用显示卡片视图</td>
</tr>
<tr>
<td>detailView</td>
<td>Boolean</td>
<td>FALSE</td>
<td>是否启用显示细节视图</td>
</tr>
<tr>
<td>onClickRow</td>
<td>Function</td>
<td>onClickRow(row, $element)</td>
<td>点击某行触发的事件</td>
</tr>
<tr>
<td>onDblClickRow</td>
<td>Function</td>
<td>onDblClickRow(row, $element)</td>
<td>双击某行触发的事件</td>
</tr>
<tr>
<td>onClickCell</td>
<td>Function</td>
<td>onClickCell(field, value, row, $element)</td>
<td>单击某格触发的事件</td>
</tr>
<tr>
<td>onDblClickCell</td>
<td>Boolean</td>
<td>onDblClickCell(field, value, row, $element)</td>
<td>双击某格触发的事件</td>
</tr>
<tr>
<td>onEditableSave</td>
<td>Boolean</td>
<td>onEditableSave(field, row, oldValue, $el)</td>
<td>行内编辑保存的事件</td>
</tr>
<tr>
<td>onExpandRow</td>
<td>Boolean</td>
<td>onExpandRow(index, row, $detail)</td>
<td>点击详细视图的事件</td>
</tr>
<tr>
<td>rememberSelected</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false不启用翻页记住前面的选择，设为true启用</td>
</tr>
<tr>
<td>fixedColumns</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false禁用冻结列，设为true启用冻结列（左侧）</td>
</tr>
<tr>
<td>fixedNumber</td>
<td>int</td>
<td>0</td>
<td>冻结列的个数，当fixedColumns设为true有效（左侧）</td>
</tr>
<tr>
<td>rightFixedColumns</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false禁用冻结列，设为true启用冻结列（右侧）</td>
</tr>
<tr>
<td>rightFixedNumber</td>
<td>int</td>
<td>0</td>
<td>冻结列的个数，当fixedColumns设为true有效（右侧）</td>
</tr>
<tr>
<td>onReorderRow</td>
<td>Function</td>
<td>onReorderRow: function (data)</td>
<td>当拖拽结束后处理函数</td>
</tr>
<tr>
<td>rowStyle</td>
<td>Function</td>
<td>rowStyle(row, index)</td>
<td>改变某行的格式，需要两个参数：row行的数据index行的索引</td>
</tr>
<tr>
<td>params</td>
<td>Array</td>
<td>Null</td>
<td>当请求数据时，你可以通过修改queryParams向服务器发送参数</td>
</tr>
<tr>
<td>columns</td>
<td>Array</td>
<td>Null</td>
<td>默认空数组，在JS里面定义 参考列的各项(Column options )</td>
</tr>
<tr>
<td>data</td>
<td>Array</td>
<td>[]</td>
<td>默认空数组，被加载的数据</td>
</tr>
<tr>
<td>responseHandler</td>
<td>object</td>
<td>responseHandler(res)</td>
<td>在加载服务器发送来的数据之前，处理数据的格式</td>
</tr>
<tr>
<td>onLoadSuccess</td>
<td>object</td>
<td>onLoadSuccess(data)</td>
<td>当所有数据被加载时触发处理函数</td>
</tr>
<tr>
<td>exportOptions</td>
<td>Array</td>
<td>[0]</td>
<td>前端导出忽略列索引如[0,5,10]</td>
</tr>
<tr>
<td>detailFormatter</td>
<td>Function</td>
<td>(index, row, element)</td>
<td>detailView设为true，启用了显示detail view。用于格式化细节视图</td>
</tr>
</tbody>
</table>
<h3>列的各项(Column options )</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>radio</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的</td>
</tr>
<tr>
<td>checkbox</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定</td>
</tr>
<tr>
<td>field</td>
<td>String</td>
<td>Null</td>
<td>是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一</td>
</tr>
<tr>
<td>title</td>
<td>String</td>
<td>Null</td>
<td>这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字</td>
</tr>
<tr>
<td>titleTooltip</td>
<td>String</td>
<td>TRUE</td>
<td>当悬浮在某控件上，出现提示 - 参考 Bootstrap 提示工具（Tooltip）插件</td>
</tr>
<tr>
<td>class</td>
<td>boolean</td>
<td>FALSE</td>
<td>表格列样式</td>
</tr>
<tr>
<td>rowspan</td>
<td>Number</td>
<td>TRUE</td>
<td>每格所占的行数</td>
</tr>
<tr>
<td>colspan</td>
<td>Number</td>
<td>TRUE</td>
<td>每格所占的列数</td>
</tr>
<tr>
<td>align</td>
<td>String</td>
<td>TRUE</td>
<td>每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中）</td>
</tr>
<tr>
<td>halign</td>
<td>String</td>
<td>TRUE</td>
<td>table header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中）</td>
</tr>
<tr>
<td>falign</td>
<td>String</td>
<td>TRUE</td>
<td>table footer（表脚，的对齐方式，有：left（靠左）、right（靠右）、center（居中）</td>
</tr>
<tr>
<td>valign</td>
<td>String</td>
<td>TRUE</td>
<td>每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）</td>
</tr>
<tr>
<td>width</td>
<td>Number</td>
<td>Null</td>
<td>每列的宽度。如果没有自定义宽度自适应</td>
</tr>
<tr>
<td>sortable</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认false就默认显示，设为true则会被排序</td>
</tr>
<tr>
<td>order</td>
<td>String</td>
<td>asc</td>
<td>默认的排序方式为"asc（升序）"，也可以设为"desc（降序）"。</td>
</tr>
<tr>
<td>visible</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示该列，设为false则隐藏该列</td>
</tr>
<tr>
<td>ignore</td>
<td>Boolean</td>
<td>FALSE</td>
<td>默认为false该列可见，设为true则不可见，列选项也消失了</td>
</tr>
<tr>
<td>cardVisible</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示该列，设为false则隐藏。</td>
</tr>
<tr>
<td>switchable</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认为true显示该列，设为false则禁用列项目的选项卡。</td>
</tr>
<tr>
<td>clickToSelect</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮）</td>
</tr>
<tr>
<td>formatter</td>
<td>Function</td>
<td>Null</td>
<td>某格的数据转换函数，需要三个参数： -value： field（字段名） -row：行的数据 -index：行的（索引）index</td>
</tr>
<tr>
<td>footerFormatter</td>
<td>Function</td>
<td>Null</td>
<td>某格的数据转换函数，需要一个参数： -data： 所有行数据的数组 函数需要返回（return）footer某格内所要显示的字符串的格式</td>
</tr>
<tr>
<td>events</td>
<td>Object</td>
<td>Null</td>
<td>当某格使用formatter函数时，事件监听会响应，需要四个参数： -event：-value：字段名 -row：行数据 -index：此行的index</td>
</tr>
<tr>
<td>sorter</td>
<td>Function</td>
<td>Null</td>
<td>自定义的排序函数，实现本地排序，需要两个参数： - a：第一个字段名 - b：第二个字段名</td>
</tr>
<tr>
<td>sortName</td>
<td>String</td>
<td>Null</td>
<td>排序列名称</td>
</tr>
<tr>
<td>cellStyle</td>
<td>Function</td>
<td>Null</td>
<td>对某列中显示样式改变</td>
</tr>
<tr>
<td>searchable</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认true，表示此列数据可被查询</td>
</tr>
<tr>
<td>searchFormatter</td>
<td>Boolean</td>
<td>TRUE</td>
<td>默认true，可使用格式化的数据查询</td>
</tr>
<tr>
<td>escape</td>
<td>Boolean</td>
<td>FALSE</td>
<td>是否转义HTML字符串</td>
</tr>
</tbody>
</table>