实战Flask+BootstrapTable后端传javascript脚本给前端实现多行编辑(ajax方式)

相信看到此文的朋友们一定会感到庆幸,总之我是用了两天死磕,才得到如下结果,且行且珍惜,祝好各位!

话不多说,有图有源码

1.看图

2.前端实现页面

<!DOCTYPE html>
{% from "common/_macro.html" import static %}
<html>
<meta charset="utf-8">
<head>
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css" />
<!-- 引入bootstrap-table样式 -->
<link rel="stylesheet" href="/static/bootstrap-table-develop/bootstrap-table.min.css" />
<!-- layer -->
<link rel="stylesheet" href="/static/layer/2.4/skin/layer.css" />
<!-- jquery -->
<script type="text/javascript" src="/static/js/jquery-2.2.0.min.js" ></script>
<!-- bootstrap -->
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js" ></script>
<!-- bootstrap-table -->
<script type="text/javascript" src="/static/bootstrap-table-develop/bootstrap-table.min.js" ></script>
<!-- 引入中文语言包 -->
<script type="text/javascript" src="/static/bootstrap-table-develop/locale/bootstrap-table-zh-CN.min.js" ></script>
<!-- layer -->
<script type="text/javascript" src="/static/layer/2.4/layer.js" ></script>

</head>
<body class="gray-bg">
	<h1 align="center">Bootstrap-Table 多行编辑保存</h1>
	<div class="wrapper wrapper-content ">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-body">
					<table id="exampleTable"></table>

					<button type="button" id="butSave" class="btn btn-primary col-sm-1 col-sm-offset-5" onclick="save()">保存</button>
				</div>
			</div>
		</div>
	</div>
	<div ></div>
</body>
</html>
<script>
	var prefix = "/hellotableeditrowssave";
	var $table = $('#exampleTable');
$(function() {
	var loadData = [];
	var tableColumns = [];
	initTable();
	ajaxTable('/hellotableeditrowssave/ajaxlist');

	function initTable() {
		$table.bootstrapTable({
			toolbar: '#toolbar',
			clickEdit: true,
			showToggle: true,
			pagination: true,       //显示分页条
			showColumns: true,
			showPaginationSwitch: true,     //显示切换分页按钮
			showRefresh: true,      //显示刷新按钮
			//clickToSelect: true,  //点击row选中radio或CheckBox
			columns: tableColumns
		});
	}


    function ajaxTable(url){
		//debugger;
		$.ajax({
			url: url,
			type: "GET",
			dataType: "json",
			success: function(rs){
				console.log(rs)
				loadData = rs.data.rows;
				tableColumns = eval(rs.data.columns);//JSON.parse(rs.data.columns);//'('++')'
				$table.bootstrapTable('refreshOptions',
				{
					columns: tableColumns,
					data: loadData,
				});
				//-----隐藏id列
				//$table.bootstrapTable('hideColumn','id');
			},
			error: function(rs){
				console.log(rs)
			}
		});
	}

});

//对象转json字符串
function objTostr(obj){
	if( typeof(obj)!=='object'  ){return obj;}
	var temp=Object.assign({},obj);
	return JSON.stringify( temp).replace(/"/g, '&quot;');
}
//行编辑数据更新到table中
function editRow(index,field,value,row){
	alert("修改了id="+row.id+" 字段名: ["+field+"] 的内容:['"+value+"']");
	 var rows = {
		index : index, //更新列所在行的索引
		field : field, //要更新列的field
		value : value //要更新列的数据
	};//更新表格数据
	$("#exampleTable").bootstrapTable("updateCell",rows);
}

function save(){
	var rows = $table.bootstrapTable('getSelections');
    if (rows.length == 0) {
        alert("请选择要保存的记录!");
        return;
    } else {
		var params = JSON.stringify(rows);
		$.ajax({
			url : '/hellotableeditrowssave/update',
			type : 'POST',
			data : params,
			contentType:'application/json;charset=utf-8',
			dataType:'JSON',
			cache : false,
			success : function(data) {
				layer.msg(data.data.msg);
			}
		});
    }
}
</script>

3.后端内容

#=============================================================
#---------------------阿桂天山 Ewangda--------------------------
"""
Bootstrap-table 动态多行编辑保存
"""
@app.route('/hellotableeditrowssave', methods=['GET','POST'])
def hellotableeditrowssave():
    return render_template('/hello_tableeditrowssave.html')

@app.route('/hellotableeditrowssave/ajaxlist', methods=['GET','POST'])
def hellotableeditrowssave_ajaxlist():
    columns = """[{'checkbox': true}, {'field': 'id','title': 'Item ID'}, {'field': 'name1','title': 'Item Name'}, {'field': 'price','title': 'Item Price'},
               {'field': 'goods','title': '商品', 'formatter': function(value, row, index, field) {  if (row['goods'] == "" || row['goods'] == null){
                   value = "";} else { value = row['goods']; } var abc = "hahaha"; return '<input class="form-control" value="'+value+'" name="goods" type="text" onblur="editRow(\\''+index+'\\',\\'goods\\',this.value,'+objTostr(row)+');">';}}]"""
    datas = [{ "id": 11, "name1": "gtj", "price": "¥11", "goods": "玩具小车" },
             { "id": 22, "name1": "Ewangda", "price": "¥22", "goods": "遥控赛车"  },
             { "id": 31, "name1": "小柘服务", "price": "¥32", "goods": "翻斗车"  }]
    data = {
        'columns' : columns,
        'rows' : datas
    }
    totalNum = 3
    return restful.success(data=data) #{'total': totalNum, 'data':datas}) #

@app.route('/hellotableeditrowssave/update', methods=['GET','POST'])
def hellotableeditrowssave_update():
    result = request.get_json()
    num = len(result)
    ids =[]
    for row in result:
        print(row['id'],row['goods'])
        ids.append(row['id'])
    # print(result)
    data ={
        'msg': "成功修改{0}条记录:ids={1}".format(num,ids)
    }
    return restful.success(data=data)
#=============================================================

就这些了,如果你有更好的方法,望不吝赐教!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/206881.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python开发运维:PyMongo 连接操作 MongoDB

目录 一、理论 1.PyMongo模块 2.Mongo Shell 二、实验 1. Windows11安装MongoDB 7.0.4 2.Windows11安装MongoDB Shell 2.1.0 3.PyMongo 连接 MongoDB&#xff08;无密码方式&#xff09; 4.PyMongo 连接 MongoDB&#xff08;有密码方式&#xff09; 5.PyMongo 操作 Mo…

rabbitmq消息队列实验

实验目的&#xff1a;实现异步通信 实验条件&#xff1a; 主机名 IP地址 组件 test1 20.0.0.10 rabbitmq服务 test2 20.0.0.20 rabbitmq服务 test3 20.0.0.30 rabbitmq服务 实验步骤&#xff1a; 1、安装rabbitmq服务 2、erlang进入命令行&#xff0c;查看版本 …

zookeeper集群和kafka集群

&#xff08;一&#xff09;kafka 1、kafka3.0之前依赖于zookeeper 2、kafka3.0之后不依赖zookeeper&#xff0c;元数据由kafka节点自己管理 &#xff08;二&#xff09;zookeeper 1、zookeeper是一个开源的、分布式的架构&#xff0c;提供协调服务&#xff08;Apache项目&…

91基于matlab的以GUI实现指纹的识别和匹配百分比

基于matlab的以GUI实现指纹的识别和匹配百分比,中间有对指纹的二值化&#xff0c;M连接&#xff0c;特征提取等处理功能。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 91M连接 特征提取 (xiaohongshu.com)

国产linux单用户模式破解无密码登陆 (麒麟系统用户登录密码遗忘解决办法)

笔者手里有一批国产linu系统&#xff0c;目前开始用在日常的工作生产环境中&#xff0c;我这个老程序猿勉为其难的充当运维的或网管的角色。 国产linux系统常见的为麒麟Linux&#xff0c;统信UOS等&#xff0c;基本都是基于debian再开发的linux。 问题描述&#xff1a; 因为…

Windows系列:windows server 2016 下域环境的搭建(完整版)

windows server 2016 下域环境的搭建&#xff08;完整版&#xff09; windows server 2016 下域环境的搭建在搭建之前简单介绍一下基础知识&#xff1a;一、环境介绍 &#xff1a;1.这里用拓扑图进行展示&#xff1a;2.所有环境配置如下 二、搭建主域&#xff1a;一. 创建主域1…

天眼销:精准的企业名录

企业名录的重要性&#xff0c;对于销售而言都是极其重要的。本期为家人们分享如何正确挑选出优质的企业名录渠道&#xff0c;避免走一些弯弯坑坑。 为了有效利用企业名录进行客户开发&#xff0c;您需要关注信息的准确性、可提供的资源数量以及信息的时效性。能否根据您的需求…

统信UOS和vue.js的一个兼容问题

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 这事到现在说起还很奇怪&#xff0c;在UOS20&#xff08;硬件为华为鲲鹏服务器&#xff0c;arm架构&#xff0c;g8.3&#xff09;上部署uve.js&#xff0…

Windows10中在Visual Studio2017中VC++项目安装使用GoogleTest库

Windows10中在Visual Studio2017中VC项目安装使用GoogleTest库 在Windows10中VC程序中可以不用自己手动下载GoogleTest源代码&#xff0c;可以直接通过【项目】-> 【管理 NuGet 程序包】-> 【浏览】-> 搜索 googletest&#xff0c; 找到Microsoft.googletest.v140.wi…

LabVIEW开发自适应降噪ANC

LabVIEW开发自适应降噪ANC 在许多情况下&#xff0c;信号很嘈杂&#xff0c;必须消除噪声。自适应降噪&#xff08;ANC&#xff09;是可用于消除信号噪声的主要实时方法之一。可以使用LabVIEW自适应滤滤器工具包来设计ANC应用程序。本文介绍使用自适应筛选器工具包的ANC的一些…

GAN:WGAN前作

WGAN前作&#xff1a;有原则的方法来训练GANs 论文&#xff1a;https://arxiv.org/abs/1701.04862 发表&#xff1a;ICLR 2017 本文是wgan三部曲的第一部。文中并没有引入新的算法&#xff0c;而是标是朝着完全理解生成对抗网络的训练动态过程迈进理论性的一步。 文中基本是…

Neo4j 程序开发 JavaAPI 嵌入式开发模式(头歌)

文章目录 第1关&#xff1a;JavaAPI 嵌入式开发模式任务描述相关知识创建 Neo4j 数据库启动 Neo4j 数据事务创建节点创建节点关系将创建的数据库设置为默认数据库 编程要求测试说明答案代码修改配置文件&#xff0c;更改默认 Neo4j 数据库代码文件 第1关&#xff1a;JavaAPI 嵌…

C#开发的OpenRA游戏之属性SelectionDecorations(14)

C#开发的OpenRA游戏之属性SelectionDecorations(14) 前面分析选择类时,还有一个功能,就是把选中物品的状态和生命值显示出来。 它是通过下面的函数来实现: protected override IEnumerable<IRenderable> RenderSelectionBars(Actor self, WorldRenderer wr, bool …

网络安全应急响应-Server2228(环境+解析)

网络安全应急响应 任务环境说明: 服务器场景:Server2228(开放链接)用户名:root,密码:p@ssw0rd123

【稳定检索|投稿优惠】2024年生物神经工程与健康大数据国际会议(ICBNHBD 2024)

2024年生物神经工程与健康大数据国际会议(ICBNHBD 2024) 2024 International Conference on Biological Neuroengineering and Health Big Data(ICBNHBD) 一、【会议简介】 2024年生物神经工程与健康大数据国际会议(ICBNHBD 2024)&#xff0c;这场科学盛宴&#xff0c;会议在中…

开关电源工作时,如何抑制纹波和减小高频噪声?

开关电源的纹波和噪声是一个本质问题&#xff0c;换而言之无论纹波和噪声多么小&#xff0c;也无法从根本上去除&#xff0c;再绝对的讲开关电源无论成本怎么提高&#xff0c;也无法完全达到线性电源的性能和特点。那么&#xff0c;通常抑制或减少它的做法有五种&#xff1a; …

2分图匹配算法

定义 节点u直接无边&#xff0c;v之间无边&#xff0c;边只存在uv之间。判断方法&#xff1a;BFS染色法&#xff0c;全部染色后&#xff0c;相邻边不同色 无权二部图中的最大匹配 最大匹配即每一个都匹配上min&#xff08;u&#xff0c; v&#xff09;。贪心算法可能导致&…

OLED双面显示广告机的应用场景

OLED双面显示广告机是一种创新的广告设备&#xff0c;它具有双面显示屏幕&#xff0c;可以同时向两个方向展示广告或信息。这种设备被广泛应用于各种场景&#xff0c;例如&#xff1a; 商业展示&#xff1a;在大型商业场所&#xff0c;如购物中心、百货商场等&#xff0c;OLED双…

WPS导出的PDF比较糊,和原始的不太一样,将带有SVG的文档输出为PDF

一、在WPS的PPT中 你直接输出PDF可能会导致一些问题&#xff08;比如照片比原来糊&#xff09;/ 或者你复制PPT中的图片到AI中类似的操作&#xff0c;得到的照片比原来糊&#xff0c;所以应该选择打印-->高级打印 然后再另存为PDF 最后再使用AI打开PDF文件再复制到你想用…

redis单机版本安装

redis单机版本安装 1.redis单机版源码编译安装搭建(4.0示例) redis下载地址 https://redis.io/download redis源码编译 #!/bin/sh yum install -y wget gcc gcc-c make tar openssl openssl-devel cmakecd /usr/local/src wget http://download.redis.io/releases/redis-4…