关于jquery:dtcloud使用jquery和echarts

51次阅读

共计 1652 个字符，预计需要花费 5 分钟才能阅读完成。

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

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

我的项目目录如下：

echarts 引入

下载 echarts.js 文件，链接如下
https://cdnjs.com/libraries/echarts
将 echarts.js 放在模块中
在__manifest__.py 中加载该文件

应用 QWeb 和 jquery 构建页面
QWeb 是什么？
是一个基于 xml 的模板引擎，用于生成 HTML 片段和页面，模板指令是写在 xml 标签中的以 t - 结尾的属性，比方 t -if
如果要让一个标签不被渲染，能够采纳 t 来包裹，这样会执行它外面的命令然而不产生任何输入, 例如：
```
<t t-name="pyecharts_template"></t>
```
qweb 罕用指令：
t-name 用于指明模板的名称
t-extend 用于指明该模板是继承自另外哪一个模板，前面会带父模板的名称，如：t-extend=“Login”
t-jquery 一个 jQuery 的选择器，前面指明选择器的定义，如：t-jquery=”.oe_logiin”
t-operation 个别跟在 t -jquery 前面，指明选择器找到元素后执行的动作，其值有：append(追加)、replace(替换)
t-if 用于指明元素在页面产生的条件，前面是带一个 javascript 的表达式，返回 True 或 False
t-att-### 用于指明一个元素的属性值，### 是元素的属性名称，如：t-att-value=“javascript 表达式”
t-foreach 用于指明一个循环调用，前面个别带的是一个数组
t-as 用于获得循环中的单个值，与 t -foreach 搭配应用，前面带的是一个变量名，能够循环中应用变量取值
t-esc 用于一个文字输入
t-call 用于调用另外模板，前面带一个模板的名称
t-set 用于设定一个变量，前面带变量的名称，个别跟 t -value 搭配应用
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 文件

增加菜单

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>