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]);
//
//
//由于传回的JSON数据是被封装成了一个Object类型的数据传回,所以这里需要用一个数组类型接收
} */
$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