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 开源插件套装 完全替代ExtJS
Mar 24 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
详解Node.js开发中的express-session
May 19 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
Electron 调用命令行(cmd)
Sep 23 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php 强制下载文件实现代码
2013/10/28 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
ubuntu安装mysql pycharm sublime
2018/02/20 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
什么是python的必选参数
2020/06/21 Python
python中format函数如何使用
2020/06/22 Python
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
集中整治工作方案
2014/05/01 职场文书
社区党建工作方案
2014/06/10 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android