Bootstrap Table笔记——1

Spring Boot + Bootstrap


Bootstrap Table笔记——1


<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>BootStrap Table使用——版本一</title>
		<!--Jquery组件引用-->
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

		<!--bootstrap组件引用-->
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />

		<!--bootstrap table组件以及中文包的引用-->
		<script type="text/javascript" src="js/bootstrap-table.js"></script>
		<link rel="stylesheet" href="css/bootstrap-table.css" />
		<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

		<!--页面js文件的引用-->
		<script type="text/javascript" src="js/main.js"></script>

		<!--bootstrap table editable组件引用-->
		<link rel="stylesheet" href="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
	</head>

	<body>
		<div class="panel-body" style="padding-bottom:0px;">
			<div class="panel panel-default">
				<div class="panel-heading">查询条件</div>
				<div class="panel-body">
					<form id="formSearch" class="form-horizontal">
						<div class="form-group" style="margin-top:15px">
							<label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="txt_search_departmentname">
							</div>
							<label class="control-label col-sm-1" for="txt_search_statu">状态</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="txt_search_statu">
							</div>
							<div class="col-sm-4" style="text-align:left;">
								<button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
							</div>
						</div>
					</form>
				</div>
			</div>

			<div id="toolbar" class="btn-group">
	            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal">
	                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	            </button>
	            <button id="btn_edit" type="button" class="btn btn-default">
	                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	            </button>
	            <button id="btn_delete" type="button" class="btn btn-default">
	                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	            </button>
	        </div>

			<!-- 模态框(Modal) -->
			<div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								×
							</button>
							<h4 class="modal-title" id="myModalLabel">
								添加商品
							</h4>
						</div>
						<div class="modal-body">
							<select id="ps">
								<option value="0">0</option>
								<option value="1">1</option>
								<option value="2">2</option>
							</select>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">
								关闭
							</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal">
								确认
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>

			<table id="tb_departments"></table>
		</div>
	</body>

	<script type="text/javascript">
		$(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 () {
		        $('#tb_departments').bootstrapTable({
		            url: '/girl/lS',         				//请求后台的URL(*)
		            method: 'post',                       	//请求方式(*)
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",
		            toolbar: '#toolbar',               	//工具按钮用哪个容器
		            striped: false,                      	//是否显示行间隔色
		            cache: false,                       	//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
		            pagination: true,                   	//是否显示分页(*)
		            sortable: false,                    	//是否启用排序
		            sortOrder: "asc",                   	//排序方式
					queryParamsType: '',
		            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: true,                  		//是否显示父子表
		            columns: [{
		                checkbox: true
		            }, {
		                field: 'id',
		                title: 'ID',
						align: 'center',
						valign: 'middle'
		            }, {
		                field: 'age',
		                title: 'AGE',
						align: 'center',
						valign: 'middle'
		            }, {
		                field: 'cupSize',
		                title: 'CupSize',
						align: 'center',
						valign: 'middle'
		            }, ]
		        });
		    };

		    //得到查询的参数
		    oTableInit.queryParams = function (params) {
		        var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
//		            limit: params.limit,   //页面大小
//		            offset: params.offset,  //页码
					pageNumber: params.pageNumber,
					pageSize: params.pageSize
//		            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>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>BootStrap Table使用--版本二</title>
    <!--Jquery组件引用-->
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

    <!--bootstrap组件引用-->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />

    <!--bootstrap table组件以及中文包的引用-->
    <script type="text/javascript" src="js/bootstrap-table.js"></script>
    <link rel="stylesheet" href="css/bootstrap-table.css" />
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

    <!--页面js文件的引用-->
    <script type="text/javascript" src="js/main.js"></script>

    <!--bootstrap table editable组件引用-->
    <link rel="stylesheet" href="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
</head>

<body>
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_departmentname">
                    </div>
                    <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_statu">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>

    <!-- 模态框(Modal) -->
    <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加商品
                    </h4>
                </div>
                <div class="modal-body">
                    <select id="ps">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        确认
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <table id="tb_girls"></table>
</div>
</body>

<script type="text/javascript">
    $(function () {

        //1.初始化Table
        var $table = $("#tb_girls");
        var selections = [];
        function initTable() {
            $table.bootstrapTable('destroy');
            $table.bootstrapTable({
                url: '/girl/lS',         			    //请求后台的URL(*)
                method: 'post',                       	//请求方式(*)
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                toolbar: '#toolbar',               	//工具按钮用哪个容器
                striped: false,                      	//是否显示行间隔色
                cache: false,                       	//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   	//是否显示分页(*)
                sortable: false,                    	//是否启用排序
                sortOrder: "asc",                   	//排序方式
                sidePagination: "server",           	//分页方式:client客户端分页,server服务端分页(*)
                pageNumber: 1,                       	//初始化加载第一页,默认第一页
                pageSize: 10,                       	//每页的记录行数(*)
                pageList: [10, 25, 50, 100],        	//可供选择的每页的行数(*)
                queryParamsType: '',
                queryParams: function queryParams(params) {
                    var param = {
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize
                    }
                    return param;
                },
                search: true,                       	//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  	//是否显示所有的列
                showRefresh: true,                  	//是否显示刷新按钮
                minimumCountColumns: 2,             	//最少允许的列数
                clickToSelect: true,                	//是否启用点击选中行
                //height: 500,                        	//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     	//每一行的唯一标识,一般为主键列
                showToggle:true,                    	//是否显示详细视图和列表视图的切换按钮
                cardView: false,                    	//是否显示详细视图
                detailView: true,                  		//是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'ID',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'age',
                    title: 'AGE',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'cupSize',
                    title: 'CupSize',
                    align: 'center',
                    valign: 'middle'
                } ],
                onClickRow: function (row, $element) {
                    curRow = row;
                },
                onLoadSuccess: function (aa, bb, cc) {

                },
                onPageChange: function (number, size) {

                }
            })
        }
        initTable();
    })
</script>

</html>


问题小结:

1.如果在js里面初始化的参数 sidePagination: "server" 设置为在服务端分页,那么我们的返回值必须告诉前端总记录的条数和当前页的记录数,然后前端才知道如何分页。并且最重要的一点,这两个参数的名字必须为total和rows。

2、第二个问题就是关于bootstrap页面样式的问题,我们使用过bootstrap的朋友应该知道,它里面所有的图标都是通过class = "glyphicon glyphicon-plus"这种方式去写的。博主按要求这样做了,可是新增、修改、删除前面的图标怎么都出不来。

原因:找不到fonts文件夹。把fonts文件夹拷贝到目录下就行了(如截图)。

3、关于中文。刚开始,博主没有引用   <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>   这个包,所以界面找不到记录是显示的是英文。

4、表格自带的搜索功能,有上可知,在初始化表格的时候,通过设置search: true可以设置表格的搜索框出现并且可以进行模糊搜索。之前博主一直以为只有客户端分页才能使用这个搜索,多谢园友指出,其实服务端分页也可以使用这个搜索功能。只不过需要在对应的方法里加上search参数。比如

oTableInit.queryParams = function (params) {
    var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
        limit: params.limit,   //页面大小
        offset: params.offset,  //页码
        departmentname: $("#txt_search_departmentname").val(),
        statu: $("#txt_search_statu").val(),
        search:params.search
    };
    return temp;
};

然后后端

public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu, string search) {
    var lstRes = new List<Department>();
    for (var i = 0; i < 50; i++)
    {
        var oModel = new Department();
        oModel.ID = Guid.NewGuid().ToString();
        oModel.Name = "销售部" + i ;
        oModel.Level = i.ToString();
        oModel.Desc = "暂无描述信息";
        lstRes.Add(oModel);
    }

    var total = lstRes.Count;
    var rows = lstRes.Skip(offset).Take(limit).ToList();
    return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
}

这样,每次用户在搜索框里面输入都会进到后台的方法,并且将用户输入的值传到search参数。但是如果你需要对多个字段进行模糊匹配,那么就意味着你的后台需要去对多个数据字段进行like操作,这样查询效率肯定低下。所以,如果需要模糊匹配的字段很多,这个search在实际项目中是用不上的。综上,博主还是觉得只有在客户端分页的时候,这个搜索的作用比较明显。

5、关于Bootstrap Table的排序,由于一般这种BS系统肯定会采用服务端分页,我们如果仅仅在js里面设置sortable和sortOrder等属性信息,表格是不会有效排序的。原因很简单,服务端分页的方式,排序本页数据意义不大。所以,一般的排序需要将排序方式和排序字段发送到后台,在后台排序比较合适。比如我们这里可以在参数里面增加两个:

oTableInit.queryParams = function (params) {
    var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
        limit: params.limit,   //页面大小
        offset: params.offset,  //页码
        order: params.order,
        ordername: params.sort,
        departmentname: $("#txt_search_departmentname").val(),
        statu: $("#txt_search_statu").val()
    };
    return temp;
}

6、Bootstrap Table向后台参数时需要注意格式,可以在参数里面增加两个:

contentType: "application/x-www-form-urlencoded",
dataType: "json",	//数据类型

7、Bootstrap Table为防止表格变形,我们可以设置Table属性,然后固定列宽并设置单元格内容显示方式:

<table id="table"></table>
<style type="text/css">
	#table {table-layout:fixed;}
	#table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>

columns: [{
    checkbox: true
}, {
    field: 'id',
    title: 'ID',
	filterControl: 'select',
	align: 'center',
	valign: 'middle',
	width: '100px'
}, {
    field: 'age',
    title: 'AGE',
	filterControl: 'input',
	align: 'center',
	valign: 'middle',
	width: '100px'
}, {
    field: 'cupSize',
    title: 'CupSize',
	filterControl: 'input',
	align: 'center',
	valign: 'middle',
	width: '100px'
} ]






上一篇:IDEA 快捷键


下一篇:由于JRE版本导致的Error filterStart问题