easyUI入门--2

• 代码回顾

form表单

表单校验

• 设置提示信息为中文效果

      <script type="text/javascript" 
      src="../easyui/locale/easyui-lang-zh_CN.js">
      </script>
  

• 校验

  • 普通校验
  • 两次密码校验
  • 自定义规则校验
  • 校验属性

• 表单提交

  • 异步提交
  • 表单字段加载

自定义下拉列表

• 定义input框
  

• 定义下拉效果

  Java
  C#
  Ruby
  Basic
  Fortran

• 添加下拉列表

  $(function() {
          $('#cc').combo({
              required: true,
              multiple: true
          });
          $('#sp').appendTo($('#cc').combo('panel'));
          $("div > input").click(function() {
              var value=$(this).val();
              var name=$(this).next("span").text();
  
              $("#cc").combo("setValue",value);
              $("#cc").combo("setText",name);
              $("#cc").combo("hidePanel");
          });
  })
  

• 下拉列表框

  • 普通类型

    
    aitem1
    bitem2
    bitem3
    ditem4
    eitem5
    

  • 加载json类型

• 数值输入框

  <input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input> 
  

• 时间日期输入框

  <input id="dd" type="text" class="easyui-datebox" required="required"></input>   
  

• 微调

  <input id="ss" class="easyui-numberspinner" style="width:80px;"   
  required="required" data-options="min:10,max:100,editable:false">   
  

DataGrid（数据表格）

• 基本代码示例

  编码	名称	价格
  001	name1	2323
  002	name2	4612

• 通过tab标签创建，并加载Json信息

  <table class="easyui-datagrid" style="width:400px;height:250px"   
      data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
  <thead>   
      <tr>   
          <th data-options="field:'code',width:100">编码</th>   
          <th data-options="field:'name',width:100">名称</th>   
          <th data-options="field:'price',width:100,align:'right'">价格</th>   
      </tr>   
  </thead>   
  </table>  
  

• 通过js加载json中数据

  <table id="dg"></table>
  
  $('#dg').datagrid({    
  url:'datagrid_data.json',   
  method:"get", 
  columns:[[    
      {field:'code',title:'Code',width:100},    
      {field:'name',title:'Name',width:100},    
      {field:'price',title:'Price',width:100,align:'right'}    
  ]]    
  });  
  

• 加载数据

  加载和显示第一页的所有行，code和name为请求参数
  $('#dg').datagrid('load',{
      code: '01',
      name: 'name01'
  });
  

• 重新加载行

  $('#dg').datagrid('reload'); 
  

案例：展示学生列表信息

• 界面整体展示

  $('#dg').datagrid({
  url : "${pageContext.request.contextPath}/selectAllUser.action",
  fitColumns : true,
  fit : false,
  autoRowHeight : true,
  pagination : true,
  rownumbers : true,
  pageSize : 2,
  showFooter : true,
  pageList : [ 2, 4, 6, 8 ],
  toolbar : [ {
      iconCls : 'icon-add',
      handler : function() {
          addUser();
      }
  }, '-', {
      iconCls : 'icon-remove',
      handler : function() {
          deleteUser();
      }
  }, '-', {
      iconCls : 'icon-edit',
      handler : function() {
          editUser();
      }
  } ],
  
  columns : [ [ {
      field : 'id',
      checkbox : true,
      title : '删除',
      width : 100
  }, {
      field : 'username',
      title : '用户名',
      width : 100
  }, {
      field : 'sex',
      title : '性别',
      width : 100
  }, {
      field : 'email',
      title : '邮箱',
      width : 100
  }, {
      title : '图片',
      field : 'image',
      width : 100,
      align : 'center',
      formatter : function(value, row, index) {
          return '<img src=/img/'+row.image+' width="100px" height="100px" >';
      }
  }, {
      title : '操作',
      field : 'xxxxx',
      width : 100,
      align : 'center',
      formatter : function(value, row, index) {
          return '<a id="a" href='+row.id+' class="easyui-linkbutton" data-options="iconCls:"icon-remove""></a>';
      }
  } ] ]
  

  });

• 添加弹框

  <div id="dd" class="easyui-dialog" title="My Dialog"
      style="width: 400px; height: 200px;"
  data-options="iconCls:'icon-save',resizable:true,modal:true">
  <form action="" id="ff">
      <table cellpadding="5">
          <tr>
              <th>姓名 </th>
              <th><input style="width: 150px;" id="username"
                  class="easyui-textbox"
                  data-options="tipPosition:'top',required:true,validType:'length[0,4]'" /></th>
          </tr>
          <tr>
              <th>邮箱</th>
              <th><input style="width: 150px;" id="email"
                  class="easyui-textbox"
                  data-options="tipPosition:'top',required:true,validType:'email'" /></th>
          </tr>
          <tr>
              <th>性别</th>
              <th><input style="width: 150px;" id="sex"
                  class="easyui-textbox"
                  data-options="required:true,validType:'maxLength[4]'" /></th>
  
  
  
          </tr>
          <tr>
              <th>出生日期</th>
              <th><input style="width: 150px;" id="cpwd"
                  class="easyui-datebox" required="required"
                  validType="equals['#pwd']" /></th>
          </tr>
      </table>
      </>
  

• 添加图片效果

  formatter : function(value, row, index) {
              return '<img src=/img/'+row.image+' width="100px" height="100px" >';
  }
  

• 高度自适应

  fit false
  

• 批量删除

  var selections = $("#dg").datagrid("getSelections");
  var path="${pageContext.request.contextPath}/deleteUserPatch.action?";
  var ids="";
  if(selections!=null&&selections.length>0){
  $.each(selections,function(index){
                  if(index==0){
                  ids=ids+"ids="+this.id;
                  }else{
                  ids=ids+"&ids="+this.id;
                  }
  })
  }
  var url=path+ids;
  $.get(url,function(data) {$("#dg").datagrid("reload");});