前端入门
Jquery入门
遍历
// 对象方法可以使用 $("input.class").each(function(){ alert($(this).text()) }); //对象方法不可以使用，会报错 for(var i=0;i<$("input.class").length;i++){ $("input.class")[i].val("1"); #会报错 } //不可遍历对象数组 $("input.class").forEach(function(item)){ item.val("1") }
BootstrapTable入门
API：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
官网教程：https://bootstrap-table.com/docs/getting-started/introduction/
简单使用：
1、在当前表格的最后新增数据
var _data = { "name" : name, ...//some datas "desc" : desc } $("#table_Id").bootstrapTable('append', _data);//_data----->新增的数据
2、在当前表格的首行新增数据
var _data = { "name" : name, ...//some datas "desc" : desc } $("#table_Id").bootstrapTable('prepend', _data);//_data----->新增的数据
3、根据id删除行
var ids = [];//定义一个数组 ids.push(id);//将要删除的id存入数组 $("#table_Id").bootstrapTable('remove', {field: 'id', values: ids});//field:根据field的值来判断要删除的行 values：删除行所对应的值
4、删除所有数据
$("#table_Id").bootstrapTable('removeAll');
5、更新指定行的数据
var _data = { "name" : name, ...//some datas "desc" : desc } $('#table_Id').bootstrapTable('updateRow', {index: index, row: _data});//index---->更新行的索引。row---->要更新的数据
6、更新指定的列数据
var rows = { index : index, //更新列所在行的索引 field : "status", //要更新列的field value : "正常" //要更新列的数据 }//更新表格数据 $('#table_Id').bootstrapTable("updateCell",rows);
7、重新加载数据（分页的时候要注意参数的传递）
var opt = { url: "abc.htm", //重新请求的链接 silent: true, ..... //可以加一些请求的参数 }; //重新加载数据 $("#table_Id").bootstrapTable('refresh',opt);
更新行
按索引更新行
$('#table').bootstrapTable('updateRow', {index: "要更新的索引", row: "要更新的数据"});
按唯一ID更新行
$('#table').bootstrapTable("updateByUniqueId", {id: item.id, row: item});
刷新数据
针对以data加载数据的bootstrapTable
$("#tableID").bootstrapTable("load", data);
针对以url加载数据的bootstrapTable
$("#tableID").bootstrapTable("refresh");
注意：当bootstrap要求分页时，数据格式要求
{"total": '数据一共多少条', "rows": '所有数据'}
修改参数刷新
$('#item_table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
$("#refresh_button").click(function (){
var opt = {
url: "http://local/api/data/?format=json",
silent: true,
query:{
type:1,
level:2
}
};
$("#item_table").bootstrapTable('refresh', opt);
});
BootstrapTable字段
url: url, //请求后台的URL（*） method: 'post', //请求方式（*） toolbar: toolbar, //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: queryParams, //传递参数（*），这里应该返回一个object，即形如{param1:val1,param2:val2} sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 20, //每页的记录行数（*） pageList: [20, 50, 100], //可供选择的每页的行数（*） search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表
服务端分页
前端修改
$('#table').bootstrapTable({
url: '/',
method: 'post',
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
offset: params.offset,//从数据库第几条记录开始
limit: params.limit,//找多少条
csrfmiddlewaretoken: '{{ csrf_token }}' //django的csrf_token
};
},
pagination: true, //表格底部显示分页条
sidePagination: "server",
escape: false, //启动转义字符
pageSize: 20, //每页显示多少条数据
pageNumber: 1, //初始化翻页的页码
pageList: [20,],
contentType : "application/x-www-form-urlencoded", //发送到服务器的数据编码类型
dataType: "json",
}）
后端修改
def list_program(request): offset = int(request.POST.get("offset")) limit = int(request.POST.get("limit")) Program_list = Program.objects.all().values()[offset:offset + limit] Program_total = Program.objects.all().count() return JsonResponse({"total": Program_total, "rows": list(Program_list)})
回调函数
Bootstarp Table提供了丰富的Events和Mebthods (详情查阅Bootstarp Table官方文档)，这边只介绍两个回调函数。
onLoadSuccess
此方法在Bootstarp Table数据成功加载返回后触发，参数为data（注意:data传入的数据是分页后的数据，并不是所有查询出来的数据，如果limit为10，那么就是10条数据），此时表格行数据尚未渲染，此时可以对数据进行更新或取值操作。
$('#table').bootstrapTable({
url: "/oneButtonAlarm/alarm/list/",
method: 'post',
queryParams: function (params) {
return {
"offset": params.offset,//从数据库第几条记录开始
"limit": params.limit,//找多少条
"project_id": $("#project_select").val(),
"status": $("#status_select").val(),
"csrfmiddlewaretoken": '{{ csrf_token }}'
};
},
escape: false, //启动转义字符
dataType: "json",
contentType: "application/x-www-form-urlencoded", //发送到服务器的数据编码类型
sidePagination: "server",
onLoadSuccess: function (data) {
...
{#return data;#}
},
});
此方法在Bootstarp Table 行数据渲染后触发，参数为data，此时要注意，如果执行了上面的updateRow操作，由于表格刷新了，所以又会触发onPostBody()，然后会陷入死循环，导致页面数据一直加载不出来。
总结：如果回调只是获取行数据，做一些逻辑，不涉及表格更新操作，可以使用onPostBody()，否则要使用onLoadSuccess()
ResponseHandler
url下载完数据后，响应结果处理函数
$('#table').bootstrapTable({
url: "/xxx/",
method: 'post',
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
offset = params.offset;//从数据库第几条记录开始
limit = params.limit;
return {//这里的params是table提供的
'offset': params.offset,//从数据库第几条记录开始
'limit': params.limit,//找多少条
'csrfmiddlewaretoken': '{{ csrf_token }}'
};
},
responseHandler: function (res) {
...
return res;
},
});
浙公网安备 33010602011771号