背景
业务原因需要定制一些复杂的的表头, 在网上没有找到类似的教程。 但是突然灵机一动,想到了个曲线救国的解决方案。 直接看效果图
初始化表格
初始化的方法跟原本的方法没有什么区别, 但是需要注意的是,在onLoadSuccess回调方法里执行了mergeCells方法, 该方法是渲染表头的核心方法
jQuery('#treeTable').treegrid({
// url : window.location.origin+'/imis/dashboard/progress-list.mvc?mode=manufacture',
url : '${springctx}/imis/productStructure/getProductStructureList.mvc?projectId='+projectId,
idField : 'productId',
treeField : 'productName',
nowrap : true,
remoteSort : true,
striped : true,
pagination : false,
singleSelect : true,
checkOnSelect : false,
selectOnCheck : false,
checkbox : false,
editable : true,
loadMsg: "数据加载中...",
emptyMsg: '<span style="color: #9E9E9E;">暂无数据!</span>',
columns:[[
{field:'productName',title:'名称',width:'200px',
formatter: function (value, row, index) {
// return '<a style="cursor:hand" title="'+value+'" οnclick="viewOpt(\'' + row.productId + '\')">'+ value + '</a>'
return '<span title="'+value+'">'+ value +'</span>'
}
},
{field:'productNo',title:'料号',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
}
,
{field:'b1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'s6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
}
,
{field:'c1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
}
]],
onLoadSuccess:function(row, data){
// $(".datagrid-header-rownumber").html('序号')
// if(data.total==0){
// $('.datagrid-view').css('height','75px!important')
// }
mergeCells()
}
});
/**
* 合并table的表头
* @param
* @returns {string}
*/
function mergeCells() {
// 移除表格的dom
jQuery(".datagrid-view2 .datagrid-header table").remove();
// 把表格插入到页面中去
jQuery(".datagrid-view2 .datagrid-header").css('height', '75px')
jQuery(".datagrid-view2 .datagrid-header").append(jQuery("#customerHead").clone().css('display','block'));
}
原理
先看一下不执行 mergeCells 方法的正常表格, 此时表头为最底部的那一行
mergeCells
此方法分为三步
- 移除原生表格的表头
- 重新定义表格头的高度(因为该高度是计算出得, 所以我们需要重新定义一下)
- 把自定义的表头装入treeGrid中
/**
* 合并table的表头
* @param
* @returns {string}
*/
function mergeCells() {
// 移除表格的dom
jQuery(".datagrid-view2 .datagrid-header table").remove();
// 把表格插入到页面中去
jQuery(".datagrid-view2 .datagrid-header").css('height', '75px')
jQuery(".datagrid-view2 .datagrid-header").append(jQuery("#customerHead").clone().css('display','block'));
}
源码
<%@ page import="org.springframework.util.StringUtils" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<%@ include file="/core/tiles/import_taglib.jsp" %>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<script type="text/javascript" src="dashboard/js/mask.js"></script>
<script type="text/javascript" src="dashboard/js/Util.js"></script>
<%
String type = request.getParameter("type");
boolean haveType = StringUtils.hasText(type);
%>
<style>
body #view_data{
width:98%;
padding: 10px;
}
.project-info{
font-weight: bold;
font-size: 15px;
}
</style>
<aa:zone name="projectAnDengZone">
<script type="text/javascript">
jQuery(function () {
init()
jQuery('#search').textbox({
buttonText:'搜索',
buttonIcon:'icon-search',
buttonAlign:'right',
prompt:'请输入项目名称/项目编号',
width:250,
onClickButton:function(){
jQuery("#fatTable").datagrid({
queryParams:{
"keyWord":jQuery('#search').textbox('getValue')
},
});
}
})
})
function init() {
const projectId = getQueryString("projectId")
if (!projectId || projectId.trim() === ''){
alert('无效的项目Id!')
return
}
loadDataGet(window.location.origin+'/imis/project/info.mvc?projectId=' + projectId +'', function (data) {
if (!data){
alert('无效的项目Id!')
return
}
jQuery('#projectName').text(data.projectName)
jQuery('#projectNo').text(data.projectNo)
jQuery('#projectManager').text(data.projectManagerName)
tableDefine();
})
}
/**
* 合并table的表头
* @param
* @returns {string}
*/
function mergeCells() {
// 移除表格的dom
jQuery(".datagrid-view2 .datagrid-header table").remove();
// 把表格插入到页面中去
jQuery(".datagrid-view2 .datagrid-header").css('height', '75px')
jQuery(".datagrid-view2 .datagrid-header").append(jQuery("#customerHead").clone().css('display','block'));
}
// 获取参数名
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return '';
}
function tableDefine(){
const projectId = getQueryString("projectId")
jQuery('#treeTable').treegrid({
// url : window.location.origin+'/imis/dashboard/progress-list.mvc?mode=manufacture',
url : '${springctx}/imis/productStructure/getProductStructureList.mvc?projectId='+projectId,
idField : 'productId',
treeField : 'productName',
nowrap : true,
remoteSort : true,
striped : true,
pagination : false,
singleSelect : true,
checkOnSelect : false,
selectOnCheck : false,
checkbox : false,
editable : true,
loadMsg: "数据加载中...",
emptyMsg: '<span style="color: #9E9E9E;">暂无数据!</span>',
columns:[[
{field:'productName',title:'名称',width:'200px',
formatter: function (value, row, index) {
// return '<a style="cursor:hand" title="'+value+'" οnclick="viewOpt(\'' + row.productId + '\')">'+ value + '</a>'
return '<span title="'+value+'">'+ value +'</span>'
}
},
{field:'productNo',title:'料号',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'a6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
}
,
{field:'b1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'b5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'s6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
}
,
{field:'c1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'c6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d1',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d2',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d3',title:'开始',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d4',title:'完成',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d5',title:'当前进度',width:'50px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
},
{field:'d6',title:'负责人',width:'100px',align:'left',
formatter: function (value, row, index) {
if(value==null){
return''
}
return '<p title="'+value+'">'+ value +'</p>'
}
}
]],
onLoadSuccess:function(row, data){
// $(".datagrid-header-rownumber").html('序号')
// if(data.total==0){
// $('.datagrid-view').css('height','75px!important')
// }
mergeCells()
}
});
}
</script>
<div id="view_data">
<div style="text-align: left; line-height: 30px; padding: 5px 5px 0px 5px;">
<div class="project-info" style="width: 100%; height: 40px">
<span>
<div style="width: 500px; float: left">
项目名称: <span id="projectName"></span>
</div>
</span>
<span>
<div style="width: 300px; float: left">
项目编号: <span id="projectNo"></span>
</div>
</span>
<span>
<div style="width: 300px; float: left">
项目经理: <span id="projectManager"></span>
</div>
</span>
</div>
</div>
<div style="padding: 0px 5px 0px 5px;; height: 750px">
<div id="tableHr" style="width: 100%; height: 100%; margin-top: 5px;">
<table id="treeTable" style="height: 100%"></table>
</div>
<%-- 表头 --%>
<table id="customerHead" class="datagrid-htable" border="0" cellspacing="0" cellpadding="0" style="height: 75px;display: none">
<tbody>
<tr class="datagrid-header-row">
<td rowspan="3" field="productName" class="">
<div class="datagrid-cell datagrid-cell-c1-productName" style="">
<span>名称</span>
</div>
</td>
<td rowspan="3" field="productNo" class="">
<div class="datagrid-cell datagrid-cell-c1-productNo" style="text-align: left;">
<span>料号</span>
</div>
</td>
<td colspan="6" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
<span>3D模块发布</span>
</div>
</td>
<td colspan="6" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
<span>2D图纸</span>
</div>
</td>
<td colspan="6" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
<span>长期BOM发布</span>
</div>
</td>
<td colspan="6" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;width: 100%">
<span>标准件和非标准件BOM发布</span>
</div>
</td>
</tr>
<tr class="datagrid-header-row">
<td colspan="2" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
<span>计划</span>
</div>
</td>
<td colspan="2" field="a4">
<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
<span>实际</span>
</div>
</td>
<td rowspan="2" field="a5">
<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
<span>当前进度</span>
</div>
</td>
<td rowspan="2" field="a6" class="">
<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
<span>负责人</span>
</div>
</td>
<td colspan="2" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
<span>计划</span>
</div>
</td>
<td colspan="2" field="a4">
<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
<span>实际</span>
</div>
</td>
<td rowspan="2" field="a5">
<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
<span>当前进度</span>
</div>
</td>
<td rowspan="2" field="a6" class="">
<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
<span>负责人</span>
</div>
</td>
<td colspan="2" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
<span>计划</span>
</div>
</td>
<td colspan="2" field="a4">
<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
<span>实际</span>
</div>
</td>
<td rowspan="2" field="a5">
<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
<span>当前进度</span>
</div>
</td>
<td rowspan="2" field="a6" class="">
<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
<span>负责人</span>
</div>
</td>
<td colspan="2" field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
<span>计划</span>
</div>
</td>
<td colspan="2" field="a4">
<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
<span>实际</span>
</div>
</td>
<td rowspan="2" field="a5">
<div class="datagrid-cell datagrid-cell-c1-a5" style="text-align: left;">
<span>当前进度</span>
</div>
</td>
<td rowspan="2" field="a6" class="">
<div class="datagrid-cell datagrid-cell-c1-a6" style="text-align: left;">
<span>负责人</span>
</div>
</td>
</tr>
<tr class="datagrid-header-row">
<td field="a1">
<div class="datagrid-cell datagrid-cell-c1-a1" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="a2">
<div class="datagrid-cell datagrid-cell-c1-a2" style="text-align: left;">
<span>完成</span>
</div>
</td>
<td field="a3">
<div class="datagrid-cell datagrid-cell-c1-a3" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="a4">
<div class="datagrid-cell datagrid-cell-c1-a4" style="text-align: left;">
<span>完成</span>
</div>
</td>
<td field="b1">
<div class="datagrid-cell datagrid-cell-c1-b1" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="b2">
<div class="datagrid-cell datagrid-cell-c1-b2" style="text-align: left;">
<span>完成</span>
</div>
</td>
<td field="b3">
<div class="datagrid-cell datagrid-cell-c1-b3" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="b4" class="">
<div class="datagrid-cell datagrid-cell-c1-b4" style="text-align: left;">
<span>完成</span>
</div>
</td>
<td field="c1">
<div class="datagrid-cell datagrid-cell-c1-c1" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="c2">
<div class="datagrid-cell datagrid-cell-c1-c2" style="text-align: left;">
<span>完成</span>
</div>
</td>
<td field="c3">
<div class="datagrid-cell datagrid-cell-c1-c3" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="c4">
<div class="datagrid-cell datagrid-cell-c1-c4" style="text-align: left;">
<span>完成</span>
</div>
</td>
<td field="d1">
<div class="datagrid-cell datagrid-cell-c1-d1" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="d2">
<div class="datagrid-cell datagrid-cell-c1-d2" style="text-align: left;">
<span>完成</span>
</div>
</td>
<td field="d3">
<div class="datagrid-cell datagrid-cell-c1-d3" style="text-align: left;">
<span>开始</span>
</div>
</td>
<td field="d4" class="">
<div class="datagrid-cell datagrid-cell-c1-d4" style="text-align: left;">
<span>完成</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</aa:zone>