bootstrap-table入门实战

最新推荐文章于 2024-04-23 03:21:31 发布

java后端指南

最新推荐文章于 2024-04-23 03:21:31 发布

阅读量313

点赞数

分类专栏：前端文章标签： java bootstrap

本文链接：https://blog.csdn.net/Ting1king/article/details/109532129

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1、Jquery组件引用-->
		<script src="js/jquery.js"></script>
		<!-- 2、bootstrap组件引用-->
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<!-- 3、bootstrap-table组件引用-->
		<link rel="stylesheet" href="css/bootstrap-table.min.css" />
		<script src="js/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-zh-CN.js"></script>
	</head>
	<script>
		$(function(){
			
			$('#mytab').bootstrapTable({
			    url: 'http://127.0.0.1:8848/bootstrap%E9%A1%B9%E7%9B%AE/data2.json',
				method: 'GET', 
				//contentType: "application/x-www-form-urlencoded",   //请求内容类型	        
				//dataType: "json",  //数据类型
			    queryParams: "queryParams",
			    toolbar: "#toolbar",
				showRefresh: true,         // 是否显示刷新按钮
				clickToSelect: true,       // 是否启用点击选中行
				showToggle: true,          // 是否显示详细视图和列表视图的切换按钮
				showColumns:true,			//显示列控制按钮
			    sidePagination: "true",
			    search : "true",			//开启搜索
				searchOnEnterKey:"true",	//回车后搜索
			    uniqueId: "id",
			    pageSize: "5",
			    pagination: true, // 是否分页
			    sortable: true, // 是否启用排序
			    columns: [{
				            checkbox: true,  
				            visible: true                  //是否显示复选框  
				    }, {
			            field: 'id',
			            title: '登录名'
			        },
			        {
			            field: 'name',
			            title: '昵称'
			        },
			        {
			            field: 'price',
			            title: '角色'
			        },  
				
			    ]
			});
			//操作栏的格式化
			function actionFormatter(value, row, index) {
			    var id = value;
			    var result = "";
			    result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
			    result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
			    result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
			    return result;
			}
		})
	  
	    
	</script>
	<body>
		<div>学生管理系统</div>
		<div id="toolbar" class="btn-group">
		      <button id="btn_add" type="button" class="btn btn-info btn-sm rightSize">
		          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		      </button>
		      <button id="btn_edit" type="button" class="btn btn-info btn-sm rightSize">
		          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
		      </button>
		      <button id="btn_delete" type="button" class="btn btn-info btn-sm rightSize">
		          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		      </button>
		  </div>
		 <table id="mytab" class="table table-hover table-striped"></table>
		        
	</body>
</html>

data.json:

	
 [  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "$0"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Item 2",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Item 3",  
            "price": "$3"  
        },  
        {  
            "id": 4,  
            "name": "Item 4",  
            "price": "$4"  
        },  
        {  
            "id": 5,  
            "name": "Item 5",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Item 6",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Item 7",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Item 8",  
            "price": "$8"  
        },  
        {  
            "id": 9,  
            "name": "Item 9",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Item 10",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Item 11",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Item 12",  
            "price": "$12"  
        },  
        {  
            "id": 13,  
            "name": "Item 13",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "Item 14",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Item 15",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Item 16",  
            "price": "$16"  
        },  
        {  
            "id": 17,  
            "name": "Item 17",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "$19"  
        },  
        {  
            "id": 20,  
            "name": "Item 20",  
            "price": "$20"  
        }
		]