Bootstrap Table总结

原文链接

一.使用

导包：

1.Jquery

2.bootstrap组件（js+css）

3.bootstrap table组件及中文包（js+css+js）

代码：

例一：                       

<table id="table"></table>
<script>
	$(function () {

	    //1.初始化Table
	    var oTable = new TableInit();
	    oTable.Init();
	
	    //2.初始化Button的点击事件
	    var oButtonInit = new ButtonInit();
	    oButtonInit.Init();
	
	});
	
	
	var TableInit = function () {
	    var oTableInit = new Object();
	    //初始化Table
	    oTableInit.Init = function () {
	        $('#table').bootstrapTable({
url: '/Home/GetDepartment',         //请求后台的URL（*）
	            method: 'get',                      //请求方式（*）
	            toolbar: '#toolbar',                //工具按钮用哪个容器
	            striped: true,                      //是否显示行间隔色
	            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	            pagination: true,                   //是否显示分页（*）
	            sortable: false,                     //是否启用排序
	            sortOrder: "asc",                   //排序方式
	            queryParams: oTableInit.queryParams,//传递参数（*）
	            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	            pageNumber:1,                       //初始化加载第一页，默认第一页
	            pageSize: 10,                       //每页的记录行数（*）
	            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
	            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	            strictSearch: true,
	            showColumns: true,                  //是否显示所有的列
	            showRefresh: true,                  //是否显示刷新按钮
	            minimumCountColumns: 2,             //最少允许的列数
	            clickToSelect: true,                //是否启用点击选中行
	            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
	            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
	            cardView: false,                    //是否显示详细视图
	            detailView: false,                  //是否显示父子表
	            columns: [{
	                checkbox: true
	            }, {
	                field: 'Name',
	                title: '部门名称',
	                align: 'center',
  	                valign: 'middle',
  	              	width: '100px',
	            }, {
	                field: 'ParentName',
	                title: '上级部门',
	            }, {
	                field: 'Level',
	                title: '部门级别'
	            }, {
	                field: 'Desc',
	                title: '描述'
	            }, ]
	        });
	    };
	
	    //得到查询的参数
	    oTableInit.queryParams = function (params) {
	        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	            limit: params.limit,   //页面大小
	            offset: params.offset,  //页码
	            departmentname: $("#txt_search_departmentname").val(),
	            statu: $("#txt_search_statu").val()
	        };
	        return temp;
	    };
	    return oTableInit;
	};
	
	
	var ButtonInit = function () {
	    var oInit = new Object();
	    var postdata = {};
	
	    oInit.Init = function () {
	        //初始化页面上面的按钮事件
	    };
	
	    return oInit;
	};
</script>

例二：

<table id="table"></table>
<style>
	#table{
		table-layout: fixed;
	}
</style>
<script type="text/javascript">
	var $table = $("#table");
	var selections = [];
	window.lockEvents = {
        'click .lock':function (e, value, row, index) {
            $.ajax({
                type:"post",
                url:"/copartner/trade/supplier/lock.do",
                async:true,
                dataType:"json",
                data:{
                    id: row.id,
                    isEnable : row.isEnable
                },
                success: function(data) {
                	if(data.msg != null) {
                		alert(data.msg);
                	}
                },
                error:function(jqXHR){
                    alert(jqXHR.status);
                }
            });
            initTable();
        }
    };
	function initTable() {
	    $table.bootstrapTable('destroy');
	    $table.bootstrapTable({
	        height: getHeight(),
	        toolbar: "#toolbar",
	        //search: true,
	        //searchAlign: "left",
	        //showRefresh: true,
	        //showToggle: true,
	        showColumns: true,
	        //showExport: true,
	        //exportDataType: "all",
	        //detailView: true,
	        //detailFormatter: detailFormatter,
	        //minimumCountColumns: 2,
	        idField: 'id',
	        showFooter: false,
	        /*与后台交互*/
	        method: 'post',
	        contentType: "application/x-www-form-urlencoded",
	        dataType: "json",
	        cache: false,
	        striped: true,
	        pagination: true,
	        //showPaginationSwitch: true,
	        pageNumber: 1,
	        pageSize: 20,
	        pageList: [10, 20, 50, 100],
	        url: "/copartner/tradeOrderInfo/list.do",
	        //dataField: "rows",
	        clickToSelect: true,
	        queryParamsType: '',
	        queryParams: function queryParams(params) {
	            var param = {
	            	pageNumber: params.pageNumber,	
	                pageSize: params.pageSize,
	                vagueInfo: $(".vagueInput").val(),
	            }
	            return param;
	        },
	        sidePagination: "server",//client
	        /* onLoadSuccess: function(data){  //加载成功时执行
	            alert("加载成功"+data);
	        },
	        onLoadError: function(){  //加载失败时执行
	        	alert("加载失败"+data);
	        }, */
	        /*列*/
	        columns: [
	            {
		            checkbox: true,
		            align: 'center',
	                valign: 'middle'
	            }, {
	                title: 'id',
	                field: 'id',
	                align: 'center',
	                valign: 'middle',
	                //sortable: true
	                width: '100px'
	            }, {
	                title: '订单编号',
	                field: 'alias',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
	                formatter: openFormatter
	            }, {
	                title: '电话',
	                field: 'phone',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
	                formatter: function (value, row, index) {
	                	return "<a class="editPhone" href="" name="phone" data-type="text" data-pk=""+row.Id+"" data-title="电话">" + value + "</a>";
	                }
	            }, {
  	                title: '是否售后',
  	                field: 'isAftersales',
  	                align: 'center',
  	                valign: 'middle',
  	              	width: '100px',
  	                formatter: afterSalesFormatter
  	            }, {
	                title: '操作',
	                field: 'detail',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
	                formatter: detailFormatter
	            }, {
	                title: '是否启用',
	                field: 'isEnable',
	                align: 'center',
	                valign: 'middle',
	                width: '100px',
					events: lockEvents,
	                formatter: lockFormatter
	            }
	        ],
	        onClickRow: function (row, $element) {
                curRow = row;
            }
            onLoadSuccess: function (aa, bb, cc) {
            	$("#table .rowEditable").editable({
                    url: function (params) {
                        var column = $(this).attr("name");
                        curRow[column] = params.value;
                    },
                    type: 'text'
                });
                $("#table .editPhone").editable({
                    url: function (params) {
                        var sPhone = $(this).attr("name");
                        curRow[sPhone] = params.value;
                        $.ajax({
                            type: 'POST',
                            url: "/copartner/trade/supplier/editPhone.do",
                            data: curRow,
                            dataType: 'JSON',
                            success: function (data, textStatus, jqXHR) {
                            	initTable();
                            	if(data.msg != null) {
                            		alert(data.msg);
                            	}
            	            },
            	            error:function(jqXHR){
            	                alert(jqXHR.status);
            	            }
                        });
                    },
                    type: 'text'
                });
            }
	    });
	    $table.bootstrapTable('hideColumn', 'id');
	    function afterSalesFormatter(value, row, index) {
	    	var state = '';
	    	var color = '#000';
	    	var color_red = '#c00';
	    	var color_blue = '#0066ff';
	    	var color_green = '#5cb85c';
	    	if(value == 0) {
	    		state = '否';
	    		color = color;
	    	} else if(value == 1) {
	    		state = "是";
	    		color = color_green;
	    	}
            return [
				'<span style="color: '+ color +'">' + state + '</span>'
            ].join('');
        }
	    function openFormatter(value, row, index) {
            return value;
        }
        function detailFormatter(value, row, index) {
        	return [
				'<a class="aliasNum" href="orderDetailInfoNew.html?id=' + row.id + '" title="进入明细">',
				'<span style="">详情</span>',
				'</a>'
            ].join('');
        }
        function lockFormatter(value, row, index) {
	    	var state = '--';
	    	var color = '#000';
	    	var color_red = '#c00';
	    	var color_blue = '#0066ff';
	    	if(value == 0) {
	    		state = '已关闭';
	    		color = color_red;
	    	} else if(value == 1) {
	    		state = "已启用";
	    		color = color_blue;
	    	}
            return [
                '<a class="lock" href="javascript:void(0)" title="切换状态">',
                '<span style="color: '+ color +'">' + state + '</span>',
                '</a>'
            ].join('');
        }
        function editReturnCountFormatter(value, row, index) {
	    	return "<a class="rowEditable" href="" name="returnCount" data-type="text" data-pk=""+row.Id+"" data-title="投诉数量">" + value + "</a>";
        }
	    function editReturnPriceFormatter(value, row, index) {
	    	return "<a class="rowEditable" href="" name="returnPrice" data-type="text" data-pk=""+row.Id+"" data-title="投诉金额">" + value + "</a>";
        }
	    function editReturnReasonFormatter(value, row, index) {
	    	return "<a class="rowEditable" href="" name="returnReason" data-type="text" data-pk=""+row.Id+"" data-title="售后原因">" + value + "</a>";
        }
	    // sometimes footer render error
	    /*setTimeout(function() {
	     $table.bootstrapTable('resetView');
	     }, 200);*/
	    /*$table.on('check.bs.table uncheck.bs.table ' +
	     'check-all.bs.table uncheck-all.bs.table', function () {
	     $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
	     // save your data, here just save the current page
	     selections = getIdSelections();
	     // push or splice the selections if you want to save all data selections
	     });
	     $table.on('expand-row.bs.table', function (e, index, row, $detail) {
	     if (index % 2 == 1) {
	     $detail.html('Loading from ajax request...');
	     $.get('LICENSE', function (res) {
	     $detail.html(res.replace(/
/g, '<br>'));
	     });
	     }
	     });
	     $table.on('all.bs.table', function (e, name, args) {
	     console.log(name, args);
	     });*/
	    $(window).resize(function(){
	        $table.bootstrapTable('resetView',{
	            height: getHeight()
	        });
	    });
	}
	function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }
	function getData() {
    	return $.map($table.bootstrapTable('getData'), function (row) {
            return row.id+"---"+row.returnCount+"---"+row.returnPrice+"---"+row.returnReason+"---"+row.saleCount;
        });
    }
	function getHeight() {
        return document.body.clientHeight*0.88;
    }
    /*function detailFormatter(index, row) {
     var html = [];
     $.each(row, function (key, value) {
     html.push('<p><b>' + key + ':</b> ' + value + '</p>');
     });
     return html.join('');
     }*/
    $(document).ready(function() {
        initTable();
    });
</script>

二.扩展

        行内编辑 Table Editable

        表格导出 Table Export

原文链接