乐趣区

关于jquery:dtcloud使用jquery和echarts

如何在 dtcloud 中构建前端页面,本文次要介绍在 dtcloud 中如何应用 jquery 和 echarts 等插件

dtcloud中内置了 jqueryBootstrapcss 款式,能够间接应用,并且 dtcloud 能够解析 sass 语法,不便大家编写款式,而 echarts 等文件须要独自加载引入

我的项目目录如下:

  1. echarts 引入
  • 下载 echarts.js 文件,链接如下
    https://cdnjs.com/libraries/echarts
  • 将 echarts.js 放在模块中
  • 在__manifest__.py 中加载该文件
  1. 应用 QWeb 和 jquery 构建页面
    QWeb 是什么?
    是一个基于 xml 的模板引擎,用于生成 HTML 片段和页面,模板指令是写在 xml 标签中的以 t - 结尾的属性,比方 t -if
    如果要让一个标签不被渲染,能够采纳 t 来包裹,这样会执行它外面的命令然而不产生任何输入, 例如:

    <t t-name="pyecharts_template"></t>

    qweb 罕用指令:

  2. t-name 用于指明模板的名称
  3. t-extend 用于指明该模板是继承自另外哪一个模板,前面会带父模板的名称,如:t-extend=“Login”
  4. t-jquery 一个 jQuery 的选择器,前面指明选择器的定义,如:t-jquery=”.oe_logiin”
  5. t-operation 个别跟在 t -jquery 前面,指明选择器找到元素后执行的动作,其值有:append(追加)、replace(替换)
  6. t-if 用于指明元素在页面产生的条件,前面是带一个 javascript 的表达式,返回 True 或 False
  7. t-att-### 用于指明一个元素的属性值,### 是元素的属性名称,如:t-att-value=“javascript 表达式”
  8. t-foreach 用于指明一个循环调用,前面个别带的是一个数组
  9. t-as 用于获得循环中的单个值,与 t -foreach 搭配应用,前面带的是一个变量名,能够循环中应用变量取值
  10. t-esc 用于一个文字输入
  11. t-call 用于调用另外模板,前面带一个模板的名称
  12. t-set 用于设定一个变量,前面带变量的名称,个别跟 t -value 搭配应用
  13. t-value 用于指定某个变量或元素的值

更多理解:https://blog.csdn.net/weixin_44565926/article/details/124851731

2.1 新建一个 xml 模板,用 qweb 申明一个模板,(t-name 申明模板名称,等下要在 js 文件中援用此模板)能够在模板中编写 html 标签内容

2.2 新建一个 load_pyecharts.js 文件,其中 contentTemplate 绑定 xml 模板

2.3 js 代码

start: function () {$(document).ready(function () {// js 代码编写})}

2.4 在__manifest__.py 的 assets 中加载上述 js 和 xml 文件及 css/sass 文件

  1. 增加菜单
  • home.xml 文件

    <?xml version="1.0"?>
    <dtcloud>
      <data>
          <record id="action_pyecharts" model="ir.actions.client">
              <field name="name">Dashboard</field>
              <field name="tag">load_pyecharts</field> // js 文件(core.action_registry.add)注册的名称
          </record>
          <menuitem
              id="menu_pyecharts"
              name="首页"
              font_icon="sidenav-icon feather icon-home"
              action="action_pyecharts"
              groups="base.group_user"
              sequence="10" />
      </data>
    </dtcloud>
  • 在__manifest__.py 的 data 中引入 home.xml 文件
  1. 重启服务、刷新该模块即可看到成果

作者:王步宇

退出移动版