我要评论我最近在研究bootstrap的学习路上，那么今天也算个学习笔记吧！
效果如下：
点击选择按钮，弹出模态框，加载出关键词列表
table样式：
<div class="modal fade " id="clickmodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button onclick="colseclickmodal()" class="close" type="button" data-dismiss="modal">×</button>
<h2 id="mymodallabel">关键词表</h2>
</div>
<div class="modal-body" style="height:310px">
<table class="table table-hover"id="clicktable" >
<thead>
<tr>
<th id="gjc" data-field="id" data-sortable="true">
关键词 <a style="color:red">(双击选择)</a>
</th>
<th data-field="requestconetent" >
请求内容
</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" rel="external nofollow" onclick="colseclickmodal()" class="btn">关闭</a>
</div>
</div>
</div>
</div>
javascript脚本：
function choosebtn1(){
$.ajax({
type:"post",
url:'wxgl/findkey',
success:function(data){
var datajson = eval('(' + data + ')');
var datalist = datajson.keys;
$('#clicktable').bootstraptable('destroy').bootstraptable({ //'destroy' 是必须要加的==作用是加载服务器// //数据，初始化表格的内容destroy the bootstrap table.
data:datalist, //datalist 即为需要的数据
datatype:'json',
data_locale:"zh-us", //转换中文 但是没有什么用处
pagination: true,
pagelist:[],
pagenumber:1,
pagesize:5,//每页显示的数量
paginationpretext:"上一页",
paginationnexttext:"下一页",
paginationloop:false,
//这里也可以将table样式中的<tr>标签里的内容挪到这里面：
columns: [{
checkbox: true
},{
field: 'id',
title:'关键词 ',
valign: 'middle',
},{
field: 'requestconetent',
title:'请求内容'
}]
ondblclickcell: function (field, value,row,td) {
console.log(row);
$('#msgid').val(row.id);
$('#clickmodal').modal('hide');
}
});
$('#clickmodal').modal('show');
},error:function(data){
modal.confirm({title:'提示',msg:"刷新数据失败!"});
}
})
}
在脚本中调用的findkey方法:
@requestmapping(value="findkey")
@responsebody
public void findkey(httpservletresponse response,httpservletrequest request) throws ioexception{
list<key> keys = null;
keys=menuservice.findkey(wxid);
map<string, object> jsonmap = new hashmap<string, object>();// 定义map
jsonmap.put("keys", keys);// rows键 存放每页记录 list
jsonobject result = jsonobject.fromobject(jsonmap);// 格式化result
response.setcontenttype("text/html;charset=utf-8");
printwriter writer = response.getwriter();
writer.write(result.tostring());
writer.flush();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论