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

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

话不多说,有图有源码

1.看图

2.前端实现页面

{% from "common/_macro.html" import static %}






















	
Bootstrap-Table 多行编辑保存
	

		

			

				

					

					保存
				
			
		
	
	

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 '';}}]"""
    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)
#=============================================================

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