Easyui DataGrid 复杂表头绑定click

先看效果图，点击背后的标题的时间，弹出明细

定义table

<table  id="reportGrid"    >

</table>

js初始化table

function initReportGrid() {
        var queryUrl = '${base}/hr/company/CompanyController/queryPaged';
        $("#reportGrid").datagrid({
            url :queryUrl,
            mode : "remote",
            queryParams : getFormJSONData("#divSearchPanel"),
            singleSelect : true,
            border : false,
            toolbar : '#divToolbar',
            fitColumns : true,
            fit : true,
			title:"季度车辆使用情况分析",
            rownumbers:true,
            columns:[[
                {field:'车辆类别',title:'车辆类别',rowspan:2 },
                {field:'行驶里程',halign:"center",title:'行驶里程',colspan:3  },
                {field:"油卡充值",halign:"center",title:'油卡充值',colspan:3},
                {field:"维修费",halign:"center",title:'维修费',colspan:3},
                {field:"杂费",halign:"center",title:'杂费',colspan:3},
                {field:"保险",halign:"center",title:'保险',colspan:3},
                {field:"费用总计",halign:"center",title:'费用总计',colspan:3}
            ],
                [
                    {field:'1',title:'当期',align:'right',sortable:true},
                    {field:'2',title:'上季度',align:'right',sortable:true},
                    {field:'3',title:'去年同期',align:'right',sortable:true},
                    {field:'4',title:'当期',align:'right',sortable:true},
                    {field:'5',title:'上季度',align:'right',sortable:true},
                    {field:'6',title:'去年同期',align:'right',sortable:true},
                    {field:'7',title:'当期',align:'right',sortable:true},
                    {field:'8',title:'上季度',align:'right',sortable:true},
                    {field:'9',title:'去年同期',align:'right',sortable:true},
                    {field:'10',title:'当期',align:'right',sortable:true},
                    {field:'11',title:'上季度',align:'right',sortable:true},
                    {field:'12',title:'去年同期',align:'right',sortable:true},
                    {field:'13',title:'当期',align:'right',sortable:true},
                    {field:'14',title:'上季度',align:'right',sortable:true},
                    {field:'15',title:'去年同期',align:'right',sortable:true},
                    {field:'16',title:'当期',align:'right',sortable:true},
                    {field:'17',title:'上季度',align:'right',sortable:true},
                    {field:'18',title:'去年同期',align:'right',sortable:true}
                ] ],
            onLoadSuccess: onLoad
        });

新增合计row

 function  onLoad(data) {
       // 计算合计行结果，添加
       var row = {
           "车辆类别":"合计："
	   }
 	$("#reportGrid").datagrid("appendRow",row);
   }

绑定事件

//给标题标定click
    function  gridTitlebindingClick() {

        $('.datagrid-header-row td').click ( function() {

            var field = $(this).text();

            //调用明细方法
            if("行驶里程" == field || "油卡充值" == field || "维修费" == field || "杂费" == field || "保险" == field  ){
                //弹出明细窗口
                penetrationChildrenReport(field);
            }
        });
    }

调用初始化方法

  $(function(){
       
        /* 初始化报表datagrid*/
      	initReportGrid();
		//绑定事件
        gridTitlebindingClick();
    });