bootstrap获取表格中选中⾏的值_bootstrapTable：获取选中
⾏的数据
{#varDatalist='{{ datalist|safe }}';//获取后台传来的数据需要加上safe过滤#}
{#datalist=[[93,93,0,100.0],[20,23,26,29]]#}
{#varaaa=JSON.parse('{{ datalist|safe }}');#}
{# alert(aaa);#}
$('#mytab').bootstrapTable({
{#全部参数#}
{#url:"{% static 'guchen_obj.json' %}",//请求后台的URL(*)或者外部json⽂件，json内容若为json数组[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，#}
//且键的名字必须与下⽅columns的field值⼀样，同时sidePagination需要设置为client或者直接注释掉，这样前台才能读取到数据，且分页正常。
//当json⽂件内容为json对象时：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}，
//分页要写为server，但是server如果没有处理的话，会在第⼀页显⽰所有的数据，分页插件不会起作⽤
url:"/get_smoke_data",//从后台获取数据时，可以是json数组，也可以是json对象
dataType:"json",
method:'get',//请求⽅式(*)
toolbar:'#toolbar',//⼯具按钮⽤哪个容器
striped:true,//是否显⽰⾏间隔⾊
cache:false,//是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性(*)
pagination:true,//是否显⽰分页(*)
sortable:true,//是否启⽤排序
sortOrder:"asc",//排序⽅式
{#queryParams: oTableInit.queryParams,//传递参数(*)#}
{#sidePagination:"server",//分页⽅式：client客户端分页，server服务端分页(*)，数据为json数组时写client，json对象时(有total和rows时)这⾥要为server⽅式，写client列表⽆数据#}
pageNumber:1,//初始化加载第⼀页，默认第⼀页
pageSize:5,//每页的记录⾏数(*)
pageList: [10,25,50,100],//可供选择的每页的⾏数(*)
{#search:true,//是否显⽰表格搜索，此搜索是客户端搜索，不会进服务端，所以，个⼈感觉意义不⼤#}
strictSearch:true,
showColumns:true,//是否显⽰所有的列
showRefresh:true,//是否显⽰刷新按钮
minimumCountColumns:2,//最少允许的列数
clickToSelect:true,//是否启⽤点击选中⾏
{#height:500,//⾏⾼，如果没有设置height属性，表格⾃动根据记录条数觉得表格⾼度#}
uniqueId:"ID",//每⼀⾏的唯⼀标识，⼀般为主键列
showToggle:false,//是否显⽰详细视图和列表视图的切换按钮
cardView:false,//是否显⽰详细视图
detailView:false,//是否显⽰⽗⼦表
idField:'project_name',//指定主键
singleSelect:true,//开启单选，想要获取被选中的⾏数据必须要有该参数
//得到查询的参数
queryParams:function(params) {//这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的varquery_params={
rows: params.limit,//页⾯⼤⼩
page: (params.offset/params.limit)+ 1,//页码
sort: params.sort,//排序列名
sortOrder: der,//排位命令(desc，asc)
//查询框中的参数传递给后台
search_kw: $('#search-keyword').val(),//请求时向服务端传递的参数
};returnquery_params;
},
columns: [
{
checkbox:true //第⼀列显⽰复选框
},
{
field:'project_name',//返回数据rows数组中的每个字典的键名与此处的field值要保持⼀致
title:'项⽬名'},
{
bootstrap项目
field:'version',
title:'版本'},
{#{#}
{# field:'submit_test_time',//需要序列化，暂时隐藏#}
{# title:'转测时间'#}
{# },#}
{
field:'case_num',
title:'⽤例总数'},
{
field:'executed_num',
title:'已执⾏'},
{
field:'pass_num',
title:'通过数'},
{
field:'fail_num',
title:'失败数'},
{
field:'operate',
title:'操作',
width:120,
align:'center',
valign:'middle',
formatter: actionFormatter,
},
],
});//操作栏的格式化,value代表当前单元格中的值，row代表当前⾏数据，index表⽰当前⾏的下标functionactionFormatter(value, row, index) {varid=index;varresult= "";
result+= "";
{#result+= "";#}
{#result+= "";#}
result+= "";
result+= "";returnresult;
}//怎么能把row作为参数传递到该函数，然后使⽤row.project_name的⽅法取出原有的值，再做修改functionEditViewById(project_name,case_num, index){
alert(project_name)
alert(case_num)
{#alert(index)#}//填充数据到模态框
$("#submit_test_time").val(project_name);
$("#case_num").val(case_num)//弹出模态框
$('#myModal').modal('show')
}functionedit(){//获取当前⾏
varrow=$("#mytab").bootstrapTable('getSelections');
{#console.log(row)#}
alert(row[0].project_name)
}//搜索查询按钮触发事件
$(function() {
$("#search-button").click(function() {
$('#mytab').bootstrapTable(('refresh'));//很重要的⼀步，刷新url！$('#search-keyword').val('')
})
})//选择时间⽇期
$(function() {
$('#datetimepicker2').datetimepicker({
format:'YYYY-MM-DD hh:mm',
locale: moment.locale('zh-cn')
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。