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

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

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

时间: 2017-03-24

bootstrap table实现单击单元格可编辑功能

要使bootstrap-table实现可编辑,需要配合使用x-editable插件. 先在页面上导入必要的css和js文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <

bootstrap table sum总数量统计实现方法

写了一个分页要显示数据中所有金额的总数 但是使用footerformatter 却不知道该怎么赋值 没办法只能放到页脚了 先上个效果图: 这样做要修改源码: bootstrap-table.js 1:定义一个名称 2: 3: 4: 5: 如果你在后台传过来值和第一步中引号内的值一样的时候就会出现如下效果图 最后返回json样式是这样的: {"total":2,"rows":[{"id":1,"categoryid":11,&q

Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能

最终实现效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animat

bootstrap table表格使用方法详解

本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapTable({options})显示表格样式. 感觉还是挺漂亮的哈,OK,下面贴代码解释功能. 开始之前,当然要引用js啦 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <lin

Bootstrap table使用方法总结

最近接触一个很棒的插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛. 构造方式 1 .HTML <div class="btn-group hidden-xs"id="exampleTableEventsToolbar" > //定义一系列工具栏... </div> <table data-toggle="ta

bootstrap table表格插件使用详解

bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl

BootStrap中Table分页插件使用详解

分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

第十篇BootStrap轮播插件使用详解

Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果图如下所示: 关键代码如下: <div id="carousel-example-generic" c

BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl

bootstrap table表格插件之服务器端分页实例代码

Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头.单复选.排序.分页.搜索以及自定义表头等功能. 因公司的项目需要实现用户管理的表格实现,所以选用了bootstrap-table用于动态获取后台的用户数据显示到前台. 示例截图: 客户端代码: //引入的css文件 <link href="../public/static/css/bootstrap.min.css" rel="external nofo

值得分享的轻量级Bootstrap Table表格插件

基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS

bootstrap PrintThis打印插件使用详解

bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法. 附上GitHub:https://github.com/jasonday/printThis jsp: <script src="<%=basePath %>bootstrap/js/printThis.js"></script> <!-- 二维码弹出框 --> <div class=

Bootstrap模态框插件使用详解

本文主要学习Bootstrap 中的模态框插件,这是一款交互式网站非常常见的弹窗功能插件. 1.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层).dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). 结合具体演示来理解如下内容: <!-- 模态框的声明 class="modal show" 显示模态框 fade淡入淡出效果--> <