bootstrap table动态加载数据示例代码
程序员文章站
2023-11-20 16:21:10
我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧!
效果如下:
点击选择按钮,弹出模态框,加载出关键词列表
table样式:...
我最近在研究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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: vue打包使用Nginx代理解决跨域问题