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

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

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

效果如下：

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

TABLE样式：

关键词 (双击选择)

请求内容

Gzdoxa

关键词 (双击选择)

请求内容

Gzdoxa

<a href="javascript:void(0)" rel="external nofollow" onclick="colseClickModal()" class="btn">关闭

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样式中的

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 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();

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。