miniUI控件checkbox

Bertha 。 2022-06-10 13:22 568阅读 0赞

加班一周，所有的任务都完成了，吐槽一下，上周三开会的吧，周一出来了详细设计和RP，开始做任务，我的任务基本都是增删改查审核和打印。。。其他人的有一览还有其余的，我还有对应的需求变更，还有新增的接口要写，其实写代码没有用多长时间，主要花在了看需求上。。。如果遇到一个狗屎需求，开发就等着头疼吧。自己写的自己都不明白，一个子系统的需求全是一个人负责写需求，真的好差劲。需求问题每天都是晚上才给我邮件回复，我只能晚上加班了。。。。早上九点还要上班，老大还说不要连着加班，不加班能完成吗？？？  
入正题，谈一下miniUI中的checkbox控件  
一般我们都会使用如下代码使用checkbox

当然如果你是修改什么的，这个value值直接可以用EL表达式取，比如`value="${vo.id}"`.  
我的需求是这样的:  
根据后台返回的字符串，自动勾选对应的条款，然后点击保存，自动关闭窗口并且将值映射到父窗口的textarea中。

<td >
       <input id="ylzd10" name="ylzd10"  class="mini-checkbox"  onvaluechanged="getContent"  readonly="false"/>
                    </td>
                    <td >
                        （1）训练小儿爬行、扶站、学着迈步，练习拍手、招手、手指捏细小物品。引导发音，如"爸爸、妈妈"
                        （2）添加厚粥、面条、蛋糕、碎菜、碎肉及豆制品等。母乳不足者补喂配方奶。
                    </td>

后台我会查询返回一个字符串，然后我根据字符串中的值默认勾选对应的条款，  
问题是：我获取到值以后对checkbox进行勾选并且可以获得对应的条款文本内容，将文本内容映射到父窗口的textarea中。  
解决方法：  
（1）将后台返回的字符串转为字符串数组，然后循环，将对应的checkbox进行勾选：

提示：  
（1）checkbox控件，可以通过`mini.get('id').setChecked(true)`来进行勾选  
（2）checkbox控件只读，不允许你手动勾选，可以添加属性`readonly='false'`该属性表示只读。  
到这里我们完成了默认勾选。下面说如何获取对应checkbox的文本内容，通过查API，我们知道checkbox有一个onvaluechanged事件，只要值发生变化就会触发这个事件，具体讲解如下：  
![这里写图片描述][SouthEast]  
我写了一个通用的方法来获取默认选中时的文本内容，代码实现如下：

function getContent(eve) {
            this.getChecked() && (content += this.el.parentElement.nextElementSibling.innerText);
        }

（1）首先判断是否选中，如果选中在通过js来获取对应的条款的text。  
到此，获取文本内容也完成了，下面会说如何通过点击保存将获取的文本内容映射到父窗口的对应区域（子窗口是通过点击父窗口上一个按钮弹出）  
具体实现如下：  
（1）在父窗口的页面中我们定义一个：

top["win"]=window;

（2）在子窗口的js中，我们可以如下实现：

var content = '';
        function save(){
            top["win"].mini.get("zdcl").setValue(content);
            window.CloseOwnerWindow();
        }

其中有一个需要注意，你要把获取的值映射到父窗口的哪个区域，一定是`top["win"].mini.get("父窗口对应控件的id").setValue(子窗口的内容);`  
到此，整个功能默认勾选checkbox,获取对应文本内容，并且保存映射到父窗口就完成了。  
ps:如果您有更好的办法，可以提供出来，谢谢  
具体的mini-chekbox文档链接如下：  
[http://www.miniui.com/docs/api/index.html\#ui=checkbox][http_www.miniui.com_docs_api_index.html_ui_checkbox]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]

[SouthEast]: /images/20220610/568ea0f924a14ce39c53a487f2e0a206.png
[http_www.miniui.com_docs_api_index.html_ui_checkbox]: http://www.miniui.com/docs/api/index.html#ui=checkbox
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzQzMjU_size_16_color_FFFFFF_t_70]: /images/20220610/b999859579434a9da0467f5e0ac199d1.png