EasyUI(2) -- UI组件

一)Form表单

1> validatebox验证框:

• 要求:
  • 姓名：必填/1-6个字符/必填中文
  • 邮箱：必填/1-30个字符/必填符合邮箱格式/后缀必须是com或cn
• 代码:

    <div style="margin:100px"></div> 
    用户名:  
    <input id="vv"/>
    <script type="text/javascript">
        $("#vv").validatebox({
            required:true,
            validType:["length[1,4]","zhongwen"]
        });
    </script>
    <script type="text/javascript">
        //自定义验证规则
        $.extend($.fn.validatebox.defaults.rules, {    
            zhongwen : {    
                validator: function(value){//value表示在文本框中输入的内容    
                    if(/^[\u3220-\uFA29]+$/.test(value)){
                        return true;
                    }
                },    
                        // 如果不符合规则, 则一下是提示信息
                message: "用户名必须填中文"  
            }    
        }); 
    </script>

2> combobox下拉列表框

• 设置下拉列表框默认值

    你所在的城市：
    <select id="cc" class="easyui-combobox" name="city" style="width:150px;">   
        <option>aitem1</option>   
        <option>bitem1</option>   
        <option>bitem2</option>   
        <option>citem1</option>   
        <option>citem2</option>   
        <option>citem3</option>   
        <option>ditem1</option>   
        <option>ditem2</option>   
        <option>ditem3</option>   
        <option>ditem4</option>   
    </select>  
    <script type="text/javascript">
        $(function(){
            $("#cc").combobox("setValue","长沙");
        });
    </script>

3. datebox日期选择框
   • 功能:
     • 显示yyyy-mm-dd格式，
     • 添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
     • 选中日期并显示选中的日期
   • 代码:

入职时间：<input id="dd" type="text"></input>  
    <script type="text/javascript">
        $("#dd").datebox({
            required:true
        });
    </script>
    <script type="text/javascript">
        $("#dd").datebox({
            onSelect:function(date){
                alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate());   
            }
        });
    </script>

4. numberspinner数字微调框
   • 功能:
     • 设置数字微调框中的值
     • 获取数字微调框中的值
   • 代码:

    商品数量：<input type="text" size="2px" value="1"/><span></span>
    <hr/>
    <input id="ss" required="required" style="width:80px;">  
    <script type="text/javascript">
        $("#ss").numberspinner({
            value:1,
            min:1,
            max:100,
            editable:true
        });
    </script>
    <script type="text/javascript">
            $("#ss").numberspinner({
                onSpinUp:function(){
                    //获取numberspinner的当前值
                    var value = $("#ss").numberspinner("getValue");
                    //将numberspinner的当前值设置到商品数量文本框中
                    $("input:first").val(value).css("color","red");
                    //如果value值为100
                    if( value == 100 ){
                        $("span:first").html("商品已满，不能再购买了").css("color","blue");    
                        $("input:first").attr("disabled","disabled");
                    }
                },
                onSpinDown:function(){
                    //获取numberspinner的当前值
                    var value = $("#ss").numberspinner("getValue");
                    //将numberspinner的当前值设置到商品数量文本框中
                    $("input:first").val(value).css("color","red");
                    //如果value值小于100
                    if( value < 100 ){
                        $("span:first").html("");   
                        $("input:first").removeAttr("disabled");
                    }
                }
            });
    </script>

5. slider滑动条框
   拖动滑块，将值同步显示到span标签中

二)Progressbar进度条

• 功能: 每隔1秒让进度条按随机数填充，直至充满进度条刻度
• 代码:

    进度条：
    <div id="p" style="width:400px;"></div> 
    <script type="text/javascript">
        $("#p").progressbar({
            width:"auto",
            height:44,
            value:0
        });
    </script>

    <input type="button" value="开始" style="font-size:111px"/>
    <script type="text/javascript">
        var timeID = null;
        //随机产生1-9之间的整数，包含1和9
        function getNum(){
            return Math.floor(Math.random()*9)+1;
        }
        $(":button").click(function(){
            timeID = window.setInterval(function(){
                //获取随机数，例如：9
                var num = getNum();
                //获取进度条当前值，例如：99
                var value = $("#p").progressbar("getValue");
                //如果随机数加当前值小于100的话      
                if(value + num < 100){
                    //填充进度条当前值
                    $("#p").progressbar("setValue",value+num);
                }else{
                    //将进度条当前值设置为100
                    $("#p").progressbar("setValue",100);
                    //停止定时器
                    window.clearInterval(timeID);
                    //将"开始"按钮生效
                    $(":button").removeAttr("disabled");
                }       
            },200); 
            //将"开始"按钮失效
            $(this).attr("disabled","disabled");        
        });
    </script>

三)window窗口

• 功能: 单击按钮，打开或关闭一个窗口
• 代码:

    <input id="open1" type="button" value="打开窗口1"/>
    <input id="open2" type="button" value="打开窗口2"/>
    <hr/>   
    <div id="win1"></div> 
    <div id="win2"></div>
    <script type="text/javascript">
        $("#open1").click(function(){
            $("#win1").window({
                title:"我的窗口1",
                width:200,
                height:300,
                top:100,
                left:400,
                collapsible:false,
                minimizable:false,
                maximizable:false,
                closable:true,
                draggable:false,
                resizable:false,
                shadow:false,
                modal:false,
                href:"08_datebox.html"
            });
        });
        $("#open2").click(function(){
            $("#win2").window({
                title:"我的窗口2",
                width:200,
                height:300,
                top:100,
                left:800,
                collapsible:false,
                minimizable:false,
                maximizable:false,
                closable:true,
                draggable:false,
                resizable:false,
                shadow:false,
                modal:false
            });
        });
    </script>

四)dialog对话框

• 功能: 单击按钮，打开或关闭一个对话框
• 代码:

    <input id="open1" type="button" value="打开对话框1"/>
    <hr/>
    <div id="dd1"></div>   
    <script type="text/javascript">
        $("#open1").click(function(){
            $("#dd1").dialog({
                width:300,
                height:400,
                left:400,
                top:100,
                title:"对话框1",
                toolbar:[
                    {
                        text:'编辑',
                        iconCls:'icon-edit',
                        handler:function(){alert('edit')}
                    },
                    {
                        text:'帮助',
                        iconCls:'icon-help',
                        handler:function(){alert('help')}
                    
                    }
                ],
                buttons:[
                    {
                        text:'确定',
                        handler:function(){alert('ok')}
                    },
                    {
                        text:'关闭',
                        handler:function(){
                            //关闭本对话框
                            $("#dd1").dialog("close");
                        }
                    }
                ],
                href:"07_combobox_2.html"
            }); 
        });
    </script>

五)messager消息窗口

• 功能: 单击按钮，弹出警告框 / 确认框 / 显示框 / 输入框
• 代码:

<input type="button" value="警告框"/>
    <input type="button" value="确认框"/>
    <input type="button" value="输入框"/>
    <input type="button" value="显示框"/>
    <hr/>
    <div style="margin:200px"></div>        
    <script type="text/javascript">
        $(":button").click(function(){
            var tip = $(this).val();
            tip = $.trim(tip);
            if("警告框" == tip){
                $.messager.alert("我的警告框","不能睡觉了","warning");
            }else if("确认框" == tip){
                $.messager.confirm("我的确认框","你确定在关闭本窗口吗?",function(flag){
                    alert(flag);
                });
            }else if("输入框" == tip){
                $.messager.prompt("我的输入框","你决定要学习Android还是JavaEE吗?",function(value){
                    alert(value);
                });
            }else if("显示框" == tip){
                $.messager.show({
                    title:"我的显示框",
                    msg:"不要太区分Android和JavaEE了",
                    showType:"fade",
                    width:200,
                    height:200,
                    timeout:1000
                });
            }
        });
    </script>

六)tree树

• 功能:
  • 选中树中某个子节点，弹出选中的内容
  • 用树替代linkButton按钮
• 代码:
  • html代码:

<ul id="ttt" class="easyui-tree" style="width:222px">   
        <li>   
            <span>第一章</span> 
        </li>   
        <li>   
            <span>第二章</span> 
            <ul>
                <li>
                    <span>第一节</span> 
                </li>
                <li>
                    <span>第二节</span> 
                    <ul>
                        <li>第一条</li>
                        <li>第二条</li>
                        <li>第三条</li>
                    </ul>
                </li>
            </ul>  
        </li>   
    </ul>

• js代码:

<ul id="ttt"></ul>
    <script type="text/javascript">
        $("#ttt").tree({
            url:"tree_data.json",
            lines:true
        });
    </script>
    <script type="text/javascript">
        $("#ttt").tree({
            onClick:function(node){
                alert(node.text);
            }
        });
    </script>

• json数据: tree_data.json

[
  {
    "id":1,
    "text":"第一章" 
  },
  {
    "id":2,
    "text":"第二章",
    "state":"closed",
    "children":[
       {
      "id":21,
          "text":"第一节" 
       },
       {
      "id":22,
          "text":"第二节"        
       },
       {
      "id":23,
          "text":"第三节",
          "state":"closed",
          "children":[
         {
        "id":231,
            "text":"第一条" 

         }, 
         {
        "id":232,
            "text":"第二条"    
         }
      ]      
       }
    ] 
  }
]

七)datagrid数据表格