bootstrap table动态加载**示例代码

时间：2017.04.19 发布人：tonghappy6

已解决问题

谷歌tonghappy6用户在2017.04.19提交了关于“钵钵鸡bootstrap table动态加载**示例代码”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-11-06T22:05:25。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，你是我的宝贝,你是我的花,谢谢你对我的帮助！

希望以下的回答，能够帮助你。

第1个回答

用户名：j7njmz 时间：2017.04.20

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

效果如下：

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

TABLE样式买掌径丰伤孩注缺含：

<divclass="modalfade"id="ClickModal"tabindex="-1"role="dialog"aria-labelledby="myModalL来自abel"aria-hidden="true"><divclas问答s="modal急-dialog"><divclass="modal-content"><divclass="modal精收难衣品凯伯密打国-header"><bu挥大当台ttononclick="colseClickModal()"class=除另块范粉杨犯发烈轴"close"type=月总题架策误剂抗沙文"button"da施换右形玉好敌ta-di**iss="modal">×</button><h2id="myModalLabel">关键词表</h2></div><divclass="modal-body"style="height:310px"><tablecl轻攻身陈科用究ass="tabletable-hover"id=景面施化班穿案"ClickTab社每出分略列米le"><thead><tr><t不奏样背掉胞义犯事须hid="gjc"data-field="ID"data-sortable="true">关键词<astyle="color:red">(双击选择)</a></th><thdata-field="REQUESTC种钱装兰ONETENT">请求内容</th></tr></thead></table></div><d蒸介系误换路ivclass="m之例林依拉曲跟受投神odal-foot真空点革er"><ahref="J**ascript:void(0)"rel="externa庆宁孩回制妈养委木每lnofollow"onclick="colseClickModal()"class="btn">关闭</a></div></div></div></div>

J**Ascript脚本：

functionchooseBtn1(){$.ajax({type:"POST",url:'wxgl/findKey',success:function(data){vardataJson=eval('('+data+')');vardatalist=dataJson.keys;$('#ClickTable').bootstrapTable('destroy').bootstrapTable({//'destroy'是必须要加的==作用是加载服务器////**，初始化表格的内容Destroythebootstraptable.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")@ResponseBodypublicvoidfindKey(h**ttpServletResponseresponse,h**ttpServletRequestrequest)throwsIOException{List<Key>keys=**ll;keys=me**Service.findKey(wxid);Map<String,Object>jsonMap=newh**ashMap<String,Object>();//定义mapjsonMap.put("keys",keys);//rows键存放每页记录listJSONObjectresult=JSONObject.fromObject(jsonMap);//格式化resultresponse.setContentType("text/html;charset=utf-8");PrintWriterwriter=response.getWriter();writer.write(result.toString());writer.flush();}

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