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


Posted in Javascript onMarch 25, 2017

我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧!

效果如下:

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

点击选择按钮,弹出模态框,加载出关键词列表

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

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 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
js保留小数点后几位的写法
Jan 03 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 #Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 #Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 #Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 #Javascript
JS实现列表页面隔行变色效果
Mar 25 #Javascript
angular仿支付宝密码框输入效果
Mar 25 #Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
You might like
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
Symfony的安装和配置方法
2016/03/17 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
javascript截取字符串小结
2015/04/28 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
保安队长职务说明书
2014/02/23 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android