幽灵资源网 Design By www.bzswh.com
我最近在研究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();
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。

