dg-dashboard-form

功能：定义看板表单，设置看板级的交互操作表单，联动看板内任意图表。

必填：是

元素：<form>

格式：

  1. {
  2.   //必选，表单输入项对象、数组
  3.   items: 表单输入项对象、 [ 表单输入项对象, ... ],
  4.   //可选，表单提交操作时执行的联动图表设置
  5.   link: 图表联动设置对象,
  6.   //可选，表单提交按钮文本
  7.   submitText: "...",
  8.   //可选，图表渲染完成回调函数
  9.   //form 表单DOM对象
  10.   render: function(form){ ... }
  11. }

其中

表单输入项对象格式为：

  1. {
  2.   //必选，输入项名称
  3.   name: "...",
  4.   //可选，默认值
  5.   value: ...,
  6.   //可选，输入项标签
  7.   label: "...",
  8.   //可选，输入项类型："STRING" 字符串；"BOOLEAN" 布尔值；"NUMBER" 数值。默认值为："STRING"
  9.   type: "...",
  10.   //可选，是否必填：true 必填；false 选填。默认为false
  11.   required: ...,
  12.   //可选，输入框类型：
  13.   //"text" 文本框；"select" 下拉框；"date" 日期框；"time" 时间框；"datetime" 日期时间框；
  14.   //"radio" 单选框；"checkbox" 复选框；"textarea" 文本域。默认值为："text"
  15.   inputType: "...",
  16.   //可选，输入框配置，与定义数据集-设置参数输入框类型表格中的输入框配置格式相同
  17.   inputPayload: ...,
  18.   //可选，此表单输入项值要联动设置到的目标图表数据集参数
  19.   link: 图表数据集参数索引对象、[ 图表数据集参数索引对象, ... ]
  20. }

图表联动设置对象格式为：

  1.  {
  2.   //必选，联动目标图表元素ID、ID数组
  3.   target: "..."、["...", ...],
  4.   //可选，联动数据设置
  5.   data:
  6.   {
  7.     表单输入项名称 : 图表数据集参数索引对象、[ 图表数据集参数索引对象, ... ],
  8.     ...
  9.   }

或者，可简写为图表联动设置对象的target属性值。

图表数据集参数索引对象用于定义表单输入项值要设置到的目标图表数据集参数，格式为：

  1. {
  2.   //可选，目标图表在上述图表联动设置对象的target数组中的索引数值，默认为：0
  3.   chart: ...,
  4.   //可选，目标图表数据集数组的索引数值，默认为：0
  5.   dataSet: ...,
  6.   //可选，目标图表数据集的参数数组索引/参数名，默认为：0
  7.   param: ...,
  8.   //可选，自定义映射源值至目标参数值处理函数
  9.   //sourceValue 表单输入项值
  10.   //formData 看板表单数据对象：{ 表单输入项名称 : 表单输入项值, ... }
  11.   //form 看板表单DOM对象
  12.   value: function(sourceValue, formData, form){ return ...; }
  13. }

或者，可简写为图表数据集参数索引对象的param属性值。

示例：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var dashboarForm =
  5. {
  6.   items:
  7.   [
  8.     {
  9.       name: "地区", inputType: "select",
  10.       inputPayload:
  11.       [
  12.         {name: '北京',value: '北京'},
  13.         {name: '上海',value: '上海'},
  14.         {name: '广州',value: '广州'}
  15.       ],
  16.       //将此输入项的值分别设置为chart0、chart1的第0个数据集的第0个参数值
  17.       link: [{chart: 0}, {chart: 1}]
  18.     },
  19.     {
  20.       name:"日期", inputType:"date",
  21.       //将此输入项的值分别设置为chart0、chart1的第0个数据集的第1个参数值
  22.       link: [{chart: 0, param: 1}, {chart: 1, param: 1}]
  23.     }
  24.   ],
  25.   //当表单提交时，联动图表chart0、chart1
  26.   link: ["chart0", "chart1"]
  27. };
  28. </script>
  29. </head>
  30. <body>
  31.   <form dg-dashboard-form="dashboarForm" class="dg-inline"></form>
  32.   <div id="chart0" dg-chart-widget="..."></div>
  33.   <div id="chart1" dg-chart-widget="..."></div>
  34. </body>
  35. </html>

系统内置了一些常用的看板表单布局样式类，可添加至<form>看板表单元素的class属性，具体包括：

样式类名样式说明
dg-inline表单内所有标签、输入框、提交按钮显示在单行内
dg-col-2表单输入项条目分两列显示，提交按钮在新行中显示
dg-col-3表单输入项条目分三列显示，提交按钮在新行中显示
dg-col-4表单输入项条目分四列显示，提交按钮在新行中显示
dg-col-5表单输入项条目分五列显示，提交按钮在新行中显示
dg-item-inline表单输入项条目的标签、输入框在单行中显示，可与dg-col-*组合使用