Browse Source

[feat] 通用模块

去掉旧版的表格列宽拖动插件引入新版的表格宽度拖动插件,出货资料出货单页面作为示例代码实现表格宽度拖动功能,表格宽度受固定高度、固定左右列,列的数量的影响
dev
liuxiaoxu 2 months ago
parent
commit
13cbed46dd
  1. 69
      ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/resizable/bootstrap-table-resizable.js
  2. 10
      ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/resizable/bootstrap-table-resizable.min.js
  3. 1
      ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/resizable/jquery.resizableColumns.min.js
  4. 9
      ruoyi-admin/src/main/resources/templates/include.html
  5. 6
      ruoyi-admin/src/main/resources/templates/sales/salesShippingInformationShipping/salesShippingInformationShipping.html

69
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/resizable/bootstrap-table-resizable.js

@ -0,0 +1,69 @@
/**
* @author: Dennis Hernández
* @webSite: http://djhvscf.github.io/Blog
* @version: v2.0.0
*/
const isInit = that => that.$el.data('resizableColumns') !== undefined
const initResizable = that => {
if (
that.options.resizable &&
!that.options.cardView &&
!isInit(that) &&
that.$el.is(':visible')
) {
that.$el.resizableColumns({
store: window.store
})
}
}
const destroy = that => {
if (isInit(that)) {
that.$el.data('resizableColumns').destroy()
}
}
const reInitResizable = that => {
destroy(that)
initResizable(that)
}
$.extend($.fn.bootstrapTable.defaults, {
resizable: false
})
$.BootstrapTable = class extends $.BootstrapTable {
initBody (...args) {
super.initBody(...args)
this.$el.off('column-switch.bs.table page-change.bs.table')
.on('column-switch.bs.table page-change.bs.table', () => {
reInitResizable(this)
})
reInitResizable(this)
}
toggleView (...args) {
super.toggleView(...args)
if (this.options.resizable && this.options.cardView) {
// Destroy the plugin
destroy(this)
}
}
resetView (...args) {
super.resetView(...args)
if (this.options.resizable) {
// because in fitHeader function, we use setTimeout(func, 100);
setTimeout(() => {
initResizable(this)
}, 100)
}
}
}

10
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/resizable/bootstrap-table-resizable.min.js

File diff suppressed because one or more lines are too long

1
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/resizable/jquery.resizableColumns.min.js

File diff suppressed because one or more lines are too long

9
ruoyi-admin/src/main/resources/templates/include.html

@ -217,13 +217,8 @@
<!-- 表格列宽拖动插件 -->
<div th:fragment="bootstrap-table-resizable-js">
<script th:src="@{/ajax/libs/bootstrap-table/extensions/resizable/jquery.resizableColumns.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/resizable/bootstrap-table-resizable.min.js?v=20210202}"></script>
</div>
<!-- 表格列宽拖动插件2 -->
<div th:fragment="bootstrap-table-colResizable-js">
<script th:src="@{/ajax/libs/bootstrap-table/extensions/colresizable/colResizable-1.6.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/resizable/jquery.resizableColumns.min.js?v=0.1.0}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/resizable/bootstrap-table-resizable.js?v=1.18.3}"></script>
</div>
<!-- 表格行内编辑插件 -->

6
ruoyi-admin/src/main/resources/templates/sales/salesShippingInformationShipping/salesShippingInformationShipping.html

@ -56,12 +56,14 @@
<i class="fa fa-download"></i> 导出Vantritek
</a>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
<div class="col-sm-12 select-table table-bordered">
<table id="bootstrap-table" data-resizable="true"></table>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-resizable-js" />
<script th:inline="javascript">
var supplementDocumentFlag = [[${@permission.hasPermi('sales:salesShippingInformationShipping:supplementDocument')}]];

Loading…
Cancel
Save