easyUI的使用

1、$('#dd').dialog({ 
     title: '详细信息', 
     width: width, 
     height: height, 
     closed: false, 
     cache: false, 
     href: hreffu, 
     modal: true,
     onLoad : function () {
      $('#alertMessag').css('display', '');
      $('#picUrlTemp').css('display', '');
         }
 });

dd是div的id，这个方法相当于一个ajax请求，而onLoad就是请求结束的要做的事情。

2、datagrid使用

第一种方式

<table id="tableCar" class="easyui-datagrid" fit="true" border="false" idField="Id" 
          data-options="toolbar:'#tb',singleSelect:true,selectOnCheck:true,pageList:[10,20,30,40,50,80],pagination:true,pageSize:20,rownumbers:true,url:'activity222_list_data">
             <thead>
                 <tr>
                  <th data-options="field:'Id',width:80,checkbox:true"></th> <!--checkbox-->
                  <th data-options="field:'attachId',width:80,hidden:true"></th><!--hidden隐藏-->
                  <th data-options="field:'title',width:110,align:'center'">标题</th>
                  <th data-options="field:'operate',width:300,align:'center',formatter:formatRow">操作</th>
                 </tr>
             </thead>
         </table>

singleSelect：是单选。

formatter相对的就是一个js的调用方法。如下

function formatRow(value,row,index) {
   var html = '<a href="#" class="l-btn l-btn-plain" οnclick="detail(this)">[查看]</a>'
   +'<a href="#" class="l-btn l-btn-plain" οnclick="edit(this)">[修改]</a>';
   return html;
  }

第二种方式

$('#tableCar).datagrid({
     url:‘action.json', 
     columns:[[ 
         {field:'name',title:'姓名',width:200,align:'center'}, 
         {field:'score',title:'分值（分）',width:200,align:'center'}
     ]] 
 });

tableCar是已存在table的id。

 

第三种

$('#tableCar').datagrid({url:'kkkvity_list_data?typeId=3006&statusId= 111});

 

第四种

$('#tableCarperson').datagrid('load',{facId:'',brandId:'',typeId:'',saleDateStart:'',saleDateEnd:''''});

 

3、获得列表的数据

var tr = $(row_a).closest('tr.datagrid-row');
 var rowIndex = parseInt(tr.attr('datagrid-row-index'));
 var rows = $('#tableCar').datagrid('getRows');
 var row = rows[rowIndex]; 
  var id = row.id;

4.combobox值的获取

var cityCodeTemp = $('#cityCodeTemp').combobox('getData');
$("#cityCodeTemp").combobox('setValue',cityCodeTemp[0].midCode);

5、easyUI的属性设置

$('#select).combobox({
  readonly:false
 });
 $('#DateStart').datebox({ 
  readonly:false
 });

 

6、$(formDetail).form('submit', {
         url : 'saveActivity',
         success : function(result) {
          if(result=="success"){
               $.messager.alert('管理信息','保存成功。');
          }else if (result.indexOf("isSend")){
               $('#dd').dialog('close');
              var height = $(document.body).height() * 0.7;//body高度的70%
              var width = $(document.body).width() * 0.65;//body宽度的70%
              $('#finddlgDetail').dialog({
                      width : width,
                      height : height
                 }).dialog('open'); 
          }else{
                $.messager.alert('管理信息','保存失败。');
          }
         } 
     }); 
$('#tableCar').datagrid('clearSelections');

 

7、js判断

 var file4 = $('input[type="file"][name="oad4"]').val(); //判断是否有文件上传
   var appmsg = $('input[name="sg"]:checked').length;//是否为选中状态

 

8、获得列表checkbox的值

var rows = $('#tableCarperson').datagrid('getSelections');
 for(var i=0;i<rows.length;i++){
   ids.push(rows[i].vehileId);
 }
 $.ajax({
  url: 'pubService?serviceName=rrr',
  type: 'post',
  data: {
   IdList:ids.join(':'),
  },
  success: function(result) {
   if(result=="success"){
    $.messager.alert('活动管理信息','操作成功。');
      }
 });

9、combobox使用

<input class="easyui-combobox"
           id="groupName"
                 name="groupName"
                 data-options="
                         url:'findView',
                         valueField:'partyId',
                         textField:'groupName',
                         panelHeight:'auto',//这个属性是用来自适应高度的，如果高度过高将这个属性去掉，就会出现滚动条
                         editable:false//input框不能进行修改
                 ">

10、datetimebox使用

$('#fromDate').datetimebox('setValue', time);// 在datetime中显示默认值

 

11、校验

 <input name="title" id="title" class="easyui-validatebox" required="true" required="true" validType="length[0,20]" invalidMessage="不能超过20个字符！">

 

<input name="End" id="End" class="easyui-numberbox" required="true" validType="length[0,20]" invalidMessage="不能超过20个字符！">
<span  style="color:red">*请输入数字</span>

12、在列表中添加一行

$('#table_info').datagrid('appendRow',{
              sequence:i,
              Km:km,
              Day:time,
              tel:0
              }
             );

显示某一列

$('#table_user_info').datagrid('showColumn','operate');

隐藏某一列

$('#tableCar').datagrid('hideColumn','groupName');

删除某一行

$('#table_user_info').datagrid('deleteRow',j);  

修改某一行

$('#table_user_info').datagrid('updateRow',{
     index: i,
     row: {
      sequence: i+1
     }
    });