bootstrap table动态加载数据示例代码

所属分类: 网络编程 / JavaScript 阅读数: 1033
收藏 0 赞 0 分享

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

验证javascript中Object和Function的关系的三段简单代码

今天重温经典书籍。这一次看的是博客园李战老师写的<<悟透JavaScript>>,也是被楼猪翻看最多的技术书籍之一。
收藏 0 赞 0 分享

用apply让javascript函数仅执行一次的代码

有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢?简单模仿下面这段就可以轻松搞定了
收藏 0 赞 0 分享

两种简单实现菜单高亮显示的JS类代码

近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.
收藏 0 赞 0 分享

js getElementsByTagName的简写方式

用最少的代码,做最多的事情. getElementsByTagName的简写方法.
收藏 0 赞 0 分享

JavaScript的单例模式 (singleton in Javascript)

JavaScript的单例模式 (singleton in Javascript)
收藏 0 赞 0 分享

JavaScript接口实现代码 (Interfaces In JavaScript)

接口是面向对象编程里的重要特性,遗憾的是JavaScript并没有提供对接口的支持!怎么实现接口呢?
收藏 0 赞 0 分享

js鼠标左右键 键盘值小结

js鼠标左右键,键盘值实现代码,主要方便检测鼠标的按键返回。
收藏 0 赞 0 分享

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用。
收藏 0 赞 0 分享

cnblogs TagCloud基于jquery的实现代码

自创"山寨版"的"博客园"TagCloud!...
收藏 0 赞 0 分享

JavaScript 开发规范要求(图文并茂)

作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。
收藏 0 赞 0 分享
查看更多