Skip to content

F
fgqyxxlr
Commit 7d6cdabc by RuoYi
Options

添加表格动态增删改查示例

parent 1c235dc7
Showing with 284 additions and 24 deletions
ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java
......@@ -177,6 +177,15 @@ public class DemoTableController extends BaseController
}
/**
* 动态增删改查
*/
@GetMapping("/curd")
public String curd()
{
return prefix + "/curd";
}
/**
* 表格其他操作
*/
@GetMapping("/other")
......
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js
......@@ -210,7 +210,7 @@
that.$fixedBody.find('tbody tr:eq(' + i + ')').height($(this).height());
});
$("#" + $.table._option.id).on("check.bs.table uncheck.bs.table", function (e, rows, $element) {
$.btTable.on("check.bs.table uncheck.bs.table", function (e, rows, $element) {
var index= $element.data('index');
$(this).find('.bs-checkbox').find('input[data-index="' + index + '"]').prop("checked", true);
var selectFixedItem = $('.left-fixed-table-columns input[name=btSelectItem]');
......
ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css
......@@ -584,7 +584,7 @@ label {
}
.container-div {
padding: 10px 35px;
padding: 0px 28px;
height: 100%;
}
......
ruoyi-admin/src/main/resources/static/ruoyi/js/common.js
......@@ -131,9 +131,9 @@ $(function() {
var dataExpand = $.common.isEmpty($.table._option.expandAll) ? true : $.table._option.expandAll;
expandFlag = $.common.isEmpty(expandFlag) ? dataExpand : expandFlag;
if (!expandFlag) {
$('#' + $.table._option.id).bootstrapTreeTable('expandAll');
$.bttTable.bootstrapTreeTable('expandAll');
} else {
$('#' + $.table._option.id).bootstrapTreeTable('collapseAll');
$.bttTable.bootstrapTreeTable('collapseAll');
}
expandFlag = expandFlag ? false: true;
})
......
ruoyi-admin/src/main/resources/static/ruoyi/js/ry-ui.js
......@@ -4,8 +4,9 @@
*/
(function ($) {
$.extend({
_treeTable: {},
_tree: {},
btTable: {},
bttTable: {},
// 表格封装处理
table: {
_option: {},
......@@ -43,6 +44,7 @@
};
var options = $.extend(defaults, options);
$.table._option = options;
$.btTable = $('#' + options.id);
$.table.initEvent();
$('#' + options.id).bootstrapTable({
url: options.url, // 请求后台的URL（*）
......@@ -72,6 +74,7 @@
showColumns: options.showColumns, // 是否显示隐藏某列下拉框
showToggle: options.showToggle, // 是否显示详细视图和列表视图的切换按钮
showExport: options.showExport, // 是否支持导出文件
uniqueId: options.uniqueId, // 唯 一的标识符
clickToSelect: options.clickToSelect, // 是否启用点击选中行
detailView: options.detailView, // 是否启用显示细节视图
onClickRow: options.onClickRow, // 点击某行触发的事件
......@@ -130,7 +133,7 @@
// 初始化事件
initEvent: function(data) {
// 触发行点击事件 加载成功事件
$("#" + $.table._option.id).on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () {
$.btTable.on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table load-success.bs.table", function () {
// 工具栏按钮控制
var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
$('#' + $.table._option.toolbar + ' .btn-del').toggleClass('disabled', !rows.length);
......@@ -138,7 +141,7 @@
$('#' + $.table._option.toolbar + ' .btn-detail').toggleClass('disabled', rows.length!=1);
});
// 绑定选中事件、取消事件、全部选中、全部取消
$("#" + $.table._option.id).on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows) {
$.btTable.on("check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table", function (e, rows) {
// 复选框分页保留保存选中数组
var rowIds = $.table.affectedRowIds(rows);
if ($.common.isNotEmpty($.table._option.rememberSelected) && $.table._option.rememberSelected) {
......@@ -147,7 +150,7 @@
}
});
// 图片预览事件
$("#" + $.table._option.id).on('click', '.img-circle', function() {
$.btTable.on('click', '.img-circle', function() {
var src = $(this).attr('src');
var target = $(this).data('target');
if($.common.equals("self", target)) {
......@@ -179,7 +182,7 @@
},
// 序列号生成
serialNumber: function (index) {
var table = $('#' + $.table._option.id).bootstrapTable('getOptions');
var table = $.btTable.bootstrapTable('getOptions');
var pageSize = table.pageSize;
var pageNumber = table.pageNumber;
return pageSize * (pageNumber - 1) + index + 1;
......@@ -223,7 +226,7 @@
// 搜索-默认第一个form
search: function(formId, data) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
var params = $("#" + $.table._option.id).bootstrapTable('getOptions');
var params = $.btTable.bootstrapTable('getOptions');
params.queryParams = function(params) {
var search = $.common.formToJSON(currentId);
if($.common.isNotEmpty(data)){
......@@ -238,7 +241,7 @@
search.isAsc = params.order;
return search;
}
$("#" + $.table._option.id).bootstrapTable('refresh', params);
$.btTable.bootstrapTable('refresh', params);
},
// 导出数据
exportExcel: function(formId) {
......@@ -323,13 +326,13 @@
},
// 刷新表格
refresh: function() {
$("#" + $.table._option.id).bootstrapTable('refresh', {
$.btTable.bootstrapTable('refresh', {
silent: true
});
},
// 查询表格指定列值
selectColumns: function(column) {
var rows = $.map($('#' + $.table._option.id).bootstrapTable('getSelections'), function (row) {
var rows = $.map($.btTable.bootstrapTable('getSelections'), function (row) {
return row[column];
});
if ($.common.isNotEmpty($.table._option.rememberSelected) && $.table._option.rememberSelected) {
......@@ -352,7 +355,7 @@
},
// 查询表格首列值
selectFirstColumns: function() {
var rows = $.map($('#' + $.table._option.id).bootstrapTable('getSelections'), function (row) {
var rows = $.map($.btTable.bootstrapTable('getSelections'), function (row) {
return row[$.table._option.columns[1].field];
});
if ($.common.isNotEmpty($.table._option.rememberSelected) && $.table._option.rememberSelected) {
......@@ -374,11 +377,11 @@
},
// 显示表格指定列
showColumn: function(column) {
$("#" + $.table._option.id).bootstrapTable('showColumn', column);
$.btTable.bootstrapTable('showColumn', column);
},
// 隐藏表格指定列
hideColumn: function(column) {
$("#" + $.table._option.id).bootstrapTable('hideColumn', column);
$.btTable.bootstrapTable('hideColumn', column);
}
},
// 表格树封装处理
......@@ -401,7 +404,7 @@
};
var options = $.extend(defaults, options);
$.table._option = options;
var treeTable = $('#' + options.id).bootstrapTreeTable({
$.bttTable = $('#' + options.id).bootstrapTreeTable({
code: options.code, // 用于设置父子关系
parentCode: options.parentCode, // 用于设置父子关系
type: 'get', // 请求方式（*）
......@@ -419,21 +422,20 @@
expandFirst: options.expandFirst, // 是否默认第一级展开--expandAll为false时生效
columns: options.columns
});
$._treeTable = treeTable;
},
// 条件查询
search: function(formId) {
var currentId = $.common.isEmpty(formId) ? $('form').attr('id') : formId;
var params = $.common.formToJSON(currentId);
$._treeTable.bootstrapTreeTable('refresh', params);
$.bttTable('refresh', params);
},
// 刷新
refresh: function() {
$._treeTable.bootstrapTreeTable('refresh');
$.bttTable('refresh');
},
// 查询表格树指定列值
selectColumns: function(column) {
var rows = $.map($('#' + $.table._option.id).bootstrapTreeTable('getSelections'), function (row) {
var rows = $.map($.btTable.bootstrapTreeTable('getSelections'), function (row) {
return row[column];
});
return $.common.uniqueFn(rows);
......@@ -819,7 +821,7 @@
// 修改信息
edit: function(id) {
if($.common.isEmpty(id) && $.table._option.type == table_type.bootstrapTreeTable) {
var row = $('#' + $.table._option.id).bootstrapTreeTable('getSelections')[0];
var row = $.btTable.bootstrapTreeTable('getSelections')[0];
if ($.common.isEmpty(row)) {
$.modal.alertWarning("请至少选择一条记录");
return;
......
ruoyi-admin/src/main/resources/templates/demo/operate/other.html
......@@ -3,7 +3,75 @@
<head>
<th:block th:include="include :: header('其他操作')" />
</head>
<body class="gray-bg">
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal" id="form-demo-1">
<div class="form-group">
<label class="col-sm-2 control-label">用户名称：</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="userName"placeholder="请输入用户名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">手机号码：</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="phonenumber" maxlength="11"placeholder="请输入手机号码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-sm btn-primary" onclick="submit1()"><i class="fa fa-check"></i>保 存（不刷新当前页）</button>&nbsp;
</div>
</div>
</form>
<hr/>
<form class="form-horizontal" id="form-demo-2">
<div class="form-group">
<label class="col-sm-2 control-label">用户名称：</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="userName"placeholder="请输入用户名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">手机号码：</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="phonenumber" maxlength="11"placeholder="请输入手机号码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-sm btn-primary" onclick="submit2()"><i class="fa fa-check"></i>保 存（刷新当前页）</button>&nbsp;
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
var prefix = ctx + "demo/operate";
function submit1(){
$.operate.saveModal(prefix + "/edit", $('#form-demo-1').serialize());
}
function submit2(){
$.ajax({
url: prefix + "/edit",
data: $('#form-demo-2').serialize(),
type: "post",
success: function(result) {
if (result.code == 0) {
layer.msg("保存成功,正在刷新数据请稍后……", {
icon: 1,
time: 500,
shade: [0.1, '#8F8F8F']
},function() {
location.reload();
});
} else {
alert(result.msg);
}
}
})
}
</script>
</body>
</html>
\ No newline at end of file
ruoyi-admin/src/main/resources/templates/demo/table/curd.html 0 → 100644
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('动态增删改查')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="insertRow()">
<i class="fa fa-plus"></i> 新增行
</a>
<a class="btn btn-danger btn-del disabled" onclick="removeRow()">
<i class="fa fa-remove"></i> 删除选择行
</a>
<a class="btn btn-danger" onclick="removeRowByUniqueId()">
<i class="fa fa-remove"></i> 根据值删除行
</a>
<a class="btn btn-danger" onclick="removeRowAll()">
<i class="fa fa-remove"></i> 删除所有行
</a>
<a class="btn btn-info" onclick="updateRow()">
<i class="fa fa-edit"></i> 修改行
</a>
<a class="btn btn-info" onclick="updateRowByUniqueId()">
<i class="fa fa-edit"></i> 根据值修改行
</a>
<a class="btn btn-primary" onclick="getSelections()">
<i class="fa fa-search"></i> 查询选择数据
</a>
<a class="btn btn-info" onclick="getRowByUniqueId()">
<i class="fa fa-edit"></i> 根据值查询行
</a>
<a class="btn btn-primary" onclick="getData()">
<i class="fa fa-search"></i> 查询所有数据
</a>
</div>
<div class="row">
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
var prefix = ctx + "demo/table";
$(function() {
var options = {
url: prefix + "/list",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
pagination: false,
uniqueId: "userId",
height: 400,
columns: [{
checkbox: true
},
{
field : 'userId',
title : '用户ID'
},
{
field : 'userCode',
title : '用户编号'
},
{
field : 'userName',
title : '用户姓名'
},
{
field : 'userPhone',
title : '用户手机'
},
{
field : 'userEmail',
title : '用户邮箱'
},
{
field : 'userBalance',
title : '用户余额'
}]
};
$.table.init(options);
});
/* 新增表格行 */
function insertRow(){
var randomId = 100 + ~~(Math.random() * 100)
$.btTable.bootstrapTable('insertRow', {
index: 0, // 你想插入到哪，0表示第一行
row: {
userId: randomId,
userCode: 2000000 + randomId,
userName: '测试' + randomId,
userPhone: '1588888888',
userEmail: 'ry1@qq.com',
userBalance: 10 + randomId,
}
})
}
/* 删除指定表格行 */
function removeRow(){
var ids = $.table.selectColumns("userId");
if (ids.length == 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
$.btTable.bootstrapTable('remove', {
field: 'userId',
values: ids
})
}
/* 删除行ID值为1的数据 */
function removeRowByUniqueId(){
$.btTable.bootstrapTable('removeByUniqueId', 1)
}
/* 删除所有表格行 */
function removeRowAll(){
$.btTable.bootstrapTable('removeAll')
}
/* 修改表格行 */
function updateRow(){
var randomId = 100 + ~~(Math.random() * 100)
$.btTable.bootstrapTable('updateRow', {
index: 0, // 你想修改哪行，0表示第一行
row: {
userId: randomId,
userCode: 3000000 + randomId,
userName: '测试' + randomId,
userPhone: '1599999999',
userEmail: 'ry2@qq.com',
userBalance: 50 + randomId,
}
})
}
/* 修改行ID值为1的数据 */
function updateRowByUniqueId(){
var randomId = 100 + ~~(Math.random() * 100)
$.btTable.bootstrapTable('updateByUniqueId', {
id: 1,
row: {
userId: randomId,
userCode: 3000000 + randomId,
userName: '测试' + randomId,
userPhone: '1599999999',
userEmail: 'ry2@qq.com',
userBalance: 50 + randomId,
}
})
}
/* 查询表格所有数据值 */
function getData(){
var data = $.btTable.bootstrapTable('getData');
alert(JSON.stringify(data))
}
/* 查询行ID值为1的数据 */
function getRowByUniqueId(){
var data = $.btTable.bootstrapTable('getRowByUniqueId', 1);
alert(JSON.stringify(data))
}
/* 查询表格选择行数据值 */
function getSelections(){
var data = $.btTable.bootstrapTable('getSelections');
alert(JSON.stringify(data))
}
</script>
</body>
</html>
\ No newline at end of file
ruoyi-admin/src/main/resources/templates/index.html
......@@ -104,6 +104,7 @@
<li><a class="menuItem" th:href="@{/demo/table/event}">自定义触发事件</a></li>
<li><a class="menuItem" th:href="@{/demo/table/detail}">表格细节视图</a></li>
<li><a class="menuItem" th:href="@{/demo/table/image}">表格图片预览</a></li>
<li><a class="menuItem" th:href="@{/demo/table/curd}">动态增删改查</a></li>
<li><a class="menuItem" th:href="@{/demo/table/other}">表格其他操作</a></li>
</ul>
</li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment