目的
达到下图的效果:
datagrid初始化
html代码
$(document).ready(function () {
dataGrid = $('#dataGrid').datagrid({
fit: true,
fitColumns: false,
border: false,
pagination: true,
idField: 'id',
remoteSort: false,
pageSize: 20,
pageList: [20, 30, 50, 100],
singleSelect: true,
checkOnSelect: true,
selectOnCheck: true,
rownumbers: true,
nowrap: true,
showPageList: false,
frozenColumns: [[
{
field: 'id',
title: 'ID',
width: 50,
align: 'center',
hidden: true
}, {
field: 'yearMonth',
title: '月份',
width: 50,
align: 'center'
}, {
field: 'salesMan',
title: '销售人员',
width: 80,
align: 'center'
//checkbox : true
}, {
field: '1',
title: '板块',
width: 80,
align: 'center'
//checkbox : true
}, {
field: '2',
title: '经销商名称',
width: 80,
align: 'center'
//checkbox : true
}]],
columns: [[{
title: '第一次预报',
width: 580,
align: 'center',
colspan: 6
}, {
title: '第二次预报',
width: 580,
align: 'center',
colspan: 6
}, {
title: '第三次预报',
width: 580,
align: 'center',
colspan: 6
}, {
title: '汇总',
width: 580,
align: 'center',
colspan: 7
},], [{
field: 'contractMoneyOne',
title: '预计出货额',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '12',
title: '回款总金额',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '13',
title: '本月需还授信',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '14',
title: '现金/承兑回款',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '15',
title: '计划使用返利',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '16',
title: '计划使用授信',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '21',
title: '预计出货额',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '22',
title: '回款总金额',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '23',
title: '本月需还授信',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '24',
title: '现金/承兑回款',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '25',
title: '计划使用返利',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '26',
title: '计划使用授信',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '31',
title: '预计出货额',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '32',
title: '回款总金额',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '33',
title: '本月需还授信',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '34',
title: '现金/承兑回款',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '35',
title: '计划使用返利',
width: 100,
align: 'center',
rowspan: 1
}, {
field: '36',
title: '计划使用授信',
width: 100,
align: 'center',
rowspan: 1
},{
field: '3',
title: '年度任务',
width: 80,
align: 'center',
rowspan: 1
}, {
field: '4',
title: '年度已完成',
width: 80,
align: 'center',
rowspan: 1
}, {
field: '5',
title: '年度完成率',
width: 80,
align: 'center',
rowspan: 1
}, {
field: '6',
title: '本月任务',
width: 80,
align: 'center',
rowspan: 1
}, {
field: '7',
title: '本月完成',
width: 80,
align: 'center',
rowspan: 1
}, {
field: '8',
title: '本月完成率',
width: 80,
align: 'center',
rowspan: 1
}, {
field: '9',
title: '差异原因',
width: 300,
align: 'center',
rowspan: 1
}]],
toolbar: '#toolbar',
onLoadSuccess: function () {
$(this).datagrid('clearChecked');
$(this).datagrid('clearSelections');
},
onRowContextMenu: function (e, rowIndex, rowData) {
e.preventDefault();
$(this).datagrid('unselectAll').datagrid('uncheckAll');
$(this).datagrid('selectRow', rowIndex);
if ($("#menu > div").size() > 1) {
$('#menu').menu('show', {
left: e.pageX - 10,
top: e.pageY - 5
});
}
}
});
});
说明&注意事项
- 复合表单主要使用的就是datagrid的rowspan参数,和colspan参数来决定如何组合的。
- 第一列表头和第二列表头,用下面的分隔符合分割
举例来说
- 如果有横跨两行的表头,也就是非复合表头,rowspan=2;
- 如果是第一列表头,则需要注明该表头下面有几个二级表头,也就是设置colspan=2
- 在第二列表头中,需要注明rowspan=1,标注其二级表头的身份。