TinySnippet轻UI组件开发系列教程 — DataGrid选择事件

应用场景

DataGrid选择一条记录后，希望能够

• 调用纳流
• 或者打开指定的页面
  或者当鼠标悬停在一行时
• 弱出一个指定的页面在右下角（移开就关闭弹出页）

这些都是我们能够实现的

实现过程

本文以调用纳流为例

• 下载UI组件 TinySnippet-v4.1.2
• 导入UI组件
• 新建实体
• 自动生成页面
• 配置页面Entity_Overview

注意TinySnippet要紧挨在一起，这样它就能自动检查到DataGrid

• 配置TinySnippet组件
  • 配置纳流参数和纳流
  • 配置行为代码
• 配置纳流

运行效果

行为代码

let DatagridId = /*"grid1"*/ null;

const widget = this;
let dataGridWidget;

async function onLoad() {
  dataGridWidget = (function findDatagrid(domNode, DatagridId) {
    if (!DatagridId) {
      // 查找domNode的兄弟元素中的类名为mx-datagrid的元素
      const siblingElements = domNode.parentNode.children;
      for (let i = 0; i < siblingElements.length; i++) {
        const sibling = siblingElements[i];
        if (sibling.classList.contains("mx-datagrid")) {
          return dijit.registry.byNode(sibling);
        }
      }
    } else {
      // 查找selector为".mx-name-" + DatagridId的元素
      const selector = ".mx-name-" + DatagridId;
      return dijit.registry.byNode(
        widget.mxform.domNode.querySelector(selector)
      );
    }
    // 如果没有找到匹配的元素，返回null或者适合的默认值
    return null;
  })(widget.domNode, DatagridId);

  const [html, aspect, on, { Big }, dom, mouse, lang] = await injectDeps([
    "dojo/dom-construct",
    "dojo/aspect",
    "dojo/on",
    "big.js",
    "mxui/dom",
    "dojo/mouse",
    "dojo/_base/lang",
  ]);

  aspect.after(
    dataGridWidget,
    "_shareWidgetSelection",
    lang.hitch(widget, onSelectRow)
  );
}

function onSelectRow() {
  const selectGuid = dataGridWidget.selection[0];
  const rowObj = dataGridWidget._mxObjects.find((e) => e._guid == selectGuid);
  if (rowObj && !mendix.lang.objectIsEmpty(widget.onclicknf2)) {
    const mxContext = new mendix.lib.MxContext();
    mxContext.setContext(rowObj);
    mx.data.callNanoflow({ nanoflow: widget.onclicknf2, context: mxContext });
  }
}

function getRowData(e) {
  const rowNode = e.node;
  let tdNode = e.event.target;
  if (!dataGridWidget.domData(tdNode, "name")) {
    tdNode = mxui.dom.getAncestorNode(tdNode, "TD", 3);
  }
  const gridRow = parseInt(dataGridWidget.domData(rowNode, "gridrow"));
  const rowObj = dataGridWidget.getMxObjectAtRow(gridRow);
  return { rowNode, tdNode, rowObj };
}

// framework code
function onTinyReady() {
  //widget first show
  onLoad();
}
async function main() {
  const [html, aspect, on, { Big }, dom, lang] = await injectDeps([
    "dojo/dom-construct",
    "dojo/aspect",
    "dojo/on",
    "big.js",
    "mxui/dom",
    "dojo/_base/lang",
  ]);

  // widget load
  //widget.addOnLoad(onLoad.bind(widget));

  // widget mendix datasource update
  //aspect.after(widget, "update", function () {});

  // widget destroy
  //widget.addOnDestroy(function () {});

  // widget resize
  //aspect.after(widget, "resize", function () {});
  aspect.after(widget, "onTinyReady", lang.hitch(widget, onTinyReady));
}
main();

async function injectDeps(deps) {
  return new Promise((resolve) => {
    if (!Array.isArray(deps)) {
      deps = [deps];
    }
    window.dojoDynamicRequire(deps, function () {
      resolve(Array.from(arguments));
    });
  });
}

function throttle(fn, delay = 500) {
  let _flag = true;
  let args = null;
  return function () {
    if (_flag) {
      args = arguments;
      setTimeout(() => {
        fn.apply(this, args);
        _flag = true;
      }, delay);
      _flag = false;
    }
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

关于Mendix公司

Mendix，a Siemens business是全球企业级低代码的领导者，正在从根本上重塑数字化企业构建应用的方式。企业可通过Mendix低代码软件快速开发平台来扩展自身的开发能力，打破软件开发的瓶颈。借助Mendix开发平台，企业可以打造具备智能、主动性和人机互动等原生体验的智能化应用，对核心系统进行现代化升级并实现规模化应用开发，以跟上业务增长的速度。Mendix低代码软件快速开发平台可在保持最高安全、质量和治理标准的前提下，促进业务与IT团队之间的密切合作，大大缩短应用开发周期，帮助企业自信迈向数字化未来。Mendix的“Go Make It”平台已被全球4000多家领先公司采用。