我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧!
效果如下:
点击选择按钮,弹出模态框,加载出关键词列表
TABLE样式:
rush:xhtml;">
请求内容
dismiss="modal">×
JAVASCRIPT脚本:
rush:js;">
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样式中的标签里的内容挪到这里面:
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:"刷新数据失败!"});
}
})
}
rush:js;">
@RequestMapping(value="findKey")
@ResponseBody
public void findKey(HttpServletResponse response,HttpServletRequest request) throws IOException{
List keys = null;
keys=menuService.findKey(wxid);
Map jsonMap = new HashMap();// 定义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();
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
相关文章
Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...