微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

效果如下:

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

TABLE样式:

rush:xhtml;">

JAVASCRIPT脚本:

rush:js;"> 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样式中的标签里的内容挪到这里面: 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方法:

rush:js;"> @RequestMapping(value="findKey") @ResponseBody public void findKey(HttpServletResponse response,HttpServletRequest request) throws IOException{ List keys = null; keys=menuService.findKey(wxid); Map jsonMap = new HashMap();// 定义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(); }

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐