我最近在研究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")@ResponseBodypublic void findKey(HttpServletResponse response,HttpServletRequest request) throws IOException{ List<Key> keys = null; keys=menuService.findKey(wxid); Map<String, Object> jsonMap = new HashMap<String, Object>();// 定義mapjsonMap.put("keys", keys);// rows鍵 存放每頁記錄 listJSONObject result = JSONObject.fromObject(jsonMap);// 格式化resultresponse.setContentType("text/html;charset=utf-8");PrintWriter writer = response.getWriter();writer.write(result.toString());writer.flush();}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答