EasyUI easyui-datagrid 实现一列显示多个字段的数据(回显多字段、一列显示多列、单元格显示多字段)

主要代码

//1.获取表单数据 var val=$("#ff").serialize(); console.info(val); //2.把查询的值给easyui中的table表格 $("#tab").empty();var tarObject=$("#tab").append('<table id="dg" class="easyui-datagrid" style="width:850px;height:350px"'+           'url="findSel?'+val+'"'+            ' title="航班查询"'+            'singleSelect="true" fitColumns="true">'+        '<thead>'+            '<tr>'+                '<th field="airline" width="80" data-options="formatter:airlineformat">航空公司/航班机型</th>'+                '<th field="type" width="80" hidden="true" >航班机型</th>'+//'<th field="take_time" width="100" hidden="true">起飞时间</th>'+                '<th field="landing_time" align="right" width="80" data-options="formatter:takelandingformat">起降时间</th>'+                '<th field="airport_name1" align="right" width="80">机场</th>'+                '<th field="flight_time" width="220" data-options="formatter:flighttimeformat">飞行时长</th>'+                '<th field="stop_airport" width="60" align="center" data-options="formatter:stopformat">经停</th>'+                '<th field="reference_price" width="60" align="center" data-options="formatter:priceformat">参考报价</th>'+            '</tr>'+        '</thead>'+    '</table>');   //不用再解析，下面datagrid方法已经解析了一遍，如果再解析就会发送两次请求  /* $.parser.parse(tarObject);   */   $('#dg').datagrid({              view: detailview,              detailFormatter:function(index,row){                  return '<div style="padding:2px;position:relative;"><table class="ddv"></table></div>';              },              onExpandRow: function(index,row){                 console.info(typeof index);                 console.info(typeof row);                  var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');                  ddv.datagrid({                      url:'findSelByFlightTickets?flight_id='+row.id,                      fitColumns:true,                      singleSelect:true,                      rownumbers:true,                      loadMsg:'',                      height:'auto',                      columns:[[                          {field:'sell_company',title:'售票单位',width:200},                          {field:'ticket_price',title:'票价',width:100,align:'right'}                      ]],                      onResize:function(){                          $('#dg').datagrid('fixDetailRowHeight',index);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                },                      onLoadSuccess:function(){                          setTimeout(function(){                              $('#dg').datagrid('fixDetailRowHeight',index);                          },0);                      }                  });                  $('#dg').datagrid('fixDetailRowHeight',index);              }  });

 

js代码

//起降时间 function takelandingformat(val,row){     val=row.take_time+"</br>"+val;     return val; }   //航空公司/航班机型 function airlineformat(val,row){     val=val+"</br>"+row.type;     return val; }

formatter和jqeury的html()差不多，相当于对html()进行了增强。

formatter可以解析HTML标签。

formatter在这里实现了把后台传过来的这一行的记录中的take_time和landing_time显示在了一列上。

 

row不是代表页面中的这一行，而是后台传过来的这一行的json对象。

所以，航班机型列去掉和保留效果是一样的，不影响。

 

field必须要有值，不然报错。

 

效果

 

HTML代码示例：

<div id="tab">          <!--  <table id="dg" class="easyui-datagrid" style="width:850px;height:350px"                   url="findSel"                   title="航班查询"                   singleSelect="true" fitColumns="true">               <thead>                   <tr>                       <th field="airline" width="80">航空公司</th>                       <th field="type" width="80">航班机型</th>                       <th field="take_time" width="100">起飞时间</th>                       <th field="landing_time" align="right" width="80">降落时间</th>                       <th field="airport_name1" align="right" width="80">机场</th>                       <th field="flight_time" width="220">飞行时长</th>                       <th field="stop_airport" width="60" align="center">经停</th>                       <th field="reference_price" width="60" align="center">参考报价</th>                   </tr>               </thead>           </table>  -->               </div>