国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

bootstrap table動態加載數據示例代碼

2019-11-19 17:02:24
字體:
來源:轉載
供稿:網友

我最近在研究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();}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 镇安县| 乌拉特中旗| 鄂尔多斯市| 宜宾县| 通化县| 黄石市| 牙克石市| 乌拉特前旗| 普定县| 柳林县| 弥渡县| 扎赉特旗| 三明市| 芜湖县| 上栗县| 丰都县| 小金县| 沙洋县| 鄱阳县| 余干县| 轮台县| 平陆县| 罗甸县| 肥城市| 肇州县| 交城县| 睢宁县| 宕昌县| 寿宁县| 大悟县| 蓬溪县| 静宁县| 中宁县| 塘沽区| 通州市| 湟中县| 奉新县| 贺州市| 隆林| 海安县| 岳阳县|