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

主要代码

//1.获取表单数据

var val=$("#ff").serialize();

console.info(val);

//2.把查询的值给easyui中的table表格

$("#tab").empty();var tarObject=$("#tab").append('

+

          'url="findSel?'+val+'"'+

           ' title="航班查询"'+

           'singleSelect="true" fitColumns="true">'+

       '

'+

           '

'+

               '

'+

               '

'+//''+

               '

'+

               '

'+

               '

'+

               '

'+

               '

'+

           '

'+

       '

'+

   '

formatter:airlineformat">航空公司/航班机型 hidden="true" >航班机型 formatter:takelandingformat">起降时间 机场 飞行时长 经停 参考报价
');

 

//不用再解析,下面datagrid方法已经解析了一遍,如果再解析就会发送两次请求

 /* $.parser.parse(tarObject);   */

 

$('#dg').datagrid({

             view: detailview,

             detailFormatter:function(index,row){

                 return '

';

             },

             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+"
"
+val;

    return val;

}

 

//航空公司/航班机型

function airlineformat(val,row){

    val=val+"
"
+row.type;

    return val;

}

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

formatter可以解析HTML标签。

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

 

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

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

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

 

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

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

 

效果

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

 

HTML代码示例:

       <div id="tab">

        

      

       div>

 

你可能感兴趣的:(easyui,--实战)