登录 注册

JFinal Web 开发记录 129：面向对象做前端之写一个 Bootstrap DataTable 生成组件 - 篇 1

本贴最后更新于 1915 天前，其中的信息可能已经渤澥桑田

前言

Table 样式

BootStrap 一个标准的 Table 控件样式如下：

imagepng

源码形式如下：

<div class="container">                 
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th style="width:30px"></th>
				<th style="">#</th>
				<th>Firstname</th>
				<th>Gender</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>Anna</td>
				<td>Male</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>Debbie</td>
				<td>Female</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>John</td>
				<td>Female</td>
			</tr>
		</tbody>
	</table>
</div>

分析可知，一个标准的 Table 源码包含如下内容

一个 div 父节点，该节点下存放 Table

table 节点，class 属性生命 table 样式形式
> thead 表头定义
> tbody 表内容定义

thead 表头定义
> 一个或者多个 tr 节点
> 每个 tr 下有 n 个 th

tbody 表头定义
> 一个或者多个 tr 节点
> 每个 tr 下有 n 个 th

pagination 样式

BootStrap 一个标准的 Pagination 样式控件，可以定义如下：

imagepng

<ul class="pagination">
    <li class="disabled"><a href="#">&lt;&lt;</a></li>
    <li class="disabled"><a href="#"> &lt; </a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#"> &gt; </a></li>
    <li><a href="#">&gt;&gt;</a></li>
</ul>
<ul class="pagination">
    <li><span class="glyphicon glyphicon-refresh" style="top: 0"></span></li>
</ul>
<ul class="pagination">
    <li><span class="glyphicon glyphicon-list" style="top: 0"></span></li>
    <li>
        <span style="padding:0px; border:0;">
            <select class="form-control" style="width: 45px;height: 34px;padding:1px;box-shadow: none;border: 1px solid #ddd;border-radius: 0px 4px 4px 0">
              <option>10</option>
              <option>20</option>
              <option>30</option>
              <option>40</option>
              <option>50</option>
            </select>
        </span>
    </li>
</ul>

<ul class="pagination">
    <li><span style="border:0" >共 169 条</span></li>
    <li><span style="border:0" >共 17 页</span></li>

    <li><span style="border:0;margin:0;padding:6px 3px" >到</span></li>
    <li><span style="border:0;margin:0;padding:0" ><input type="text" class="form-control" style="width: 30px;height: 30px;padding:1px; text-align: center;" value="1"></span></li>
    <li><span style="border:0;margin:0;padding:6px 3px" >页</span></li>
</ul>

分析可知，一个标准的 Pagination 源码包含如下内容

一个 div 父节点，该节点下存放 Pagination

第一组 ul class="pagination" 节点，包含了：
> PageNum 页码
> 首页 尾页
> 前一页 后一页

第二组 ul class="pagination" 节点，包含了：
> Refresh 刷新
> PageSize 每页显示数量

第二组 ul class="pagination" 节点，包含了：
> 共计 total 条数据
> 共计 total 页
> 到达 pageNum 指定页码

按钮列表

每个表格，基本上会有新增、修改、详情、删除等基本操作按钮

imagepng

<button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-plus">  </span></button>
<button type="button" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-edit">  </span></button>
<button type="button" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-exclamation-sign">  </span></button>
<button type="button" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash">  </span></button>

简易的搜索框

一个简易的检索框
imagepng

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search rule">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" > 
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
</div>

组合效果

imagepng

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>DataTable样式</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
	<div class="col-sm-9" style="padding-left:0">
		
		<button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-plus">  </span></button>
		<button type="button" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-edit">  </span></button>
		<button type="button" class="btn btn-sm btn-info"><span class="glyphicon glyphicon-exclamation-sign">  </span></button>
		<button type="button" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash">  </span></button>
	</div>
	<div class="col-sm-3" style="padding-left:0">
		<div class="input-group">
			<input type="text" class="form-control" placeholder="Search rule">
			<span class="input-group-btn">
				<button class="btn btn-default" type="button" > 
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</span>
		</div>
	</div>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
                <td>Male</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
                <td>Female</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Female</td>
            </tr>
        </tbody>
    </table>


	<ul class="pagination">
		<li class="disabled"><a href="#">&lt;&lt;</a></li>
		<li class="disabled"><a href="#"> &lt; </a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#"> &gt; </a></li>
		<li><a href="#">&gt;&gt;</a></li>
	</ul>
	<ul class="pagination">
		<li><span class="glyphicon glyphicon-refresh" style="top: 0"></span></li>
	</ul>
	<ul class="pagination">
		<li><span class="glyphicon glyphicon-list" style="top: 0"></span></li>
		<li>
			<span style="padding:0px; border:0;">
				<select class="form-control" style="width: 45px;height: 34px;padding:1px;box-shadow: none;border: 1px solid #ddd;border-radius: 0px 4px 4px 0">
				  <option>10</option>
				  <option>20</option>
				  <option>30</option>
				  <option>40</option>
				  <option>50</option>
				</select>
			</span>
		</li>
	</ul>

	<ul class="pagination">
		<li><span style="border:0" >共 169 条</span></li>
		<li><span style="border:0" >共 17 页</span></li>

		<li><span style="border:0;margin:0;padding:6px 3px" >到</span></li>
		<li><span style="border:0;margin:0;padding:0" ><input type="text" class="form-control" style="width: 30px;height: 30px;padding:1px; text-align: center;" value="1"></span></li>
		<li><span style="border:0;margin:0;padding:6px 3px" >页</span></li>
	</ul>
</div>
</body>
</html>
成都 位置
1 收藏
506 10 77 65 132 45 1 50 115

相关帖子

回帖
JFinal Web 开发记录 129：面向对象做前端之写一个 Bootstrap DataTable 生成组件 - 篇 1

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
snowfigure
天上云骄未肯同，晚来雪意已填空。 成都
回帖
4
 帖子
13
 积分
1055