前端手册

2024-07-14 11:25| 来源: 网络整理| 查看: 265

表格使用表格使用

表格组件基于bootstrap table组件进行封装，轻松实现数据表格。

表格初始化 $.table.init表的各项(Table options ) 参数类型默认值描述urlStringNull请求后台的URLuniqueIdStringNull指定唯一列属性配合删除/修改使用未指定则使用表格行首列createUrlStringNull新增URL 配合使用 $.operate.add()，$.operate.addTab()updateUrlStringNull修改URL 配合使用 $.operate.edit()，$.operate.editTab()removeUrlStringNull删除URL 配合使用 $.operate.remove()exportUrlStringNull导出URL 配合使用 $.table.exportExcel()importUrlStringNull导入URL 配合使用 $.table.importExcel()detailUrlStringNull详细URL 配合使用 $.operate.detail()cleanUrlStringNull清空URL 配合使用 $.operate.clean()importTemplateUrlStringNull模板URL 配合使用 $.table.importTemplate()heightStringundefined表格的高度stripedStringfalse是否显示行间隔色sortNameStringNull排序列名称sortOrderStringNull排序方式 asc 或者 descpaginationBooleantrue默认为true表格的底部工具栏会显示分页条，设为false不显示pageSizeint10每页的记录行数（*）pageListArray[10, 25, 50]可供选择的每页的行数idStringbootstrap-table表格ID属性toolbarStringtoolbar表格工具栏ID属性escapeBooleanfalse是否转义HTML字符串firstLoadBooleantrue是否首次请求加载数据，对于数据较大可以配置falseshowFooterBooleanfalse默认为false隐藏表尾，设为true显示sidePaginationStringserverserver启用服务端分页client客户端分页searchBooleantrue默认为true显示搜索框功能，设为false隐藏searchTextString''搜索框初始显示的内容，需要启用search设为trueshowSearchBooleantrue默认为true显示检索信息，设为false隐藏showPageGoBooleanfalse默认为false不显示跳转页，设为true显示showRefreshBooleantrue默认为true显示刷新按钮，设为false隐藏showColumnsBooleantrue默认为true显示某列下拉菜单，设为false隐藏showToggleBooleantrue默认为true显示视图切换按钮，设为false隐藏showExportBooleantrue默认为true显示导出文件按钮，设为false隐藏clickToSelectBooleanfalse默认为false不启用点击选中行，设为true启用detailViewBooleanfalse是否启用显示细节视图onClickRowFunctiononClickRow(row, $element)点击某行触发的事件onDblClickRowFunctiononDblClickRow(row, $element)双击某行触发的事件onClickCellFunctiononClickCell(field, value, row, $element)单击某格触发的事件onDblClickCellBooleanonDblClickCell(field, value, row, $element)双击某格触发的事件rememberSelectedBooleanfalse默认为false不启用翻页记住前面的选择，设为true启用fixedColumnsBooleanfalse默认为false禁用冻结列，设为true启用冻结列（左侧）fixedNumberint0冻结列的个数，当fixedColumns设为true有效（左侧）rightFixedColumnsBooleanfalse默认为false禁用冻结列，设为true启用冻结列（右侧）rightFixedNumberint0冻结列的个数，当fixedColumns设为true有效（右侧）onReorderRowFunctiononReorderRow: function (data)当拖拽结束后处理函数rowStyleFunctionrowStyle(row, index)改变某行的格式，需要两个参数：row行的数据index行的索引paramsArrayNull当请求数据时，你可以通过修改queryParams向服务器发送参数columnsArrayNull默认空数组，在JS里面定义参考列的各项(Column options )responseHandlerobjectresponseHandler(res)在加载服务器发送来的数据之前，处理数据的格式onLoadSuccessobjectonLoadSuccess(data)当所有数据被加载时触发处理函数exportOptionsArray[0]前端导出忽略列索引如[0,5,10]detailFormatterFunction(index, row, element)detailView设为true，启用了显示detail view。用于格式化细节视图

列的各项(Column options )

参数类型默认值描述radioBooleanfalse默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的checkboxBooleanfalse默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定fieldStringNull是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一titleStringNull这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字titleTooltipStringtrue当悬浮在某控件上，出现提示 - 参考 Bootstrap 提示工具（Tooltip）插件classbooleanfalse表格列样式rowspanNumbertrue每格所占的行数colspanNumbertrue每格所占的列数alignStringtrue每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中）halignStringtruetable header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中）falignStringtruetable footer（表脚，的对齐方式，有：left（靠左）、right（靠右）、center（居中）valignStringtrue每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）widthNumberNull每列的宽度。如果没有自定义宽度自适应sortableBooleanfalse默认false就默认显示，设为true则会被排序orderStringasc默认的排序方式为"asc（升序）"，也可以设为"desc（降序）"。visibleBooleantrue默认为true显示该列，设为false则隐藏该列cardVisibleBooleantrue默认为true显示该列，设为false则隐藏。switchableBooleantrue默认为true显示该列，设为false则禁用列项目的选项卡。clickToSelectBooleantrue默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮）formatterFunctionNull某格的数据转换函数，需要三个参数： -value： field（字段名） -row：行的数据 -index：行的（索引）indexfooterFormatterFunctionNull某格的数据转换函数，需要一个参数： -data：所有行数据的数组函数需要返回（return）footer某格内所要显示的字符串的格式eventsObjectNull当某格使用formatter函数时，事件监听会响应，需要四个参数： -event：-value：字段名 -row：行数据 -index：此行的indexsorterFunctionNull自定义的排序函数，实现本地排序，需要两个参数： - a：第一个字段名 - b：第二个字段名sortNameStringNull排序列名称cellStyleFunctionNull对某列中显示样式改变searchableBooleantrue默认true，表示此列数据可被查询searchFormatterBooleantrue默认true，可使用格式化的数据查询escapeBooleanfalse是否转义HTML字符串表单搜索 $.table.search 搜索表格数据导出 $.table.exportExcel 导出数据模板下载 $.table.importTemplate 下载模板表格数据导入 $.table.importExcel 导入是否更新已经存在的用户数据 ; 下载模板提示：仅允许导入“xls”或“xlsx”格式文件！表格销毁 $.table.destroy 销毁表格数据刷新 $.table.refresh 刷新选择表格行具体列 $.table.selectColumns var loginName = $.table.selectColumns("loginName"); 选择表格行首列 $.table.selectFirstColumns var firstColumn = $.table.selectFirstColumns(); 显示表格特定的列 $.table.showColumn $.table.showColumn("userName"); 隐藏表格特定的列 $.table.hideColumn $.table.hideColumn("userName"); 序列号生成 $.table.serialNumber { title: "序号", formatter: function (value, row, index) { return $.table.serialNumber(index); } }, 超出指定长度浮动提示（单击文本可复制） $.table.tooltip { field: 'remark', title: '备注', align: 'center', formatter: function(value, row, index) { return $.table.tooltip(value); } }, 回显数据字典 $.table.selectDictLabel var datas = [[${@dict.getType('sys_common_status')}]]; { field: 'status', title: '用户状态', align: 'center', formatter: function(value, row, index) { return $.table.selectDictLabel(datas, value); } }, 下拉按钮切换 $.table.dropdownToggle formatter: function(value, row, index) { var actions = []; actions.push('编辑'); actions.push('删除'); actions.push('添加下级部门'); return $.table.dropdownToggle(actions.join('')); } 图片预览 $.table.imageView { field: 'avatar', title: '用户头像', formatter: function(value, row, index) { return $.table.imageView(value); } },

【本文地址】

公司简介

联系我们