一头扎进EasyUI3

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

一头扎进EasyUI第11讲

1、基本下拉组件
     <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="01"><span>Java</span><br/>
          <input type="radio" name="lang" value="02"><span>C#</span><br/>
          <input type="radio" name="lang" value="03"><span>Ruby</span><br/>
          <input type="radio" name="lang" value="04"><span>Basic</span><br/>
          <input type="radio" name="lang" value="05"><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讲

1、公共代码
[{
     "id":1,
     "text":"Java",
     "desc":"Write once, run anywhere"
},{
     "id":2,
     "text":"C#",
     "desc":"One of the programming languages designed for the Common Language Infrastructure"
},{
     "id":3,
     "text":"Ruby",
     "selected":true,
     "desc":"A dynamic, reflective, general-purpose object-oriented programming language"
},{
     "id":4,
     "text":"Perl",
     "desc":"A high-level, general-purpose, interpreted, dynamic programming language"
},{
     "id":5,
     "text":"Basic",
     "desc":"A family of general-purpose, high-level programming languages"
}]

2、基本下拉框组件
     <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>

3、动态加载数据
     <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'">

4、下拉框多选
     <input class="easyui-combobox"
               name="language"
               data-options="
                         url:'../combobox/combobox_data1.json',
                         valueField:'id',
                         textField:'text',
                         multiple:true,
                         panelHeight:'auto'
               ">
     panelHeight高度自适应

5、导航下拉框
     <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>

6、下拉框自定义格式
     <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: 350,
                    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>     

7、下拉框组件相关操作
<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讲

1、公共代码
{"total":28,"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"}
]}

2、基本下拉表格组件
     <select class="easyui-combogrid" style="width:250px" data-options="
               panelWidth: 500,
               idField: 'itemid',
               textField: 'productname',
               url: '../combogrid/datagrid_data1.json',
               columns: [[
                    {field:'itemid',title:'产品编号',width:80},
                    {field:'productname',title:'产品名称',width:120},
                    {field:'listprice',title:'市场价',width:80,align:'right'},
                    {field:'unitcost',title:'成本价',width:80,align:'right'},
                    {field:'attr1',title:'描述',width:200},
                    {field:'status',title:'状态',width:60,align:'center'}
               ]],
               fitColumns: true
          ">
     </select>

3、为下拉表格赋初值
      <input class="easyui-combogrid" style="width:250px" value="EST-12" data-options="
               panelWidth: 500,
               idField: 'itemid',
               textField: 'productname',
               url: '../combogrid/datagrid_data1.json',
               columns: [[
                    {field:'itemid',title:'产品编号',width:80},
                    {field:'productname',title:'产品名称',width:120},
                    {field:'listprice',title:'市场价',width:80,align:'right'},
                    {field:'unitcost',title:'成本价',width:80,align:'right'},
                    {field:'attr1',title:'描述',width:200},
                    {field:'status',title:'状态',width:60,align:'center'}
               ]],
               fitColumns: true
          ">

4、下拉表格多选
      <select class="easyui-combogrid" style="width:250px" data-options="
               panelWidth: 500,
               multiple: true,
               idField: 'itemid',
               textField: 'productname',
               url: '../combogrid/datagrid_data1.json',
               columns: [[
                    {field:'ck',checkbox:true},
                    {field:'itemid',title:'产品编号',width:80},
                    {field:'productname',title:'产品名称',width:120},
                    {field:'listprice',title:'市场价',width:80,align:'right'},
                    {field:'unitcost',title:'成本价',width:80,align:'right'},
                    {field:'attr1',title:'描述',width:200},
                    {field:'status',title:'状态',width:60,align:'center'}
               ]],
               fitColumns: true
          ">
     </select>

5、导航下拉表格
      <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: 500,
               idField: 'itemid',
               textField: 'productname',
               url: '../combogrid/datagrid_data1.json',
               columns: [[
                    {field:'itemid',title:'产品编号',width:80},
                    {field:'productname',title:'产品名称',width:120},
                    {field:'listprice',title:'市场价',width:80,align:'right'},
                    {field:'unitcost',title:'成本价',width:80,align:'right'},
                    {field:'attr1',title:'描述',width:200},
                    {field:'status',title:'状态',width:60,align:'center'}
               ]],
               fitColumns: true
          ">
     </select>

6、下拉表格相关操作
      <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: 500,
idField: 'itemid',
textField: 'productname',
url: '../combogrid/datagrid_data1.json',
columns: [[
{field:'itemid',title:'产品编号',width:80},
{field:'productname',title:'产品名称',width:120},
{field:'listprice',title:'市场价',width:80,align:'right'},
{field:'unitcost',title:'成本价',width:80,align:'right'},
{field:'attr1',title:'描述',width:200},
{field:'status',title:'状态',width:60,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>