惯例广告一发，对于初学真，真的很有用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. 2014年小结之sql语句优化

    之前接手一个数据统计处理的小程序,本来逻辑上并没什么,只是数据量略大,某些表的数据达到了千万级别..因为是统计,所以免不了各种连接各种查询,结果这个小程序写完后运行一次要1个小时..这的确有点出乎意料 ...

  2. String to Integer (atoi)

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  3. hdu-5834 Magic boy Bi Luo with his excited tree(树形dp)

    题目链接: Magic boy Bi Luo with his excited tree Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: ...

  4. 常用中文字体 Unicode 编码

    各大网站的字体选择 网站 字体 腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 t ...

  5. Codeforces Round #257(Div.2) D Jzzhu and Cities --SPFA

    题意:n个城市,中间有m条道路(双向),再给出k条铁路,铁路直接从点1到点v,现在要拆掉一些铁路,在保证不影响每个点的最短距离(距离1)不变的情况下,问最多能删除多少条铁路 分析:先求一次最短路,铁路 ...

  6. Unity3d+Jenkins 自动编译iOS、Android版本

    1.在Unity3d中, 创建导出 iOS.Android 项目脚本 PerformBuild.cs ,放在Editor目录下(必须),如下: using UnityEditor; using Sys ...

  7. Flash Builder 找不到所需的 Adobe Flash Player

    经测试该方法可用! http://bbs.9ria.com/thread-108472-1-1.html 最近重装了系统,flash开发工具也由flex换成了flash builder.调试时就出现了 ...

  8. BUG描述规范

    BUG描述规范 一. 目的与适用范围 1.1 目的 报告软件测试错误的目的是为了保证修复错误的人员可以明确报告的错误,从而有利于分析错误产生的原因,定位错误,然后修正之.因此,报告软件测试错误的基本要 ...

  9. Win2003_IIS+PHP+MYSQL 全能服务器配置

    WIN2003_IIS+PHP+mysql最新版_全能服务器配置 本次配置PHP的服务器环境:Windows2003+IIS6+ASP+PHP5+MySQL5整个配置过程需要是使用拥有管理员权限的系统 ...

  10. 对访问修饰关键字public, protected, internal and private的说明

    对访问修饰关键字public, protected, internal and private的说明1.msdn: Internal types or members are accessible o ...