BootStrapTable(一) -- 怎么解析嵌套Json数据

bootStrapTable只支持{“id”:”123”,”name”,”tom”}这种类型的数据解析,如果后台传入复杂 JSON 数据 , 他是不支持的 , 这时候就需要把获取的数据分解 .

例如 我的 JSON 数据的格式是

{"rows":[{"coursename":"123456798","createtime":"2017-04-14 16:45:00.0","id":"6d84789302cf4cc993c0eaadc74a7464","remark":"123456789","stuid":"536eaf873b8"},{"coursename":"123","createtime":"2017-04-14 16:44:59.0","id":"17d7104c6bd9477ab7c9c54c5c35571e","remark":"123456789","stuid":"536eaf873b8"},{"coursename":"1","dictionaryid":"18","id":"1","stuid":"1"}],"total":3}

这是 easyui 支持的格式 , 但 bootStrap 并不支持 , 而且在后台已经做了封装 , 并不能改变他返回数据的格式 . 这个时候只能在前台处理 , 把 json 转换成数组(实际上 JSON 就是数组) .

$.ajax({
url : "${pageContext.request.contextPath}/system/course!selectPage.action",
type : "post",
dataType : "json",
success : function(value) {

var obj = [];
$.each(value.rows, function(i, d) {

obj.push(d);
// alert(obj.coursename);
});
/*  for (var i = 0; i < value.length; i++) {
alert(2);
obj.push(value.rows[i]);
//<span style="font-family: Arial, Helvetica, sans-serif;">
//</span><span style="font-family: Arial, Helvetica, sans-serif;">
//由于传回的JSON数据是被封装成了一个Object类型的数据传回，所以这里需要用一个数组类型接收</span>
}   */
$table = $('#tt').bootstrapTable(
{
data : obj, //最终的JSON数据放在这里

height : $(window).height() - 100,

toolbar : '#toolbar',

striped : true,

pagination : true,

pageNumber : 1,

pageSize : 10,

pageList : [ 5, 10, 20 ],

search : true,
searchAlign : 'left',
//showRefresh: true,

showExport : true, //是否显示导出

exportDataType : "selected", //basic', 'all', 'selected'.

sidePagination : "client",

editable : true,

showColumns : true,
clickToSelect : true,
showToggle : true, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false,

minimunCountColumns : 2,

rowStyle : function(row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有一个active
} else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
} else {
return {};
}
return {
classes : strclass
}
},
onEditableSave : function(field, row,
oldValue, $el) {
$.ajax({
type : "post",
url : "/Editable/Edit",
data : {
strJson : JSON.stringify(row)
},
success : function(data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error : function() {
alert("Error");
},
complete : function() {

}
});
},
columns : [
{
checkbox : true
},
{
field : 'number',//可不加
title : '序号',//标题  可不加
formatter : function(value,
row, index) {
return index + 1;
}
}, {

field : 'id', //列ID同时也是指定要显示的数据的ID

title : '课程标识',

width : 100,

align : 'center',

valign : 'center',

sortable : true,

}, {

field : 'coursename',

title : '课程名称',

align : 'center',

valign : 'center',

sortable : true

}, {

field : 'dictionaryid',

title : '课程状态',

align : 'center',

valign : 'center',

sortable : true

}, {

field : 'remark',

title : '课程描述',

align : 'center',

valign : 'center',

sortable : true

}, {
field : 'operate',
title : '您可以选择',
align : 'center',
events : operateEvents,
formatter : operateFormatter
} ]

});
}
});

如果你选择使用 JS 填充 bootstrap 那么在table 标签中的 class 就不能写

Js css下载地址:http://download.csdn.net/detail/jacxuan/9815125