一头扎进EasyUI3

惯例广告一发，对于初学真，真的很有用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的更多相关文章

一头扎进EasyUI2
惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 一头扎进EasyUI第6讲 .日历组件 <div class="easyui-calendar&quo ...
一头扎进EasyUI
惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 一头扎进EasyUI第1讲 .加载库文件和样式 <link rel="stylesheet" ...
《一头扎进》系列之Python+Selenium框架设计篇3- 价值好几K的框架，狼来了，狼来了....，狼没来，框架真的来了
1. 简介前边宏哥一边一边的喊框架,就如同一边一边的喊狼来了!狼来了!.....这回是狼没有来,框架真的来了.从本文开始宏哥将会一步一步介绍,如何从无到有地创建自己的第一个自动化测试框架.这一篇,我 ...
《一头扎进》系列之Python+Selenium框架设计篇4- 价值好几K的框架，呵！这个框架有点意思啊
1.简介前面文章,我们实现了框架的一部分功能,包括日志类和浏览器引擎类的封装,今天我们继续封装一个基类和介绍如何实现POM.关于基类,是这样定义的:把一些常见的页面操作的selenium封装到bas ...
《一头扎进》系列之Python+Selenium框架设计篇5 - 价值好几K的框架，哎呦！这个框架还真有点料啊！！！
1. 简介其实,到前面这一篇文章,简单的Python+Selenium自动化测试框架就已经算实现了.接下来的主要是介绍,unittest管理脚本,如何如何加载执行脚本,再就是采用第三方插件,实现输出 ...
《一头扎进》系列之Python+Selenium自动化测试框架实战篇6 - 价值好几K的框架，呦！这个框架还真牛叉哦！！！
1. 简介本文开始介绍如何通过unittest来管理和执行测试用例,这一篇主要是介绍unittest下addTest()方法来加载测试用例到测试套件中去.用addTest()方法来加载我们测试用例到 ...
《一头扎进》系列之Python+Selenium框架实战篇7 - 年底升职加薪，年终奖全靠它！Merry Christmas
1. 简介截止到上一篇文章为止,框架基本完全搭建完成.那么今天我们要做什么呢????聪明如你的小伙伴或者是童鞋一定已经猜到了,都测试完了,当然是要生成一份高端大气上档次的测试报告了.没错的,今天宏哥 ...
一头扎进 JAVA
硅不可吉米 JAVA 基础 -- 基础不牢,地动山摇子类应该比父类更为开放 (public protected default private) 子类方法不能比父类抛出更高异常( 可以为父类方 ...
《一头扎进SpringMvc视频教程》
第二章 SpringMvc控制器第三章 Rest风格的资源URL 第四章 SpringMvc上传文件

随机推荐

mac svn 终端操作命令
svn 删除目录命令 svn 提交命令 svn commit -m zenggui 出来要提交的目录后,按shift + : + q 如遇到不明白的可以输入:svn help 比如想查询删除命令的使用 ...
libc.so.6被删后导致系统无法使用的原因及解决方法
记一次升级glibc库发生的错误今天给glibc库升级,发生了一件让我吓出一声汗的事情,我把动态库中的libc.so.6给删了,瞬间所有的非系统命令都无法使用,使用就报错当时就吓尿了,生产环境被我 ...
NPOI 读取excel到DataTable 读取隐藏列读取公式列
处理思路: 1.打开excel 用NPOI进行读取: 2.读取第一个Sheet: 读取过程中: a.先设置相应列不隐藏 b.读取Cell时先判断是否的包含公式相应代码如下: public sta ...
[转]excel set drop-down values based on vlookup
本文转自:http://stackoverflow.com/questions/10657811/set-drop-down-values-based-on-vlookup 问: I have a w ...
Uva10082 WERTYU -S.B.S.
A common typing error is to place the hands on the keyboard one row to the right of the correct posi ...
Head First HTML5 Programming 读书笔记
1:HTML5引入了简单化的标记,新的语义和媒体元素,另外要依赖于一组支持web应用的js库. 2:关于js 对象是属性的结合 window对象是全局变量. document对象是window的一个属 ...
移动web页面使用的字体的思考
前言记得做PC端页面的时候,字体一般设置为微软雅黑,现在做起移动端页面来了,设计师们一般都还把字体设置为微软雅黑字体,但是做出来后,测试的时候发现页面中的字体不是微软雅黑,怎么办? 后来了解到的手机 ...
POJ 2823 Sliding Window 再探单调队列
重新刷这个经典题,感觉跟以前不一样了,变得更加容易理解了,不讲解了,看代码.注意:要用C++提交,用G++会超时.. 代码: #include <iostream> #include &l ...
JetBrain WebStorm 注册码
webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA ...
Volley（一）—— 框架简介
一.引言虽然网上已经有很多大神.高手都写过了类似的帖子,但作为新人,必须要走模仿的道路,再考虑超越,因此学习大神的笔记,记录自己的理解,是一个菜鸟走向成功的必经之路啊.如签名所言,记录自己摸爬滚打的 ...

一头扎进EasyUI3

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

随机推荐

热门专题