BootStrap动态列表

BootStrap引用

<table id="example" class="table text-nowrap  table-condensed"></table>
<script>
	$('#example').bootstrapTable({
            //contentType: "application/x-www-form-urlencoded",
            url: '', //请求后台的URL（*）
            method: 'get', //请求方式（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: false, //是否启用排序
            sortOrder: "asc", //排序方式
            sortName: '',//排序字段
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 15, //每页的记录行数（*）
            pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            searchOnEnterKey: false,
            showColumns: true, //是否显示所有的列
            showRefresh: true, //是否显示刷新按钮
            showFullscreen: true,
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            height: $(window).height() - 55, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID", //每一行的唯一标识，一般为主键列
            showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: true, //是否显示父子表
            //detailFormatter: function (index, row) {
            //    return str;
            //},
            singleSelect: true, // 单选checkbox 
            columns: [{
                checkbox: true
            }, {
                    title: '#',
                    field: '',
                    align: 'center',
                    width: '40',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
               }, {
                    field: 'ID',
                    title: '操作', width: '40',
                    align: 'center'
                , formatter: function (value, row, index) {
               }
              }
            ],
            rowStyle: function (row, index) {
                //自定义字体颜色，或者背景颜色
                var style = { css: { 'color': '#fb4848' } };
                return style;
            },
            onExpandRow: function (index, row, $detail) {
            //见下图做为父子表传递参数
                InitSubTable(index, row, $detail);
            },
            onDblClickRow: function (row) {//双击事件
            }
        });
        //关联表信息
		function InitSubTable(index, rows, $detail) {
		var cur_table = $detail.html(str).find('table:eq(0)');//得到传递子表元素
		}
</script>