一头扎进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上传文件

随机推荐

XSLT
一.简介 XSLT 是一种用于将 XML 文档转换为 XHTML 文档或其他 XML 文档的语言. XSL(eXtensible Stylesheet Language) -- 可扩展标记语言,主要用 ...
匈牙利算法 codevs 2776 寻找代表元
codevs 2776 寻找代表元时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用 ...
POJ2488-A Knight's Journey（DFS+回溯）
题目链接:http://poj.org/problem?id=2488 A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Tot ...
AOJ 739 First Blood
First Blood Time Limit: 1000 ms Memory Limit: 64 MBTotal Submission: 152 Submission Accepted: 37 ...
Codeforces Zepto Code Rush 2014 -C - Dungeons and Candies
这题给的一个教训:Codeforces没有超时这个概念.本来以为1000*(1000+1)/2*10*10要超时的.结果我想多了. 这题由于k层都可能有关系,所以建一个图,每两个点之间连边,边权为n* ...
利用jquery来进行表单的多向提交
最近由于特别忙,每晚都是1到2点倒床便睡的那种,所以没有给自己要求写日记,等这阶段过完,还会重新开始. 今天来写一个前端的表单提交的方法. 有时往往以为在同一个表单中,不同的按钮,来表达的含义不同,需 ...
AC日记——津津的储蓄计划 P1089 （水！）
题目描述津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同. 为了让津津学习如何储蓄,妈妈提出,津津可以随时把整百的钱存在她那里 ...
Spring小练习之宝宝淘项目
数据库准备 # 表结构 CREATE TABLE `t01_user` ( `) NOT NULL AUTO_INCREMENT COMMENT '自增主键', `) DEFAULT NULL COM ...
有一家做BPM的公司叫K2，Gartner和IDC都说好！
有一家公司被Gartner称为成长最快速的BPMS厂商,被IDC称为破坏性创新者… IDC及Gartner均称K2为成长最快速的商务流程管理套装平台(BPMS)厂商.IDC称K2为“破坏性创新者,在关 ...
hp_jetdirect 9100漏洞检测
#-*-coding=utf8-*- import socket import sys def main(): if len(sys.argv)<=1: print('Parameters er ...

一头扎进EasyUI3

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

随机推荐

热门专题