10.资产总表

阅读: 9394


当前,我们的资产总表如下图所示,还没有任何数据:

20.jpg-19.1kB

这需要我们从数据库中查询数据,然后渲染到前端页面中。

数据的获取很简单,一句assets = models.Asset.objects.all()就搞定。当然,你也可以设置过滤条件,添加分页等等。

而在前端,我们往往需要以表格的形式,规整、美观、可排序的展示出来。这里推荐一个前端插件datatables,是一个非常好的表格插件,功能强大、配置简单。

其官网为:https://datatables.net/ 中文网站:http://datatables.club/

在AdminLTE中,集成了datatables插件,无需额外下载和安装,直接引入使用就可以。

下面给出一个完整的index.html模板代码:

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}资产总表{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        资产总表
        <small>assets list</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">资产总表</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
    <div class="row">
    <div class="col-xs-12">

      <div class="box">
        <div class="box-header">
          <h3 class="box-title">资产总表<small>(不含软件)</small></h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="assets_table" class="table table-bordered table-striped">
            <thead>
            <tr>
              <th>序号</th>
              <th>资产类型</th>
              <th>子类型</th>
              <th>资产名称</th>
              <th>SN</th>
              <th>业务线</th>
              <th>状态</th>
              <th>机房</th>
              <th>更新日期</th>
              <th>标签</th>
            </tr>
            </thead>
            <tbody>

                {% for asset in assets %}
                <tr>
                  <td>{{ forloop.counter }}</td>
                  {% if asset.asset_type == 'server' %}
                      <td class="text-green text-bold">{{ asset.get_asset_type_display }}</td>
                      <td>{{ asset.server.get_sub_asset_type_display }}</td>
                  {% elif asset.asset_type == "networkdevice" %}
                      <td class="text-yellow text-bold">{{ asset.get_asset_type_display }}</td>
                      <td>{{ asset.networkdevice.get_sub_asset_type_display }}</td>
                  {% elif asset.asset_type == "storagedevice" %}
                      <td class="text-blue text-bold">{{ asset.get_asset_type_display }}</td>
                      <td>{{ asset.storagedevice.get_sub_asset_type_display }}</td>
                  {% elif asset.asset_type == "securitydevice" %}
                      <td class="text-red text-bold">{{ asset.get_asset_type_display }}</td>
                      <td>{{ asset.securitydevice.get_sub_asset_type_display }}</td>
                  {% endif %}
                    {% if asset.asset_type == 'server' %}
                        <td><a href="{% url 'assets:detail' asset.id %}">{{ asset.name }}</a></td>
                    {% else %}
                        <td>{{ asset.name }}</td>
                    {% endif %}
                  <td>{{ asset.sn }}</td>
                  <td>{{ asset.business_unit|default_if_none:"-" }}</td>
                    {% if asset.status == 0 %}
                      <td><label class="label label-success">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 1 %}
                      <td><label class="label label-warning">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 2 %}
                      <td><label class="label label-default">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 3 %}
                      <td><label class="label label-danger">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 4 %}
                      <td><label class="label label-info">{{ asset.get_status_display }}</label></td>
                    {% endif %}
                  <td>{{ asset.idc|default:"-" }}</td>
                  <td>{{ asset.m_time|date:"Y/m/d [H:m:s]" }}</td>
                  <td>
                      {% for tag in asset.tags.all %}
                        <label class="label label-primary">{{ tag.name }}</label>
                      {% empty %}
                          -
                      {% endfor %}
                  </td>
                </tr>
                {% empty %}
                  <tr>没有数据!</tr>
                {% endfor %}

            </tbody>
            <tfoot>
            <tr>
              <th>序号</th>
              <th>资产类型</th>
              <th>子类型</th>
              <th>资产名称</th>
              <th>SN</th>
              <th>业务线</th>
              <th>状态</th>
              <th>机房</th>
              <th>更新日期</th>
              <th>标签</th>
            </tr>
            </tfoot>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}

{% block script %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <!-- SlimScroll -->
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/app.min.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <!-- page script -->
    <script>
      $(function () {
        $('#assets_table').DataTable({
          "paging": true,       <!-- 允许分页 -->
          "lengthChange": true, <!-- 允许改变每页显示的行数 -->
          "searching": true,    <!-- 允许内容搜索 -->
          "ordering": true,     <!-- 允许排序 -->
          "info": true,         <!-- 显示信息 -->
          "autoWidth": false    <!-- 固定宽度 -->
        });
      });
    </script>
{% endblock %}

主要是新增了表格相关的html代码和初始化表格的js代码。

<table id="assets_table" class="table table-bordered table-striped">中的id属性非常重要,用于关联相应的初始化js代码。

表格中,循环每一个资产:

  • 首先生成一个排序的列;
  • 再根据资产类型的不同,用不同的颜色生成不同的资产类型名和子类型名;
  • 通过{{ asset.get_asset_type_display }}的模板语法,拿到资产类型的直观名称,比如‘服务器’,而不是显示呆板的‘server’;
  • 通过{{ asset.server.get_sub_asset_type_display }},获取资产对应类型的子类型。这是Django特有的模板语法,非常类似其ORM的语法;
  • 在资产名的栏目,增加了超级链接,用于显示资产的详细内容。这里只实现了服务器类型资产的详细页面,其它类型请自行完善;
  • 根据资产状态的不同,用不同的颜色显示;
  • 利用{{ asset.m_time|date:"Y/m/d [H:m:s]" }}调整时间的显示格式;
  • 由于资产和tas标签属于多对多的关系,所以需要一个循环,遍历每个tas并打印其名称;
  • 通过asset.tags.all可以获取一个资产对应的多对多字段的全部对象,很类似ORM的做法。

表格的初始化JS代码如下:

    <script>
      $(function () {
        $('#assets_table').DataTable({
          "paging": true,       <!-- 允许分页 -->
          "lengthChange": true, <!-- 允许改变每页显示的行数 -->
          "searching": true,    <!-- 允许内容搜索 -->
          "ordering": true,     <!-- 允许排序 -->
          "info": true,         <!-- 显示信息 -->
          "autoWidth": false    <!-- 固定宽度 -->
        });
      });
    </script>

其中可定义是否允许分页、改变显示的行数、搜索、排序、显示信息、固定宽度等等,通过表格的id进行关联。

下面,我们通过后台admin界面,多增加几个服务器实例,并修改其类型、业务线、状态、厂商、机房、标签,再刷新资产总表,可以看到效果如下:

21.jpg-120.7kB

试着使用一下排序和搜索功能吧!datatables还是相当强大的!

现在点击资产名称,可以链接到资产详细页面,但没有任何数据显示,在下一节中,我们来实现它。



评论总数: 22



user_image
关系数据库映射,django.db.utils.InternalError

我有一个问题,求助 我的交易APP中的models文件里面有如下类、 1:订单 2:订单明细 3:交易 4:交易明细 (在一个models文件中) 订单 - 订单明细:一对多 订单 - 交易 : 一对一 交易 - 交易明细:一对多 在映射数据表的时候,订单和订单明细数据库表生成了,但是在生成交易的时候,报订单已存在!!!! raise errorclass(errno, errval) django.db.utils.InternalError: (1050, "Table 'jzs_order' already exists")

user_image
我的dataTable表格里排序的那个图标不显示

我的dataTable表格里排序的那个图标不显示,但是能够进行排序。这是怎么回事?

user_image
datatables展示数据

博主你好,在资产总表中如果需要筛选数据,那么是不是获取json数据而不是在模板中遍历比较好?但这么做有个问题是如果表格中有外键数据那么展示的是外键的id而不是名称?一种解决方法是在js中根据数值逐个定义好展示的名称,但这样不够灵活,有没有其他的方式可以实现?

user_image
不太理解你的意思

做数据筛选,无非两种,一是在后端数据获取的时候就进行,比如数据库查询条件;另一种就是在前端通过js进行,比如datatables的一些功能。

user_image
大神求助

我有一个问题,求助我的交易APP中的模特文件里面有如下类,1:订单2:订单明细3:交易4:交易明细(在一个模特文件中)订单 - 订单明细:一对多订单 - 交易:一对一交易 - 交易明细:一对多在映射数据表的时候,订单和订单明细数据库表生成了,但是在生成交易的时候,报订单已存在!!!! raise errorclass(errno,errval )django.db.utils.InternalError:(1050,“表'jzs_order'已存在”) 我执行了python manage.py migrate --fake ;以及删表操作,都不行。我觉得是不是交易表在执行0001-ini初始化文件的时候又要求再创建order表呢?

user_image
django2.1

在django2.1下,关于detail的显示,这个urls和views的内容该怎么配?还有正则也写不对,怎么都没有改过来,求助。

user_image
参考http://www.liujiangblog.com/course/django/182

重点是,在django2.x中,你只需要使用from django.urls import re_path正确导入re_path()方法,并用它替换Django1.x的url配置中的url()方法就可以了。

user_image
$(function () {} 的分页、显示行数、排序、搜索等功能问题

{% block script %} <script> $(function () { $("operations").DataTable({ "paging": true, <!-- 允许分页 --> "lengthChange": true, <!-- 允许改变每页显示的行数 --> "searching": true, <!-- 允许内容搜索 --> "ordering": true, <!-- 允许排序 --> "info": true, <!-- 显示信息 --> "autoWidth": false, <!-- 固定宽度 --> }); }); </script> {% endblock %} 我在我的前端页面中添加以上代码不生效,大概会是什么问题呢?由于百度不出来,就在此麻烦博主帮忙解答一下。Thanks!

user_image
$(function () {} 的分页、显示行数、排序、搜索等功能问题

问题已解决。 我还有个问题想问一下,分页、显示行数、排序、搜索等功能是出来,但是英文的,有办法弄成中文吗?

user_image
可以

请阅读DataTables的官方文档,有详细的自定义教程

user_image
DataTable 语言设置问题

问题已解决,感谢博主!

user_image
$(function () {} 的分页、显示行数、排序、搜索等功能问题

请问你是怎么解决 没有分页的,我也遇到同样的问题

user_image
AdminLTE 2.4.0

我使用的最新版本AdminLTE 2.4.0,存在js版本不兼容问题,不知道怎么来解决。 使用AdminLTE 2.3.10版本可以出现分页,不过会提示”DataTables warning: table id=assets_table - Requested unknown parameter '8' for row 0. For more information about this error,“

user_image
心细才能避免不必要的麻烦

一个引号的错误找了好长时间,哭死

user_image
报了一个错误

NoReverseMatch at /assets/index/ Error during template rendering In template D:\django\untitled1\templates\assets\base.html, error at line 0 'assets' is not a registered namespace

user_image

完成

user_image
你能获取在线主机的信息

局域网的主机能获取到吗??我只能获取到本地自己电脑的,局域网的电脑好像没反应

user_image
局域网访问问题

你在 settings.py 配置文件中的 ALLOWED_HOSTS = ['*'] ,[ ] 在这里面添加内容,再开放主机端口就可以了。ALLOWED_HOSTS = ['*'] 如需了解更多信息,就到官方文档去看看吧。

user_image
settings.py 配置文件中的 ALLOWED_HOSTS = ['*']

我在settings.py 配置文件中的 ALLOWED_HOSTS = ['*'],局域网的电脑能获取,但局域网的电脑都要安装Python wmi 运行Python main.py,才能获取。你们能自动获取吗?还是每台电脑都要安装client,发送脚本才能获取

user_image
同样的问题

朋友,这个问题解决了吗。实际目前上只能手动在客户端上安装Python再运行脚本发送信息,

user_image
解释一下

首先,收集和发送信息的脚本是Python写的,所以必须在客户端上装Python,否则你用C或者Java等别的语言写也行。其次,没有哪台计算机会自动地发送数据,你不设置自动发送,或者使用定时任务,那么必然是要手动触发。还有,CMDB实战是一个和运维工程师结合比较紧密的项目,批量安装、设置、管理远程主机是基本功,这些都是隐含的基础需求。

user_image
谢谢

非常感谢博主,受益良多。