【泛微成功客户投稿】我与泛微OA系统check框的恩怨情仇,每一个朴素的选择框,都是变身升级的潜力股

【泛微成功客户投稿】我与泛微OA系统check框的恩怨情仇，每一个朴素的选择框，都是变身升级的潜力股

来源：泛微华南发布日期2020-06-22 00:47浏览：

后端出身的我，对c#、java都略懂一点，有样例能搬出类似的功能。（我不是程序员，我只是代码的搬运工）因为需要和数据库打交道，对简单的sql语句、存储过程、视图都有一些了解。现在主做前端，经常和HTML、CSS、JS打交道。习惯用原生js解决一些基础问题。喜欢用谷歌的调试器。总结起来一句话，HTML、CSS、JS熟悉，其他的会用一点。

各位好，我是今天的主角——选择框。

由于我点击后总是会向下拉伸，

也有人叫我下拉框。

但这些名称都不是重点。

最近经常有人投诉，

说我长得丑！！！

还总问为什么系统里面没有radio。

哼，你们这群没眼光的人啊，

竟然发现不了我的美。

虽然本仙女现在长相一般，

但那时因为我懒得收拾，

待本仙女收拾一番，

定要让你们的口水止不住，哼。

我可是一个骄傲而且会变身的仙女呢。

你们等着，

本仙女这就去好好打扮一番。

1

变身记

记住我现在的样子。

*&…￥#，变身1

！

现在我只有底下的框。

如果你也想学我，

请在代码块里念以下咒语。

</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">         select{</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   background-color: inherit;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   border: 0!important;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   border-bottom: 1px solid #E9E9E2!important;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">         }</p><p style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">

黑黑的三角不符合本仙女的气质。

*&…￥#，变身2

！

</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">         select{</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   background-color: inherit;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   border: 0!important;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   border-bottom: 1px solid #E9E9E2!important;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;"> </p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   appearance:none;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   -moz-appearance:none;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   -webkit-appearance:none;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">         }</p><p style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">

*&…￥#，变身3！

</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">         select{</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   background-color: inherit;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   border: 1px solid #E9E9E2!important;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   border-radius: 5px;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   color: #333;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   height: 25px!important;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   padding: 0 5px;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">                   width: 100px;</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">         }</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">

哼，还敢嫌我丑么？

你们就不能好好打扮打扮我么？！

2

变身记之check变身

上次听到有人说，当选择框只存是/否的时候，用check框比较好。本仙女很不服啊！

有时候，Check框的不勾选无法清晰表示，这个框是未勾选还是上一个操作者就是不想勾选。而且如果要根据勾选与不勾选，让后面的字段联动必填、编辑，如果用check框还需要写蛮多代码的。

当你需要一个check框，还需要联动其他字段必填、编辑、只读、隐藏，而且还不想一个字段一个字段控制的时候，请用本仙女的如下咒语。

$(document).ready(function(){

         initCheck("8739"); //下拉框的id，下拉框的0为勾选，1为未勾选

});

///初始化radio

function initCheck(_id){

         $("#field" + _id).parent().find(".checkBox").remove(); //删除之前的

         $("#field" + _id).hide();                              //隐藏下拉框

         if($("#field" + _id).val() == ""){ $("#field" + _id).val(1); } //如果未选择，将下拉框置为未勾选

         //追加check，并根据是否为0进行勾选

         $("#field" + _id).after(

"

                   (($("#field" + _id).val() == 0)? "checked ": "") +

                   "onchange='change2Select(this)'>"

);

}

///联动select的值

function change2Select(_this){

         //根据是否勾选，联动下拉框

         if($(_this).is(":checked")) $(_this).prev().val(0);

         else $(_this).prev().val(1);

         $(_this).prev().change();//触发change事件

}

，

变身前我是个选择框

变身之后我是个会联动的check框

3

变身记之radio变身

总是听人问，我想要像紧急程度那样的radio怎么做？麻烦各位把目光放在本仙女身上！可以在表单中直接使用一个系统自带的函数cus_ConvertSelectToRadio。当然，如果你js厉害，自己写个函数也行。

$(document).ready(function(){

         cus_ConvertSelectToRadio("field8739");

         //如果需要设置多个，就用逗号隔开，例如"field8739,field8740"

         //此下拉框如果绑定属性联动，则可能会在第一次点击时出现异常

});

，

变身前我是个选择框

变身之后我是个radio框

当然，本仙女会的变身技能不仅如此。

我还可以变身按钮，

点击后直接提交。。。

当你学会了js，

我可以变成你需要的样子。

4

提示

如果你需要——

当鼠标放到选择框的上面时，

有提示信息。例如

$(document).ready(function(){

$("#field8739").attr("title", "can you see me?");

});

顺便提一句，

如果是文本框需要加

这种——当没有输入时提示、

但有输入时不显示的文字，

请用 $("#field8739").attr("placeholder", 

"请填写主送人"); ）

5

犹抱琵琶半遮面

在某些节点你只想看到本仙女的一部分，在某些节点你又只想看到本仙女的另一部分。这样你肯定不能只设置部分选项！所以你需要将所有选项都加上，然后让css来帮你。

</p><p style="margin: 0px 0px 1.6px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">#field10137 option[value='0'], #field10137 option[value='5']{ display: none; }</p><p style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box; word-wrap: break-word !important; clear: both; min-height: 1em;">

你将上面的代码放到代码块里

（不要放到之间！！！）

就可以发现选择框的0和5

所代表的的选项不见了。

神秘的我让你猜不透（斜眼笑）

6

选择联动

。

代码多了，是不是有点撑？别急，轻松一下！我们来看看关于独立选择框，系统上有一个小功能，叫

怎么用呢？比如我们现在有两个独立选择框 字段D、字段E。字段D可以选”A”/”B”。字段E可以选1/2/3/4。现在当字段D选择“A”，字段E只能选择1/2。当字段D选择“B”，字段E只能选择3/4。按照如下设置，我们就可以实现啦！

7

文档联动

有时候，

如果我们需要根据不同的分类，

将不同的附件上传至不同的目录下。

在表单管理里面的选项维护，

设置关联目录。

然后在基础设置里面，

更改附件上传目录。

8

数据表名

最后的最后，本仙女自报家门。我有两个分身，独立选择框、公共选择框。

独立选择框：这个分身是来自于workflow_selectitem 山，师傅(fieldid)来自workflow_billfield 仙府。世人多问如何能找到他？负号+表单的数据库表名中的数字，合并起来便是他的billid。例如（-122）。

公共选择框：这个分身来自mode_selectitempage 圣池，你往那selectitemname 里面瞄一瞄，就能找到了。若你要详细的看看本仙女，请移步 mode_selectitempagedetail ，根据mainid看一看，就能一窥本仙女的真容。

哎，仙女不能熬夜的！

本仙女要睡美容觉了。

大家散了吧。

深圳oa软件系统

【泛微成功客户投稿】我与泛微OA系统check框的恩怨情仇，每一个朴素的选择框，都是变身升级的潜力股

来源：泛微华南发布日期2020-06-22 00:47浏览：

【本文标签】：泛微OA成功客户 check框 泛微OA系统check框

【责任编辑】：泛微华南版权所有：http://www.hnweaver.com/ 转载请注明出处

热点新闻/ hot news

快速通道

关于盗用我公司名义进行网上推广活动的声明

试用申请

资料下载申请

深圳oa软件系统

【泛微成功客户投稿】我与泛微OA系统check框的恩怨情仇，每一个朴素的选择框，都是变身升级的潜力股

来源：泛微华南发布日期2020-06-22 00:47浏览：

【本文标签】：泛微OA成功客户 check框 泛微OA系统check框

【责任编辑】：泛微华南版权所有：http://www.hnweaver.com/ 转载请注明出处

热点新闻/ hot news

快速通道

关于盗用我公司名义进行网上推广活动的声明

试用申请

资料下载申请

【本文标签】：泛微OA成功客户 check框泛微OA系统check框