點選選擇按鈕，彈出模態框，加載出關鍵詞列表

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)" 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();
}
 

-----------------------------------------------------------------------------------------------------

http://www.qdfuns.com/notes/25704/0ecd59012e0aeb96ede668fcdc88fd69.html

http://blog.csdn.net/lzx_longyou/article/details/50563907