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操作JSON实例代码
Feb 09 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
javascript常用对话框小集
Sep 13 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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安装攻略:常见问题解答(三)
2006/10/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python3多线程操作简单示例
2018/05/22 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
Java基础知识面试要点
2016/07/29 面试题
网络安全方面的面试题
2016/01/07 面试题
事业单位辞职信范文
2014/01/19 职场文书
学习张林森心得体会
2014/09/10 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
2016春节家属慰问信
2015/03/25 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2015年暑假工作总结
2015/07/13 职场文书
导游词之五台山
2019/10/11 职场文书