bootstrap table動(dòng)態(tài)加載數(shù)據(jù)示例代碼
我最近在研究bootstrap的學(xué)習(xí)路上,那么今天也算個(gè)學(xué)習(xí)筆記吧!
效果如下:
點(diǎn)擊選擇按鈕,彈出模態(tài)框,加載出關(guān)鍵詞列表
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">關(guān)鍵詞表</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"> 關(guān)鍵詞 <a style="color:red">(雙擊選擇)</a> </th> <th data-field="REQUESTCONETENT" > 請(qǐng)求內(nèi)容 </th> </tr> </thead> </table> </div> <div class="modal-footer"> <a href="JavaScript:void(0)" rel="external nofollow" onclick="colseClickModal()" class="btn">關(guān)閉</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' 是必須要加的==作用是加載服務(wù)器// //數(shù)據(jù),初始化表格的內(nèi)容Destroy the bootstrap table. data:datalist, //datalist 即為需要的數(shù)據(jù) dataType:'json', data_locale:"zh-US", //轉(zhuǎn)換中文 但是沒有什么用處 pagination: true, pageList:[], pageNumber:1, pageSize:5,//每頁顯示的數(shù)量 paginationPreText:"上一頁", paginationNextText:"下一頁", paginationLoop:false, //這里也可以將TABLE樣式中的<tr>標(biāo)簽里的內(nèi)容挪到這里面: columns: [{ checkbox: true },{ field: 'ID', title:'關(guān)鍵詞 ', valign: 'middle', },{ field: 'REQUESTCONETENT', title:'請(qǐng)求內(nèi)容' }] 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:"刷新數(shù)據(jù)失敗!"}); } }) }
在腳本中調(diào)用的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(); }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序日期增加時(shí)間完成訂單失效倒計(jì)時(shí)效果
這篇文章主要介紹了微信小程序日期增加時(shí)間完成訂單失效倒計(jì)時(shí)效果,在我們?nèi)粘Y徫镞^程中經(jīng)常會(huì)遇到這樣的功能,本文通過示例代碼給大家詳細(xì)講解,需要的朋友參考下吧2024-04-04javascript下對(duì)于事件、事件流、事件觸發(fā)的順序隨便說說
向同一個(gè)標(biāo)簽 動(dòng)態(tài)的添加事件是 執(zhí)行的順序在ie和其他非ie內(nèi)核的瀏覽器有所不同 ie是“先進(jìn)先出 ” 就是最先添加的最先執(zhí)行,其他非ie內(nèi)核的瀏覽器是 “先進(jìn)后出”,就是 最后添加的事件 先執(zhí)行。2010-07-07對(duì)于input 框限定輸入值為浮點(diǎn)型的js代碼
下面小編就為大家?guī)硪黄獙?duì)于input 框限定輸入值為浮點(diǎn)型的js代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09JS簡單實(shí)現(xiàn)禁止訪問某個(gè)頁面的方法
這篇文章主要介紹了JS簡單實(shí)現(xiàn)禁止訪問某個(gè)頁面的方法,涉及基本的頁面跳轉(zhuǎn)操作技巧,需要的朋友可以參考下2016-09-09CocosCreator入門教程之網(wǎng)絡(luò)通信
這篇文章主要介紹了CocosCreator的網(wǎng)絡(luò)通信,內(nèi)容不多,涉及到的細(xì)節(jié),讀者可以根據(jù)實(shí)際情況,自己去延申2021-04-04js中根據(jù)字?jǐn)?shù)截取字符串,不能截?cái)鄒rl
給一個(gè)文字,對(duì)輸出的文字進(jìn)行截取,保留400個(gè)字符,其中對(duì)url的保留比較麻煩,尤其是有兩個(gè)相同url時(shí)不能采用indexOf獲取其字符位置2012-01-01