表单-数据采集 #40
Comments
使用说明设计完成后的“数据采集”元素，可以拿出来在其它页面中单独使用。 如何独立使用参考：独立使用设计元素 事件派发
派发的事件参数对象如下 elementType: 'form-collect',//针对数据采集元素则是写死的form-collect
elementProps: stringifyProps,//数据采集元素包含子元素序列化后的JSON字符串，包含用户输入，可供还原界面使用
elementValue: values,//针对所有输入框单独提取的一份独立的用户输入数据
elementInputs//所有可供用户输入的输入框DOM对象监听、收集数据假设 <body>
<div class="page-root">
<div id="form_collect"></div>
</div>
</body>
<script src="path/to/standalone.js"></script>
<script>
designer.element('#form_collect',{...});
</script>可以在 <body>
<div class="page-root">
<div id="form_collect"></div>
</div>
</body>
<script src="path/to/standalone.js"></script>
<script>
document.body.addEventListener('elementinput',console.log(e));
designer.element('#form_collect',{...});
</script>当用户有任何输入时，均会在控制台中打印出相应的数据。 验证数据假设需要对全部或部分输入框做校验，也是在 <style>
html body .red{border-color:red!important}
</style>
<body>
<div class="page-root">
<div id="form_collect"></div>
</div>
</body>
<script src="path/to/standalone.js"></script>
<script>
document.addEventListener('elementinput',e=>{
for(let input of e.elementInputs){
if(input.value && !/^\d+$/.test(input.value)){//如果输入不是数字
input.node.classList.add('red');//使输入框变成红色框
}else{
input.node.classList.remove('red');//如果合法，移除红色框
}
}
console.log(e);
});
designer.element('#form_collect',{...});
</script>数据采集元素初始化完成后，会自动派发一次elementinput事件，这主要是为了完成如上的数据验证，同时也是为了处理下面提到的回显 回显
回显方案一如果在 回显方案二如果在 <body>
<div class="page-root">
<div id="form_collect"></div>
</div>
</body>
<script src="path/to/standalone.js"></script>
<script>
designer.element('#form_collect',{
id:"e_180",
type:"form-collect",
data:formCollectData
props:{
//...
}
});
</script>在渲染“数据采集”元素时，需要在 如果采用该方案，则props对象中使用设计器产出的即可，不要求是 “数据采集”元素会根据数据 直接获取数据如果不方便使用事件监听的方式进行获取数据，则可以使用该方法 首先调用 完整示例如下 <body>
<div class="page-root">
<div id="form_collect"></div>
</div>
</body>
<script src="path/to/standalone.js"></script>
<script type="module">
designer.element('#form_collect',{...});
let vf = await designer.getVframe('#form_collect');
let result = await vf.invoke('getValue');
// 或者使用promise版本
designer.getVframe('#collect').then( vf => vf.invoke('getValue')).then( result => console.log(result));
</script>线上demo页面：https://xinglie.github.io/report-designer/standalone.html |
动态添加行仅数据行支持在最终用户使用时，可动态添加和删除行。 仅能删除动态添加的行，不能删除设计器中设置的原始行。 动态添加的行添加在最后一行数据行那里，即合计行的前面。 只读模式<body>
<div class="page-root">
<div id="form_collect"></div>
</div>
</body>
<script src="path/to/standalone.js"></script>
<script>
designer.element('#form_collect',{
id:"e_180",
type:"form-collect",
readonly:trueOrFalse,//如果readonly为true，则数据采集表格只读，无添加删除行的按钮，所有input框增加readonly属性
props:{
//...
}
});
</script> |
该元素基于"数据-数据表格"构建而来，数据表格帮助信息可参考：数据-数据表格
首先添加“数据采集”元素到设计区
行介绍
头
它可与下面的标题行配合制作复杂的表头，也可以作为容器，承载其它元素。头支持添加行、拆分、合并单元格等操作。
如果不需要，可以在属性面板中对头进行隐藏
标题行
用于描述数据列的标题，标题行只允许一行，且不允许合并拆分单元格，如果需要复杂的表头，需要和头进行配合使用。
数据行
用于显示静态数据或输入框，用于采集数据，数据行支持添加、删除行，但在只有一行时，禁止删除。同时它也不支持拆分合并单元格
合计行
用于对数据行的求和等功能，它也不支持添加行、拆分单元格等操作
如不需要，可以在属性面板中隐藏
尾
与头的功能相同，支持添加行、拆分、合并单元格等操作，允许自定义复杂的格子。
如不需要，可在属性面板中隐藏
数据采集头、合计、尾隐藏后，就是一个基础的表格
设置输入框
首先选中某个单元格，在右侧属性面板中，格子内容选择输入框即可
不同的格子内容，下方可供配置的选项不同，输入框的相关配置信息可参考：表单-输入框
至此我们就完成了在设计器中对“数据采集”的介绍，关于使用请参考下方的使用说明
The text was updated successfully, but these errors were encountered: