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

ruoyi-admin/src/main/java/com/ruoyi/web/controller/demo/controller/DemoTableController.java

@@ -176,6 +176,15 @@ public class DemoTableController extends BaseController
         return prefix + "/image";
     }
 
+    /**
+     * 动态增删改查
+     */
+    @GetMapping("/curd")
+    public String curd()
+    {
+        return prefix + "/curd";
+    }
+
     /**
      * 表格其他操作
      */

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>

ruoyi-admin/src/main/resources/templates/demo/table/curd.html

@@ -0,0 +1,178 @@
+<!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>

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>