惯例广告一发，对于初学真，真的很有用www.java1234.com，去试试吧！

一头扎进EasyUI第11讲

、基本下拉组件

     <select id="cc" style="width:150px"></select>

     <div id="sp">

          <div style="color:#99BBE8;background:#fafafa;padding:5px;">选择一种语言</div>

          <input type="radio" name="lang" value=""><span>Java</span><br/>

          <input type="radio" name="lang" value=""><span>C#</span><br/>

          <input type="radio" name="lang" value=""><span>Ruby</span><br/>

          <input type="radio" name="lang" value=""><span>Basic</span><br/>

          <input type="radio" name="lang" value=""><span>Fortran</span>

     </div>

     <script type="text/javascript">

          $(function(){

               $('#cc').combo({

                    required:true,

                    editable:false

               });

               $('#sp').appendTo($('#cc').combo('panel'));

               $('#sp input').click(function(){

                    var v = $(this).val();

                    var s = $(this).next('span').text();

                    $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');

               });

          });

     </script>

一头扎进EasyUI第12讲

、公共代码

[{

     "id":,

     "text":"Java",

     "desc":"Write once, run anywhere"

},{

     "id":,

     "text":"C#",

     "desc":"One of the programming languages designed for the Common Language Infrastructure"

},{

     "id":,

     "text":"Ruby",

     "selected":true,

     "desc":"A dynamic, reflective, general-purpose object-oriented programming language"

},{

     "id":,

     "text":"Perl",

     "desc":"A high-level, general-purpose, interpreted, dynamic programming language"

},{

     "id":,

     "text":"Basic",

     "desc":"A family of general-purpose, high-level programming languages"

}]

、基本下拉框组件

     <select class="easyui-combobox" name="sheng" style="width:200px;">

          <option value="河北省">河北省</option>

          <option value="山东省">山东省</option>

          <option value="辽宁省">辽宁省</option>

          <option value="黑龙江省">黑龙江省</option>

          <option value="吉林省">吉林省</option>

          <option value="甘肃省">甘肃省</option>

          <option value="青海省">青海省</option>

          <option value="河南省">河南省</option>

          <option value="江苏省">江苏省</option>

          <option value="湖北省">湖北省</option>

          <option value="湖南省">湖南省</option>

          <option value="江西省">江西省</option>

          <option value="浙江省">浙江省</option>

          <option value="广东省">广东省</option>

          <option value="云南省">云南省</option>

          <option value="福建省">福建省</option>

          <option value="台湾省">台湾省</option>

          <option value="海南省">海南省</option>

          <option value="山西省">山西省</option>

          <option value="四川省">四川省</option>

          <option value="陕西省">陕西省</option>

          <option value="贵州省">贵州省</option>

          <option value="安徽省">安徽省</option>

     </select>

、动态加载数据

     <div style="margin:10px 0;">

          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#language').combobox('reload', '../combobox/combobox_data1.json')">加载数据</a>

     </div>

     <input class="easyui-combobox" id="language" name="language"

               data-options="valueField:'id',textField:'text'">

、下拉框多选

     <input class="easyui-combobox"

               name="language"

               data-options="

                         url:'../combobox/combobox_data1.json',

                         valueField:'id',

                         textField:'text',

                         multiple:true,

                         panelHeight:'auto'

               ">

     panelHeight高度自适应

、导航下拉框

     <div style="margin:10px 0;">

          <input type="checkbox" checked onchange="$('#cc').combobox({selectOnNavigation:$(this).is(':checked')})">

          <span>导航选中</span>

     </div>

     <select id="cc" class="easyui-combobox" name="sheng" style="width:200px;">

          <option value="河北省">河北省</option>

          <option value="山东省">山东省</option>

          <option value="辽宁省">辽宁省</option>

          <option value="黑龙江省">黑龙江省</option>

          <option value="吉林省">吉林省</option>

          <option value="甘肃省">甘肃省</option>

          <option value="青海省">青海省</option>

          <option value="河南省">河南省</option>

          <option value="江苏省">江苏省</option>

          <option value="湖北省">湖北省</option>

          <option value="湖南省">湖南省</option>

          <option value="江西省">江西省</option>

          <option value="浙江省">浙江省</option>

          <option value="广东省">广东省</option>

          <option value="云南省">云南省</option>

          <option value="福建省">福建省</option>

          <option value="台湾省">台湾省</option>

          <option value="海南省">海南省</option>

          <option value="山西省">山西省</option>

          <option value="四川省">四川省</option>

          <option value="陕西省">陕西省</option>

          <option value="贵州省">贵州省</option>

          <option value="安徽省">安徽省</option>

     </select>

、下拉框自定义格式

     <div class="demo-info" style="margin-bottom:10px">

          <div class="demo-tip icon-tip"></div>

          <div>如何在下拉框中自定义格式.</div>

     </div>

     <input class="easyui-combobox" name="language" data-options="

                    url: '../combobox/combobox_data1.json',

                    valueField: 'id',

                    textField: 'text',

                    panelWidth: ,

                    panelHeight: 'auto',

                    formatter: formatItem

               ">

     <script type="text/javascript">

          function formatItem(row){

               var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +

                         '<span style="color:#888">' + row.desc + '</span>';

               return s;

          }

     </script>     

、下拉框组件相关操作

<div style="margin:10px 0;">

          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">设置值</a>

          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">获取值</a>

          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">禁用</a>

          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">启用</a>

     </div>

     <script type="text/javascript">

          function setvalue(){

               $.messager.prompt('设置值','请输入一个值(张三,李四,王八等):',function(v){

                    if (v){

                         $('#state').combobox('setValue',v);

                    }

               });

          }

     </script>

     <select id="state" class="easyui-combobox" name="sheng" style="width:200px;">

          <option value="河北省">河北省</option>

          <option value="山东省">山东省</option>

          <option value="辽宁省">辽宁省</option>

          <option value="黑龙江省">黑龙江省</option>

          <option value="吉林省">吉林省</option>

          <option value="甘肃省">甘肃省</option>

          <option value="青海省">青海省</option>

          <option value="河南省">河南省</option>

          <option value="江苏省">江苏省</option>

          <option value="湖北省">湖北省</option>

          <option value="湖南省">湖南省</option>

          <option value="江西省">江西省</option>

          <option value="浙江省">浙江省</option>

          <option value="广东省">广东省</option>

          <option value="云南省">云南省</option>

          <option value="福建省">福建省</option>

          <option value="台湾省">台湾省</option>

          <option value="海南省">海南省</option>

          <option value="山西省">山西省</option>

          <option value="四川省">四川省</option>

          <option value="陕西省">陕西省</option>

          <option value="贵州省">贵州省</option>

          <option value="安徽省">安徽省</option>

     </select>

一头扎进EasyUI第13讲

、公共代码

{"total":,"rows":[

     {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

     {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

     {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

     {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

     {"selected":true,"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

     {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

     {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

     {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

     {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

     {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}

]}

、基本下拉表格组件

     <select class="easyui-combogrid" style="width:250px" data-options="

               panelWidth: ,

               idField: 'itemid',

               textField: 'productname',

               url: '../combogrid/datagrid_data1.json',

               columns: [[

                    {field:'itemid',title:'产品编号',width:},

                    {field:'productname',title:'产品名称',width:},

                    {field:'listprice',title:'市场价',width:,align:'right'},

                    {field:'unitcost',title:'成本价',width:,align:'right'},

                    {field:'attr1',title:'描述',width:},

                    {field:'status',title:'状态',width:,align:'center'}

               ]],

               fitColumns: true

          ">

     </select>

、为下拉表格赋初值

      <input class="easyui-combogrid" style="width:250px" value="EST-12" data-options="

               panelWidth: ,

               idField: 'itemid',

               textField: 'productname',

               url: '../combogrid/datagrid_data1.json',

               columns: [[

                    {field:'itemid',title:'产品编号',width:},

                    {field:'productname',title:'产品名称',width:},

                    {field:'listprice',title:'市场价',width:,align:'right'},

                    {field:'unitcost',title:'成本价',width:,align:'right'},

                    {field:'attr1',title:'描述',width:},

                    {field:'status',title:'状态',width:,align:'center'}

               ]],

               fitColumns: true

          ">

、下拉表格多选

      <select class="easyui-combogrid" style="width:250px" data-options="

               panelWidth: ,

               multiple: true,

               idField: 'itemid',

               textField: 'productname',

               url: '../combogrid/datagrid_data1.json',

               columns: [[

                    {field:'ck',checkbox:true},

                    {field:'itemid',title:'产品编号',width:},

                    {field:'productname',title:'产品名称',width:},

                    {field:'listprice',title:'市场价',width:,align:'right'},

                    {field:'unitcost',title:'成本价',width:,align:'right'},

                    {field:'attr1',title:'描述',width:},

                    {field:'status',title:'状态',width:,align:'center'}

               ]],

               fitColumns: true

          ">

     </select>

、导航下拉表格

      <div style="margin:10px 0">

          <input type="checkbox" checked onchange="$('#cc').combogrid({selectOnNavigation:$(this).is(':checked')})">

          <span>导航选中</span>

     </div>

     <select id="cc" class="easyui-combogrid" style="width:250px" data-options="

               panelWidth: ,

               idField: 'itemid',

               textField: 'productname',

               url: '../combogrid/datagrid_data1.json',

               columns: [[

                    {field:'itemid',title:'产品编号',width:},

                    {field:'productname',title:'产品名称',width:},

                    {field:'listprice',title:'市场价',width:,align:'right'},

                    {field:'unitcost',title:'成本价',width:,align:'right'},

                    {field:'attr1',title:'描述',width:},

                    {field:'status',title:'状态',width:,align:'center'}

               ]],

               fitColumns: true

          ">

     </select>

、下拉表格相关操作

      <div style="margin:10px 0">

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getValue()">获取值</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setValue()">设置值</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="disable()">禁用</a>

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="enable()">启用</a>

</div>

<input id="cc" class="easyui-combogrid" style="width:250px" data-options="

panelWidth: ,

idField: 'itemid',

textField: 'productname',

url: '../combogrid/datagrid_data1.json',

columns: [[

{field:'itemid',title:'产品编号',width:},

{field:'productname',title:'产品名称',width:},

{field:'listprice',title:'市场价',width:,align:'right'},

{field:'unitcost',title:'成本价',width:,align:'right'},

{field:'attr1',title:'描述',width:},

{field:'status',title:'状态',width:,align:'center'}

]],

fitColumns: true

">

<script type="text/javascript">

function getValue(){

var val = $('#cc').combogrid('getValue');

alert(val);

}

function setValue(){

$('#cc').combogrid('setValue', 'EST-13');

}

function disable(){

$('#cc').combogrid('disable');

}

function enable(){

$('#cc').combogrid('enable');

}

</script>

一头扎进EasyUI3的更多相关文章

  1. 一头扎进EasyUI2

    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 一头扎进EasyUI第6讲 .日历组件 <div class="easyui-calendar&quo ...

  2. 一头扎进EasyUI

    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 一头扎进EasyUI第1讲 .加载库文件和样式 <link rel="stylesheet" ...

  3. 《一头扎进》系列之Python+Selenium框架设计篇3- 价值好几K的框架，狼来了，狼来了....，狼没来，框架真的来了

    1. 简介 前边宏哥一边一边的喊框架,就如同一边一边的喊狼来了!狼来了!.....这回是狼没有来,框架真的来了.从本文开始宏哥将会一步一步介绍,如何从无到有地创建自己的第一个自动化测试框架.这一篇,我 ...

  4. 《一头扎进》系列之Python+Selenium框架设计篇4- 价值好几K的框架，呵！这个框架有点意思啊

    1.简介 前面文章,我们实现了框架的一部分功能,包括日志类和浏览器引擎类的封装,今天我们继续封装一个基类和介绍如何实现POM.关于基类,是这样定义的:把一些常见的页面操作的selenium封装到bas ...

  5. 《一头扎进》系列之Python+Selenium框架设计篇5 - 价值好几K的框架，哎呦！这个框架还真有点料啊！！！

    1. 简介 其实,到前面这一篇文章,简单的Python+Selenium自动化测试框架就已经算实现了.接下来的主要是介绍,unittest管理脚本,如何如何加载执行脚本,再就是采用第三方插件,实现输出 ...

  6. 《一头扎进》系列之Python+Selenium自动化测试框架实战篇6 - 价值好几K的框架，呦！这个框架还真牛叉哦！！！

    1. 简介 本文开始介绍如何通过unittest来管理和执行测试用例,这一篇主要是介绍unittest下addTest()方法来加载测试用例到测试套件中去.用addTest()方法来加载我们测试用例到 ...

  7. 《一头扎进》系列之Python+Selenium框架实战篇7 - 年底升职加薪，年终奖全靠它！Merry Christmas

    1. 简介 截止到上一篇文章为止,框架基本完全搭建完成.那么今天我们要做什么呢????聪明如你的小伙伴或者是童鞋一定已经猜到了,都测试完了,当然是要生成一份高端大气上档次的测试报告了.没错的,今天宏哥 ...

  8. 一头扎进 JAVA

    硅不可 吉米 JAVA 基础 -- 基础不牢,地动山摇 子类应该比 父类更为 开放 (public protected default private) 子类方法不能比父类抛出更高异常( 可以为父类方 ...

  9. 《一头扎进SpringMvc视频教程》

    第二章 SpringMvc控制器 第三章 Rest风格的资源URL 第四章 SpringMvc上传文件

随机推荐

  1. Vrrp协议

    一.简介 VRRP(Virtual Router Redundancy Protocol)协议是用于实现路由器冗余的协议,最新协议在RFC3768中定义,原来的定义RFC2338被废除,新协议相对还简 ...

  2. mysql force index() 强制索引的使用

    mysql force index() 强制索引的使用 之前跑了一个SQL,由于其中一个表的数据量比较大,而在条件中有破坏索引或使用了很多其他索引,就会使得sql跑的非常慢... 那我们怎么解决呢? ...

  3. seq 显示00 01的格式

    for i in `seq -w 00 20` ; do echo $i ;done 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 ...

  4. DW Basic Knowledge1

    以下内容,常读常新,每次都有新的感悟和认识. 数据仓库必须使组织机构的信息变得容易存取. 数据仓库的内容需要是容易理解的,数据对业务人员也必定是直观的,明显的. 数据仓库重新组织了原来OLTP数据库的 ...

  5. Python天猫淘宝评论爬虫

    说明 由于Github 打包的exe某些文件上传被.gitignore了,所以不提供windows二进制包 https://github.com/hunterhug/taobaocomment 一个抓 ...

  6. Junit使用GroboUtils进行多线程测试

    写过Junit单元测试的同学应该会有感觉,Junit本身是不支持普通的多线程测试的,这是因为Junit的底层实现上,是用System.exit退出用例执行的.JVM都终止了,在测试线程启动的其他线程自 ...

  7. Android安全机制（2） Android Permission权限控制机制

    http://blog.csdn.net/vshuang/article/details/44001661 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.概述 Andro ...

  8. css3爆炸效果更换图片轮播图

    思路:给一个div设置一个背景图片1.jpg,然后在这个div上面用两个for循环动态的创建一个列数为C行数为R数量的span,并给这些span设置宽高.定位并设置背景图片0.jpg,然后设置每个sp ...

  9. Node.js之Promise

    2015年发布了ES6标准,所谓 Promise,就是ES6标准的一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步 ...

  10. 通过jekyll建立静态网页

    部署一个网站需要三个步骤:(1) generating the site, (2) deploying it to the public Internet, and (3) assigning it ...