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]);                
                             //
                             //
                             //由于传回的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

你可能感兴趣的:(bootstrap响应式框架)