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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
JS实现星星海特效
Dec 24 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
python文件和目录操作函数小结
2014/07/11 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
财务人员求职自荐书范文
2014/02/10 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
2014年材料员工作总结
2014/11/19 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
大学生自我评价范文
2015/03/03 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS