效果图
jsp实现代码
var grid ; $(function(){ grid = $('#grid').datagrid({ url :"${pageContext.request.contextPath}/cppcc/casemng/caseMotion/countAnalyspage", fit:true, fitColumns:true, //禁止横向滚动条 nowrap:true, //单元格数据过多，自动折行 border:false, striped:true, showFooter:false, //是否显示行底 scrollbarSize:0, //滚动条占的宽度 checkOnSelect:false, //设置为true后，则点击row 就选择了checkbox singleSelect:true, selectOnCheck:false, loadMsg:'', pagination:true, //分页工具条 pageSize:20, //每页显示多少条 pageList:[20,40], rownumbers:false, //显示行数 sortName:'', //初始化时，按哪个字段默认排序 sortOrder:'', //初始化时，排序 asc desc toolbar:'#tools', frozenColumns: [], columns:[ [ { title: "学校",field:"strMemName",width:50,align:"center",rowspan:2,resizeable:false,halign:'center' }, // rowspan:2 表示跨两行 { title: "一年级", order: 2, width: 100, align: "center",colspan:2 }, //colspan:2 表示跨两列 { title: "二年级", order: 2, width: 100, align: "center",colspan:2 }, { title: "学生总数",field:'intZd',width:50,align:'center',halign:'center', rowspan: 2, resizeable: false, formatter:function(value,row,index){ return "<a href='javascript:void(0)' onclick=showlist('"+row.strMemId+",zd')>"+value+"</a>"; } } ], // 第一行表头显示 [ { title:'男',field:'intFnumLian',width:50,align:'center',halign:'center', formatter:function(value,row,index){ return "<a href='javascript:void(0)' onclick=showlist('"+row.strMemId+",fnumLian')>"+value+"</a>"; } }, { title:'女',field:'intFnumBulian',width:50,align:'center',halign:'center', formatter:function(value,row,index){ return "<a href='javascript:void(0)' onclick=showlist('"+row.strMemId+",fnumBulian')>"+value+"</a>"; } }, { title:'男',field:'intLnumLian',width:50,align:'center',halign:'center', formatter:function(value,row,index){ return "<a href='javascript:void(0)' onclick=showlist('"+row.strMemId+",lnumLian')>"+value+"</a>"; } }, { title:'女',field:'intLnumBulian',width:50,align:'center',halign:'center', formatter:function(value,row,index){ return "<a href='javascript:void(0)' onclick=showlist('"+row.strMemId+",lnumBulian')>"+value+"</a>"; } } ] //第二行表头显示 ] }); });