惯例广告一发，对于初学真，真的很有用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. NSThread基础使用

    1.创建和启动线程   一个NSThread对象就代表一条线程;   创建,启动线程 NSThread *thread = [[NSThread alloc] initWithTarget:self ...

  2. ls文件与目录检视,文件内容查阅

    -a 列出所有的(含隐藏的)文件,包括.和.. -A 列出所有的(含隐藏的)文件,不包括.和.. -d 仅列出目录本身,而不是列出目录内的文件数据(常用) -f 不进行排序,直接列出结果,ls默认会以 ...

  3. windows上用netstat查看端口/进程占用

    windows上用netstat命令查看某个端口是否占用,被哪个进程所占用 1.查看端口的占用情况,获取进程的PID 命令: netstat -ano | findstr "<端口号& ...

  4. 手机打开PC端网址自动跳转到手机站代码

    <script>function uaredirect(murl){ try { if(document.getElementById("bdmark") != nul ...

  5. [转]ionic tab view hide tab bar

    http://stackoverflow.com/questions/23991852/how-do-i-hide-the-tabs-in-ionic-framework ////// tabs.ht ...

  6. nopcommerce里面的@Html.Widget("home_page_top") 是什么？

    很多朋友在修改模板的时候看到很多类似@Html.Widget("xxx")的东西,这里简单介绍一下流程: 比如@Html.Widget("home_page_top&qu ...

  7. 《EXO指数型组织》阅读脑图

    书籍:<EXO指数型组织:打造独角兽公司的11个最强属性> 预览链接:https://www.processon.com/view/link/57ce8279e4b08cbf6ca8f85 ...

  8. jquery 地址栏链接与a标签链接匹配 特效代码总结（二）

    如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式. 如图所示:点击HTML+css3跳转后,给其添加如图样式: js代码如下: ...

  9. React 之 Hello world

    一入react深似海,从此学习为常态,react 成为了一种趋势,很多人应该很多人准备进坑,下面对react进行简单的描述: 首先学习react,要有多方学习的准备,例如:Webpack, Babel ...

  10. Sprite Editor 图集切片精灵

    切图需求 假设有一张大的UI的图集,我们想把它里面的小图一张一张地切割出来,如果有plist文件,请查阅我的另一篇文章<还原TexturePacker plist 文件 切开各小图片> 今 ...