EasyUI(2) -- UI组件

一)Form表单

1> validatebox验证框:

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

    
 
    用户名:  
    
    
    

2> combobox下拉列表框

• 设置下拉列表框默认值

    你所在的城市：
       
        aitem1   
        bitem1   
        bitem2   
        citem1   
        citem2   
        citem3   
        ditem1   
        ditem2   
        ditem3   
        ditem4   
      
    

3. datebox日期选择框
   • 功能:
     • 显示yyyy-mm-dd格式，
     • 添加
     • 选中日期并显示选中的日期
   • 代码:

入职时间：  
    
    

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

    商品数量：
    

      
    
    

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

二)Progressbar进度条

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

    进度条：
    
 
    

    
    

三)window窗口

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

四)dialog对话框

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

五)messager消息窗口

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

六)tree树

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

   
        
   
            第一章 
        
   
        
   
            第二章 
            

                

                    第一节 
                
                

                    第二节 
                    

                        
第一条
                        
第二条
                        
第三条
                    
                
            
  
        
   
    

• js代码:

• 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数据表格