在ACE中,我们引入datatables插件,这是一款展示表格,并通过js来实现个包括展示、分页、排序等各种表格功能的插件,而且是高度可定制化的一款插件。官方网站为:http://www.datatables.net/。当然,在我们的ACE模板中也有包含,并加入了ACE的CSS元素。
1. 修改index.html页面,在其中增加block元素,用于存放不同页面的主页内容
<div class="page-content">
<div class="page-content-area">
<div class="page-header">
<h1>
<!--设置导航栏的页面标题-->
{% block page_title %}
{% endblock %}
<small>
<i class="ace-icon fa fa-angle-double-right"></i>
<!--设置导航栏的页面子标题-->
{{ sub_title }}
</small>
</h1>
</div><!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<!--设置页面内容-->
{% block container %}
{% endblock %}
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content-area -->
</div><!-- /.page-content -->
2. node_list.html用于存放机构信息,line_list.html用于存放线路信息,device_list.html用于存放设备信息,同时修改index.html中Table下的链接,将其中的链接指向node_list.html,line_list.html,device_list.html:
<ul class="submenu">
<li class="">
<a href="{% url 'lists' table='node' %}">
<i class="menu-icon fa fa-caret-right"></i>
节点信息
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="{% url 'lists' table='line' %}">
<i class="menu-icon fa fa-caret-right"></i>
线路信息
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="{% url 'lists' table='device' %}">
<i class="menu-icon fa fa-caret-right"></i>
设备信息
</a>
<b class="arrow"></b>
</li>
</ul>
3. 建立res_list.html,用来存放资源类表格,并把它作为一个模板,供其他页面继承,这样可以节省大量的重复代码。
<!--继承index.html-->
{% extends "index.html" %}
{% block page_css %}
{% endblock %}
<!--填充导航栏的页面名称-->
{% block page_title %}
基础资料
{% endblock %}
<!--放置主页面内容-->
{% block container %}
{% load staticfiles %}
<div class="row">
<!-- Search Page BEGINS-->
<div class="col-xs-12">
<form class="navbar-for navbar-container" role="search" method="get" action="">{% csrf_token %}
<!--放置搜索栏内容-->
{% block search %}
{% endblock %}
<div class="col-sm-3">
<span class="input-group-btn">
<button type="submit" class="btn btn-purple btn-sm">
查询
<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
</button>
</span>
</div>
</form>
</div>
<!-- Search Page END -->
<!-- PAGE TABLES BEGINS -->
<div class="col-xs-12">
<div>
<table id="table_id" class="table table-striped table-bordered table-hover">
<thead>
<!--表格头部-->
{% block table_tr %}
{% endblock %}
<th>
<!--最后一列作为添加数据按钮-->
<a class="blue" href="{% url 'add' table=table %}">
<i class="ace-icon fa fa-search-plus bigger-130"></i>
添加数据
</a>
</th>
</thead>
<!--表格内容-->
<tbody>
{% for item in data %}
<tr>
<!--通过for循环从data取出的具体表格内容-->
{% block table_td %}
{% endblock %}
<td>
<!--页面扩展时的按钮布局-->
<div class="hidden-sm hidden-xs action-buttons">
<!--编辑信息按钮-->
<a class="green" href="{% url 'edit' table item.id %}" title="编辑信息">
<i class="ace-icon fa fa-pencil bigger-130"></i>
</a>
<!--删除信息按钮-->
<a class="red" href="{% url 'delete' table item.id %}" title="删除信息">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
</div>
<!--页面收缩时的按钮布局-->
<div class="hidden-md hidden-lg">
<div class="inline position-relative">
<button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown"
data-position="auto">
<i class="ace-icon fa fa-caret-down icon-only bigger-120"></i>
</button>
<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
<li>
<a href="{% url 'add' table=table %}" class="tooltip-info" data-rel="tooltip" title="添加数据">
<span class="blue">
<i class="ace-icon fa fa-search-plus bigger-120"></i>
</span>
</a>
</li>
<li>
<a href="{% url 'edit' table item.id %}" class="tooltip-success" data-rel="tooltip" title="修改信息">
<span class="green">
<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
</span>
</a>
</li>
<li>
<a href="{% url 'delete' table item.id %}" class="tooltip-error" data-rel="tooltip" title="删除信息">
<span class="red">
<i class="ace-icon fa fa-trash-o bigger-120"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
{% block page_javascript %}
<!--datatable的专用js-->
<script type="text/javascript">
$(document).ready(function () {
$('#table_id').DataTable({
//分页配置
"paging": false,
//搜索配置
"searching": false,
"bInfo": false,
//列配置
"columnDefs": [{
//只有最后一行不需要排序
"orderable": false, "targets": -1
}]
});
});
</script>
{% endblock %}
4. node_list.html,line_list.html,device_list.html继承res_list.html,并将各自不一样的内容在相应的block中进行填充
node_list.html:
{% extends "res_list.html" %}
{% block search %}
{% endblock %}
{% block table_tr %}
<th>机构名称</th>
<th>机构分类</th>
<th>成本中心</th>
<th>机构地址</th>
<th>联系人</th>
{% endblock %}
{% block table_td %}
<td>{{item.node_name}}</td>
<td>{{item.node_type}}</td>
<td>{{item.node_cost}}</td>
<td>{{item.node_address}}</td>
<td>{{item.node_contact}}</td>
{% endblock %}
line_list.html:
{% extends "res_list.html" %}
{% block search %}
{% endblock %}
{% block table_tr %}
<th>线路编号</th>
<th>用户名称</th>
<th>本端地址</th>
<th>对端地址</th>
<th>运营商</th>
<th>线路类型</th>
<th>线路速率</th>
<th>线路参数</th>
<th>所在总头</th>
{% endblock %}
{% block table_td %}
<td>{{item.line_code}}</td>
<td>{{item.node}}</td>
<td>{{item.line_para1}}</td>
<td>{{item.line_para2}}</td>
<td>{{item.line_local}}</td>
<td>{{item.line_speed}}</td>
<td>{{item.line_speed}}</td>
<td>{{item.para2}}</td>
<td>{{item.para2}}</td>
{% endblock %}
device_list.html:
{% extends "res_list.html" %}
{% block search %}
{% endblock %}
{% block table_tr %}
<th>设备名称</th>
<th>主机名称</th>
<th>管理地址</th>
<th>使用部门</th>
<th>设备型号</th>
<th>设备序列号</th>
<th>登记人</th>
{% endblock %}
{% block table_td %}
<td>{{item.device_caption}}</td>
<td>{{item.device_sysname}}</td>
<td>{{item.device_ip}}</td>
<td>{{item.node}}</td>
<td>{{item.device_type}}</td>
<td>{{item.device_serial}}</td>
<td>{{item.signer}}</td>
{% endblock %}
5. 修正view中add函数中的context,将table参数传递过去
views.py:
#显示各列表信息
def lists(request, table):
#从根据不同的请求,来获取相应的数据,并跳转至相应页面
if table == 'node':
data = Node.objects.all()
list_template = 'node_list.html'
sub_title = '节点信息'
if table == 'line':
data = Line.objects.all()
list_template = 'line_list.html'
sub_title = '线路信息'
if table == 'device':
data = Device.objects.all()
list_template = 'device_list.html'
sub_title = '设备信息'
#建立context字典,将值传递到相应页面
context = {
'data': data,
'table': table,
'sub_title': sub_title,
}
#跳转到相应页面,并将值传递过去
return render(request,list_template,context)
#用于增加资源
def add(request, table):
#...
#创建context来集中处理需要传递到页面的数据
context = {
'form': form,
'table': table,
}
#如果没有有效提交,则仍留在原来页面
return render(request, 'add.html', context)<strong>
</strong>
6.再次访问 http://127.0.0.1:8000/lists/node/,可以发现已经运用上了ACE模板
其中,添加数据按钮可以正常使用