bootstrap table学习小记

最新推荐文章于 2024-04-12 20:46:50 发布

mht1829

最新推荐文章于 2024-04-12 20:46:50 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： python bootstrap

本文链接：https://blog.youkuaiyun.com/mht1829/article/details/52027714

本文介绍如何使用Bootstrap构建可编辑的表格，并实现前后端交互。包括引入必要的资源文件、配置表格属性、定义前后端函数等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

step1：引入相应的js和css

<div style="text-align: left;"><span style="font-family:Times New Roman;"><link href="/static/css1/bootstrap.min.css" rel="stylesheet"></span></div><div style="text-align: left;"><span style="font-family:Times New Roman;"><link href="/static/css1/bootstrap-table.css" rel="stylesheet"></span></div><div style="text-align: left;"><span style="font-family:Times New Roman;"><link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"></span></div><span style="font-family:Times New Roman;"><script src="/static/js1/bootstrap.min.js"></script>
<script src="/static/js1/bootstrap-table.js"></script>
</span><div style="text-align: left;"><span style="font-family:Times New Roman;"><script src="/static/js1/bootstrap-table-editable.js"></script></span></div><span style="font-family:Times New Roman;"><script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
</span><div style="text-align: left;"><span style="font-family:Times New Roman;"><script src="/static/js1/bootstrap-table-zh-CN.js"></script> </span></div>

step2：初始化表格

<span style="font-family:Times New Roman;"><table id="table"></table>
……
 $(function () {
	$('#table').bootstrapTable({
        url: '/control/userssource1/',     //请求后台的URL（*）
        method: 'post',           //请求方式（*）
        toolbar: '#toolbar',        //工具按钮用哪个容器
        striped: true,           //是否显示行间隔色
        cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,          //是否显示分页（*）
        sortable: false,           //是否启用排序
        sortOrder: "asc",          //排序方式
        queryParams: postQueryParams,//传递参数（*）
        sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
        pageNumber:1,            //初始化加载第一页，默认第一页
        pageSize: 10,            //每页的记录行数（*）
        pageList: [10, 25, 50, 100],    //可供选择的每页的行数（*）
        strictSearch: true,
        clickToSelect: true,        //是否启用点击选中行
        height: 460,            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        uniqueId: "id",           //每一行的唯一标识，一般为主键列
        cardView: false,          //是否显示详细视图
        detailView: false,          //是否显示父子表
		search:true,               //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
		strictSearch: true,
		showColumns: true,     //是否显示所有的列
		showRefresh: true,     //是否显示刷新按钮
		minimumCountColumns: 2,    //最少允许的列数
		clickToSelect: true,    //是否启用点击选中行
		contentType:"application/x-www-form-urlencoded",//传到后台的数据格式，必须设置成这个，否则后台不能获取前台的参数(*)
		onEditableSave: function (field, row, oldValue, $el) {
//四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
				$.ajax({
                    type: "post",
					contentType:"application/x-www-form-urlencoded",
                    url: "/control/edit/",
                    //data: { strJson: JSON.stringify(row) },
					data: { "usrid": row.usrid,"realname":row.realname,"realname":row.realname,"phone":row.phone,"email":row.email,"address":row.address,"gender":row.gender },
                    success: function (data, status) {
                        if (status == "success") {
                            alert("编辑成功");
                        }
                    },
                    error: function () {
                        alert("Error");
                    },
                    complete: function () {

                    }
					});
            },
        columns: [{
          field: 'id',
          title: '序号' 
        }, {
          field: 'name',
          title: '用户名'
        }, {
          field: 'unit',
          title: '部门'
        }, {
          field: 'usrid',
          title: '用户编号'
        }, {
          field: 'admin',
          title: '用户级别'
        }, {
          field: 'unitname1',
          title: '所属铁路局'
        }, {
          field: 'unitname2',
          title: '所属电务段'
        }, {
          field: 'realname',
          title: '用户姓名',
		  editable:true
        }, {
          field: 'gender',
          title: '用户性别',
		  editable:true
        },{
          field: 'phone',
          title: '联系电话',
		  editable:true
        },{
          field: 'email',
          title: '电子邮箱',
		  editable:true
        },{
          field: 'address',
          title: '联系地址',
		  editable:true
        },]

	});
    });</span>

step3：编写表格的后台函数

<span style="font-family:Times New Roman;">def userssource1(request):
    userlist=[]
    keywords = request.POST.get('keywords','')
    username = request.session.get('uname','null')
    limit = request.POST.get('limit','')
    offset = request.POST.get('offset','')
    offset = int(offset)
    limit = int(limit)
    unitid=request.POST.get('unit','')
    userid= Users.objects.filter(name=username)[0].userid
    userlefts = Users.objects.filter(unit=unitid)[offset:offset+limit]

    length=Users.objects.filter(unit=unitid).count()
    for usr in userlefts:
        user_id=usr.id
        if len(UserUnitPrivs.objects.filter(useridx=user_id)):
            if len(UserUnitPrivs.objects.filter(useridx=user_id)[0].unitidx)==2:
                user_unitidx=UserUnitPrivs.objects.filter(useridx=user_id)[0].unitidx
                #print user_unitidx
                unitname1=Unit.objects.filter(unitidx2=user_unitidx)[0].name1
                unitname2=Unit.objects.filter(unitidx2=user_unitidx)[0].name2
                admin=get_user_privs(usr.userid)
                c ={'id':usr.id,'name':usr.name,'unit':usr.unit,'usrid':str(usr.userid),'admin':admin,'unitname1':unitname1,'unitname2':unitname2,'realname':usr.real_name,'gender':usr.gender,'phone':usr.tel_num,'email':usr.email,'address':usr.address}            
                userlist.append(c)
    data='{"total":%s,"rows":%s}' % (length,simplejson.dumps(userlist,ensure_ascii=False))
   <span style="color:#ff0000;"> #如果是服务端分页，返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。</span>
    return HttpResponse(data,mimetype='text/javascript;')
	  </span>

step4：编写可编辑的表格

<span style="font-family:Times New Roman;">onEditableSave: function (field, row, oldValue, $el) {
//四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
				$.ajax({
                    type: "post",
					contentType:"application/x-www-form-urlencoded",
                    url: "/control/edit/",
                    //data: { strJson: JSON.stringify(row) },
					data: { "usrid": row.usrid,"realname":row.realname,"realname":row.realname,"phone":row.phone,"email":row.email,"address":row.address,"gender":row.gender },
                    success: function (data, status) {
                        if (status == "success") {
                            alert("编辑成功");
                        }
                    },
                    error: function () {
                        alert("Error");
                    },
                    complete: function () {

                    }
					});
            },</span>

step6：可编辑表格的后台函数

<span style="font-family:Times New Roman;">def edit(request):
    s_dict={}
    msg = {}
    usrid=request.POST.get('usrid','')
    useredit = Users.objects.get(userid=usrid)
    useredit.gender=request.POST.get('gender','')
    gender=request.POST.get('gender','')
    useredit.phone=request.POST.get('phone','')
    useredit.email=request.POST.get('email','')
    useredit.address=request.POST.get('address','')
    useredit.realname = request.POST.get('realname','')
    useredit.save()
    s_dict['status']='success'
    msg['result']=s_dict
    return HttpResponse(simplejson.dumps(msg,ensure_ascii=False))</span>