# 前端手册

# 前端组件

若依封装了一些常用的JS组件方法。 名称 代码 介绍 表格 $.table 表格封装处理

表格树 $.treeTable 表格树封装处理

表单 $.form 表单封装处理

弹出层 $.modal 弹出层封装处理

操作 $.operate 操作封装处理

校验 $.validate 校验封装处理

树插件 $.tree 树插件封装处理

通用方法 $.common 通用方法封装处理

# 通用方法

支持属性 方法 参数 介绍 $.table.init(); options(选项参数) 初始化表格参数

$.table.search(); formId(表单ID, 表格ID, 追加数据) 搜索-默认第一个form

$.table.exportExcel(); formId(表单ID) 导出-默认第一个form

$.table.importExcel(); formId(表单ID) 导入-默认importForm

$.table.importTemplate(); formId(表单ID) 模板下载

$.table.refresh(); 无 刷新表格

$.table.selectColumns(); column(查询列值) 查询表格指定列值

$.table.selectFirstColumns(); 无 查询表格首列值

$.table.destroy(); tableId(表格ID) 销毁表格-默认options.id

$.table.serialNumber(); index(序号) 序列号生成

$.table.dropdownToggle(); value(内容) 下拉按钮切换

$.table.imageView(); value(内容), height, width, target(打开方式) 图片预览

$.table.showColumn(); column(列值), tablbeId(表格ID) 显示表格指定列

$.table.hideColumn(); column(列值), tablbeId(表格ID) 隐藏表格指定列

$.table.showAllColumns(); tableId(表格ID) 显示所有表格列

$.table.hideAllColumns(); tableId(表格ID) 隐藏所有表格列

$.table.tooltip(); value(内容), length(截取长度) 超出指定长度浮动提示

$.table.selectDictLabel(); datas(字典列表), value(当前值) 回显数据字典

$.treeTable.init(); options(选项参数) 初始化表格树参数

$.treeTable.search(); formId(表单ID) 搜索-默认第一个form

$.treeTable.refresh(); 无 刷新表格树

$.form.reset(); formId(表单ID, 表格ID) 表单重置

$.form.selectCheckeds(); name(name名称) 获取选中复选框项

$.form.selectSelects(); name(id名称) 获取选中下拉框项

$.modal.icon type(图标类型) 显示图标

$.modal.msg content(内容), type(图标类型) 消息提示

$.modal.msgError(); content(内容) 错误消息

$.modal.msgSuccess(); content(内容) 成功消息

$.modal.msgWarning(); content(内容) 警告消息

$.modal.alert content(内容), type(图标类型) 消息提示

$.modal.msgReload msg(消息), type(图标类型) 消息提示并刷新父窗体

$.modal.alertError(); content(内容) 错误提示

$.modal.alertSuccess(); content(内容) 成功提示

$.modal.alertWarning(); content(内容) 警告提示

$.modal.close(); 无 关闭窗体

$.modal.closeAll 无 关闭全部窗体

$.modal.confirm(); content(内容), callBack(回调函数) 确认窗体

$.modal.open(); title, url, width, height, callBack(回调函数) 弹出层指定宽度

$.modal.openOptions(); options(选项参数) 弹出层指定参数选项

$.modal.openFull(); title, url, width, height 弹出层全屏

$.modal.openTab(); title(标题), url(地址) 选卡页方式打开

$.modal.parentTab(); title(标题), url(地址) 选卡页同一页签打开

$.modal.closeTab(); dataId(地址) 关闭选项卡

$.modal.disable 无 禁用按钮

$.modal.enable 无 启用按钮

$.modal.loading(); message(提示消息) 打开遮罩层

$.modal.closeLoading(); 无 关闭遮罩层

$.modal.reload(); 无 重新加载

$.operate.submit(); url, type, dataType, data, callback(回调函数) 提交数据

$.operate.post(); url(地址), data(数据), callback(回调函数) post方式请求提交数据

$.operate.get(); url(地址), callback(回调函数) get请求传输数据

$.operate.detail(); id(数据ID) 详细信息

$.operate.remove(); id(数据ID) 删除信息

$.operate.removeAll(); 无 批量删除信息

$.operate.clean(); 无 清空信息

$.operate.add(); id(数据ID) 添加信息

$.operate.addTab(); id(数据ID) 添加信息(选项卡方式)

$.operate.addFull(); id(数据ID) 添加信息 全屏

$.operate.addUrl(); id(数据ID) 添加访问地址

$.operate.edit(); id(数据ID) 修改信息

$.operate.editTab(); id(数据ID) 修改信息(选项卡方式)

$.operate.editFull(); id(数据ID) 修改信息 全屏

$.operate.editUrl(); id(数据ID) 修改访问地址

$.operate.save(); url(地址), data(数据), callback(回调函数) 保存信息

$.operate.saveModal(); url(地址), data(数据), callback(回调函数) 保存信息 弹出提示框

$.operate.saveTab(); url(地址), data(数据), callback(回调函数) 保存选项卡信息

$.operate.ajaxSuccess(); result(返回结果) 保存结果弹出msg刷新table表格

$.operate.saveSuccess(); result(返回结果) 保存结果提示msg

$.operate.successCallback(); result(返回结果) 成功回调执行事件(静默更新)

$.operate.successTabCallback(); result(返回结果) 选项卡成功回调执行事件(静默更新)

$.validate.unique(); value(返回标识) 判断返回标识是否唯一

$.validate.form(); formId(表单ID) 表单验证-默认第一个form

$.validate.reset(); formId(表单ID) 重置表单验证(清除提示信息)

$.tree.init(); options(选项参数) 初始化树结构

$.tree.searchNode(); 无 搜索节点

$.tree.selectByIdName(); treeId, treeName, node 根据Id和Name选中指定节点

$.tree.showAllNode(); nodes(全部节点数据) 显示所有节点

$.tree.hideAllNode(); nodes(全部节点数据) 隐藏所有节点

$.tree.showParent(); treeNode(节点数据) 显示所有父节点

$.tree.showChildren(); treeNode(节点数据) 显示所有孩子节点

$.tree.updateNodes(); nodeList(全部节点数据) 更新节点状态

$.tree.getCheckedNodes(); column(列值) 获取当前被勾选集合

$.tree.notAllowParents(); _tree(树对象) 不允许根父节点选择

$.tree.toggleSearch(); 无 隐藏/显示搜索栏

$.tree.collapse(); 无 树折叠

$.tree.expand(); 无 树展开

$.common.isEmpty(); value(值) 判断字符串是否为空

$.common.isNotEmpty(); value(值) 判断一个字符串是否为非空串

$.common.nullToStr(); value(值) 空对象转字符串

$.common.visible(); value(值) 是否显示数据 为空默认为显示

$.common.trim(); value(值) 空格截取

$.common.equals(); str(比较值1), that(比较值2) 比较两个字符串(大小写敏感)

$.common.equalsIgnoreCase(); str(比较值1), that(比较值2) 比较两个字符串(大小写不敏感)

$.common.split(); str(值), sep(分隔符), maxLen(最大长度) 将字符串按指定字符分割

$.common.sprintf(); str(值) 字符串格式化(%s )

$.common.dateFormat(); date(日期), format(日期格式) 日期格式化(yyyy-MM-dd HH-mm-ss)

$.common.getItemField(); item(数据), field(属性) 获取节点数据，支持多层级访问

$.common.random(); min(最小), max(最大) 指定随机数返回

$.common.startWith(); value(值), start(开始值) 判断字符串是否是以start开头

$.common.endWith(); value(值), end(结束值) 判断字符串是否是以end结尾

$.common.uniqueFn(); array(数组) 数组去重

$.common.join(); array(数组), separator(分隔符) 数组中的所有元素放入一个字符串

$.common.formToJSON(); formId(表单ID) 获取form下所有的字段并转换为json对象

$.common.dictToSelect(); datas(字典数据), value(值), name(属性名) 数据字典转下拉框

$.common.getLength(); obj(对象) 获取obj对象长度

$.common.isMobile(); 无 判断移动端

$.common.numValid(); text(值) 数字正则表达式，只能为0-9数字

$.common.enValid(); text(值) 英文正则表达式，只能为a-z和A-Z字母

$.common.enNumValid(); text(值) 英文、数字正则表达式，必须包含(字母，数字)

$.common.charValid(); text(值) 英文、数字、特殊字符正则表达式，必须包含(字母，数字，特殊字符!@#$%^&*()-=_+)

# 表格使用

表格组件基于bootstrap table组件进行封装，轻松实现数据表格。 表格初始化 $.table.init

表的各项(Table options ) 参数 类型 默认值 描述 url String Null 请求后台的URL

uniqueId String Null 指定唯一列属性 配合删除/修改使用 未指定则使用表格行首列

createUrl String Null 新增URL 配合使用 $.operate.add()，$.operate.addTab()

updateUrl String Null 修改URL 配合使用 $.operate.edit()，$.operate.editTab()

removeUrl String Null 删除URL 配合使用 $.operate.remove()

exportUrl String Null 导出URL 配合使用 $.table.exportExcel()

importUrl String Null 导入URL 配合使用 $.table.importExcel()

detailUrl String Null 详细URL 配合使用 $.operate.detail()

cleanUrl String Null 清空URL 配合使用 $.operate.clean()

importTemplateUrl String Null 模板URL 配合使用 $.table.importTemplate()

height String undefined 表格的高度

striped String false 是否显示行间隔色

sortName String Null 排序列名称

sortOrder String Null 排序方式 asc 或者 desc

pagination Boolean true 默认为true表格的底部工具栏会显示分页条，设为false不显示

paginationLoop Boolean false 默认为true不启用分页条无限循环的功能

pageSize int 10 每页的记录行数(*)

pageList Array [10, 25, 50] 可供选择的每页的行数

id String bootstrap-table 表格ID属性

toolbar String toolbar 表格工具栏ID属性

escape Boolean false 是否转义HTML字符串

firstLoad Boolean true 是否首次请求加载数据，对于数据较大可以配置false

showFooter Boolean false 默认为false隐藏表尾，设为true显示

sidePagination String server server启用服务端分页client客户端分页

search Boolean true 默认为true显示搜索框功能，设为false隐藏

searchText String '' 搜索框初始显示的内容，需要启用search设为true

showSearch Boolean true 默认为true显示检索信息，设为false隐藏

showPageGo Boolean false 默认为false不显示跳转页，设为true显示

showRefresh Boolean true 默认为true显示刷新按钮，设为false隐藏

showColumns Boolean true 默认为true显示某列下拉菜单，设为false隐藏

showToggle Boolean true 默认为true显示视图切换按钮，设为false隐藏

showExport Boolean true 默认为true显示导出文件按钮，设为false隐藏

showHeader Boolean true 默认为true显示表头，设为false隐藏

showFullscreen Boolean false 默认为false不全屏显示，设为true全屏显示

clickToSelect Boolean false 默认为false不启用点击选中行，设为true启用

singleSelect Boolean false 是否单选checkbox

mobileResponsive Boolean true 是否支持移动端适配

cardView Boolean false 是否启用显示卡片视图

detailView Boolean false 是否启用显示细节视图

onCheck Function onCheck(row, $element) 当选择此行时触发

onUncheck Function onUncheck(row, $element) 当取消此行时触发

onCheckAll Function onCheckAll(rowsAfter, rowsBefore) 当全选行时触发

onUncheckAll Function onUncheckAll(rowsAfter, rowsBefore) 当取消全选行时触发

onClickRow Function onClickRow(row, $element) 点击某行触发的事件

onDblClickRow Function onDblClickRow(row, $element) 双击某行触发的事件

onClickCell Function onClickCell(field, value, row, $element) 单击某格触发的事件

onDblClickCell Function onDblClickCell(field, value, row, $element) 双击某格触发的事件

onEditableSave Function onEditableSave(field, row, oldValue, $el) 行内编辑保存的事件

onExpandRow Function onExpandRow(index, row, $detail) 点击详细视图的事件

onPostBody Function onPostBody(data) 渲染完成后执行的事件

maintainSelected Boolean false 默认为false前端翻页时不保留所选行，设为true启用

rememberSelected Boolean false 默认为false不启用翻页记住前面的选择，设为true启用

fixedColumns Boolean false 默认为false禁用冻结列，设为true启用冻结列(左侧)

fixedNumber int 0 冻结列的个数，当fixedColumns设为true有效(左侧)

fixedRightNumber int 0 冻结列的个数，当fixedColumns设为true有效(右侧)

onReorderRow Function onReorderRow: function (data) 当拖拽结束后处理函数

rowStyle Function rowStyle(row, index) 改变某行的格式，需要两个参数：row行的数据index行的索引

footerStyle Function footerStyle(column) 通过自定义函数设置页脚样式

headerStyle Function headerStyle(column) 通过自定义函数设置标题样式

params Array Null 当请求数据时，你可以通过修改queryParams向服务器发送参数

columns Array Null 默认空数组，在JS里面定义 参考列的各项(Column options )

data Array [] 默认空数组，被加载的数据

responseHandler object responseHandler(res) 在加载服务器发送来的数据之前，处理数据的格式

onLoadSuccess object onLoadSuccess(data) 当所有数据被加载时触发处理函数

exportOptions object ignoreColumn: [0, 8] 前端导出设置ignoreColumn忽略列索引如[0,5,10]

detailFormatter Function (index, row, element) detailView设为true，启用了显示detail view。用于格式化细节视图

列的各项(Column options ) 参数 类型 默认值 描述 radio Boolean false 默认false不显示radio(单选按钮)，设为true则显示，radio宽度是固定的

checkbox Boolean false 默认false不显示checkbox(复选框)，设为true则显示，checkbox的每列宽度已固定

field String Null 是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一

title String Null 这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字

titleTooltip String true 当悬浮在某控件上，出现提示 - 参考 Bootstrap 提示工具(Tooltip)插件

class boolean false 表格列样式

rowspan Number true 每格所占的行数

colspan Number true 每格所占的列数

align String true 每格内数据的对齐方式，有：left(靠左)、right(靠右)、center(居中)

halign String true table header(表头)的对齐方式，有：left(靠左)、right(靠右)、center(居中)

falign String true table footer(表脚，的对齐方式，有：left(靠左)、right(靠右)、center(居中)

valign String true 每格数据的对齐方式，有：top(靠上)、middle(居中)、bottom(靠下)

width Number Null 每列的宽度。如果没有自定义宽度自适应

widthUnit String px 定义用于选项的单位，例如%

sortable Boolean false 默认false就默认显示，设为true则会被排序

order String asc 默认的排序方式为"asc(升序)"，也可以设为"desc(降序)"。

visible Boolean true 默认为true显示该列，设为false则隐藏该列

ignore Boolean false 默认为false该列可见，设为true则不可见，列选项也消失了

cardVisible Boolean true 默认为true显示该列，设为false则隐藏。

switchable Boolean true 默认为true显示该列，设为false则禁用列项目的选项卡。

clickToSelect Boolean true 默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox(复选框)或radiobox(单选按钮)

formatter Function Null 某格的数据转换函数，需要三个参数： -value： field(字段名) -row：行的数据 -index：行的(索引)index

footerFormatter Function Null 某格的数据转换函数，需要一个参数： -data： 所有行数据的数组 函数需要返回(return)footer某格内所要显示的字符串的格式

events Object Null 当某格使用formatter函数时，事件监听会响应，需要四个参数： -event：-value：字段名 -row：行数据 -index：此行的index

sorter Function Null 自定义的排序函数，实现本地排序，需要两个参数： - a：第一个字段名 - b：第二个字段名

sortName String Null 排序列名称

cellStyle Function Null 对某列中显示样式改变

searchable Boolean true 默认true，表示此列数据可被查询

searchFormatter Boolean true 默认true，可使用格式化的数据查询

escape Boolean false 是否转义HTML字符串 表单搜索 $.table.search 表格数据导出 $.table.exportExcel 数据模板下载 $.table.importTemplate 表格数据导入 $.table.importExcel 表格销毁 $.table.destroy 表格数据刷新 $.table.refresh 选择表格行具体列 $.table.selectColumns 选择表格行首列 $.table.selectFirstColumns 显示表格特定的列 $.table.showColumn 隐藏表格特定的列 $.table.hideColumn 序列号生成 $.table.serialNumber 超出指定长度浮动提示(单击文本可复制) $.table.tooltip 回显数据字典 $.table.selectDictLabel 新增回显数据字典(字符串数组) $.table.selectDictLabels 下拉按钮切换 $.table.dropdownToggle 图片预览 $.table.imageView

# 弹层使用

弹层组件目前基于layer组件进行封装,提供了弹出、消息、提示、确认、遮罩处理等功能。 提供成功、警告和错误等反馈信息 提供成功、警告和错误等提示信息 提供弹出层信息 提供遮罩层信息

# 权限使用

使用thymeleaf模板整合了shiro标签 - 界面可以直接使用。(此处简单介绍两个，更多请参考官方文档)

如果需要在JS中使用权限，使用封装方法

# 字典使用

配置好相关的数据字典信息即可正常使用(系统管理-字典管理)

如果在想Table表格数据使用字典，使用formatter格式化

# 参数使用

配置好相关的参数信息即可正常使用(系统管理-参数管理)

如果需要在JS中使用参数，使用封装方法

————————————————

版权声明：本文为CSDN博主「weixin_39574050」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_39574050/article/details/111727564