EasyUI表单元素总结

http://blog.csdn.net/u013628152/article/details/43020149

一:easyui-textbox 文本框

定义：

[html]  view plain copy

1. <input id="<span style="font-size:18px;">inputName</span>" class="easyui-textbox"  type="text" />  

取值： $('#inputName').textbox('getText');

赋值： $('#inputName').textbox('setText', ‘liang’);

二：easyui-combobox 下拉框

[html]  view plain copy

1. 定义：  

[html]  view plain copy

1. <input id="<pre name="code" class="javascript">inputType  

" class="easyui-combobox" data-options="required:true, panelHeight:60" />

初始化

[javascript]  view plain copy

1. $('#inputType').combobox(  
2.                 {  
3.                     data : getDictionaryDatas().Type,  
4.                     valueField : 'value',  
5.                     textField : 'label',  
6.                     missingMessage : messageCreator(  
7.                             ValidateMessage.msg_request_field, '类型')  
8.                 });  

取值：$('#inputType').combobox('getValue');

赋值：$('#inputType').combobox('setValue', 1);

三：easyui-numberspinner 数字

定义：

<span class="tag" style="color: rgb(0, 0, 128);"><span style="font-size: 18px;"><<span class="title">input</span> <span class="attribute" style="color: rgb(0, 128, 128);">id</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">ss</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span style="color: rgb(0, 0, 255);"><span class="attribute" style="color: rgb(0, 128, 128);">class</span></span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">easyui-numberspinner</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">style</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">width:80px;</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);">  
        <span class="attribute" style="color: rgb(0, 128, 128);">required</span></span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">required</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">data-options</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">min:10,max:100,editable:false</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span>></span></span>

取值：

<span style="font-size: 18px;"><span style="color: rgb(0, 0, 255);"><span class="keyword" style="color: rgb(51, 51, 51); font-weight: bold;">var</span></span> v = $(<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">#ss</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>).numberspinner(<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">getValue</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>);</span>

赋值：

<span style="font-size: 18px;"><span class="variable" style="color: rgb(0, 128, 128);">$(</span><span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">#ss</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>).numberspinner(<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">setValue</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>, <span style="color: rgb(128, 0, 128);"><span class="number" style="color: rgb(0, 153, 153);">8234725</span></span>);</span>

四：datebox日期

定义：

<span class="tag" style="color: rgb(0, 0, 128);"><span style="font-size:18px;"><<span class="title">input</span> <span class="attribute" style="color: rgb(0, 128, 128);">type</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">text</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">name</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"nn</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">id</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"nn</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span style="color: rgb(0, 0, 255);"><span class="attribute" style="color: rgb(0, 128, 128);">class</span></span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">easyui-datebox</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span><span style="color: rgb(0, 0, 0);">
                        <span class="attribute" style="color: rgb(0, 128, 128);">data</span></span><span class="attribute" style="color: rgb(0, 128, 128);">-options</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">formatter:myDate.InitDateBox.formatter,parser:myDate.InitDateBox. parser</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> /></span></span>

赋值：

<span style="font-size:18px;"><span class="variable" style="color: rgb(0, 128, 128);">$(</span><span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">#SC001_CERTIFICATEVALID</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span>).datebox(<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">setValue</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>, <span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">2014-9-12</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>);</span>

取值：

<span style="font-size:18px;"><span class="variable" style="color: rgb(0, 128, 128);">$(</span><span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">#nn</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>).datebox(<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">getValue</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>),</span>

</pre><pre class="prettyprint ruby" name="code" style="white-space: pre-wrap; word-wrap: break-word; font-size: 15px; padding: 0.3em; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); margin-top: 0px; margin-bottom: 1.5em; line-height: 1.5em; word-break: break-all; overflow-y: auto; background-color: rgb(255, 255, 255);"><strong><span style="font-size: 18px; background-color: rgb(102, 255, 255);"></span></strong>

<strong><span style="font-size: 18px; background-color: rgb(102, 255, 255);">五：单选框</span></strong>

<p style="margin-top: 0px; margin-bottom: 0.75em; padding-top: 0px; padding-bottom: 0px; line-height: 27.1875px; text-indent: 1em; font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);"><span style="font-size:18px;">定义</span></p><pre class="prettyprint xml" name="code" style="white-space: pre-wrap; word-wrap: break-word; padding: 0.3em; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; margin-top: 0px; margin-bottom: 1.5em; line-height: 1.5em; word-break: break-all; overflow-y: auto; background-color: rgb(246, 246, 246);"><span style="font-size:18px;"><span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">td</span> <span class="attribute" style="color: rgb(0, 128, 128);">height</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">30</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">colspan</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">5</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span>></span>
                    <span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">input</span> <span class="attribute" style="color: rgb(0, 128, 128);">type</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">radio</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">name</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">APPLYDEPTTYPE</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">value</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">事业法人</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span style="color: rgb(0, 0, 255);"><span class="attribute" style="color: rgb(0, 128, 128);">checked</span></span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">checked</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> /></span><span style="color: rgb(0, 0, 0);">事业法人
                    </span><span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">input</span> <span class="attribute" style="color: rgb(0, 128, 128);">type</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">radio</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">name</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">APPLYDEPTTYPE</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">value</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">企业法人</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> /></span><span style="color: rgb(0, 0, 0);">企业法人
                    </span><span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">input</span> <span class="attribute" style="color: rgb(0, 128, 128);">type</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">radio</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">name</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">APPLYDEPTTYPE</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">value</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">社团法人</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> /></span><span style="color: rgb(0, 0, 0);">社团法人
                    </span><span class="tag" style="color: rgb(0, 0, 128);"><<span class="title">input</span> <span class="attribute" style="color: rgb(0, 128, 128);">type</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">radio</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">name</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">APPLYDEPTTYPE</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> <span class="attribute" style="color: rgb(0, 128, 128);">value</span>=<span style="color: rgb(128, 0, 0);"><span class="value" style="color: rgb(221, 17, 68);">"</span></span><span class="value" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">其他</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> /></span><span style="color: rgb(0, 0, 0);">其他
                </span><span class="tag" style="color: rgb(0, 0, 128);"></<span class="title">td</span>></span></span>

赋值：

<span style="font-size:18px;"><span style="color: rgb(0, 0, 255);"><span class="keyword" style="color: rgb(51, 51, 51); font-weight: bold;">var</span></span> str =<span style="color: rgb(0, 0, 0);"> result.APPLYDEPTTYPE;
 $(</span><span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">[value='</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span> + str + <span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">']</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span>).attr(<span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">"</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">checked</span><span style="color: rgb(128, 0, 0);">"</span></span><span style="color: rgb(128, 0, 0);"></span>, <span style="color: rgb(0, 0, 255);"><span class="keyword" style="color: rgb(51, 51, 51); font-weight: bold;">true</span></span>);</span>

取值：

<span style="font-size:18px;"><span class="variable" style="color: rgb(0, 128, 128);">$(</span><span style="color: rgb(128, 0, 0);"><span class="string" style="color: rgb(221, 17, 68);">'</span></span><span class="string" style="color: rgb(221, 17, 68);"><span style="color: rgb(128, 0, 0);">input[name="APPLYDEPTTYPE"]:checked</span><span style="color: rgb(128, 0, 0);">'</span></span><span style="color: rgb(128, 0, 0);"></span>).val()</span>

<strong><span style="font-size: 18px; background-color: rgb(102, 255, 255);">
</span></strong>