关于easyUI 实现复杂表头的问题

最新推荐文章于 2022-02-16 09:52:44 发布

置顶 qq_29982141

最新推荐文章于 2022-02-16 09:52:44 发布

阅读量378

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/qq_29982141/article/details/75082832

版权

这篇博客详细介绍了如何使用easyUI框架来创建一个具有多行多列复杂表头的数据网格。通过示例代码展示如何定义表格列结构，包括店铺账号、派单及其细分指标（如推送、已应标等），并提供了相应的数据格式化方法以显示订单数量和金额。文章旨在帮助读者理解并实现类似的复杂表格布局。

摘要由CSDN通过智能技术生成

//html 内容如下：

<div class="content">
<table id="memberDispatch_grid" class="easyui-datagrid" data-options="isField:'id',checkOnSelect: false,rownumbers:true,nowrap:false,striped:true,pageSize: 50,pageList:[10,20,30,40,50],loadMsg:'正在加载中...',singleSelect:false,fitColumns:true,pagination:true">
</table>
</div>

// js 内容如下：

//列表：
var columns = [
//表头第一行
[
{field:'shopName',title:"店铺账号",align:"center",rowspan:3,width:80,sortable:false,formatter:function(val,row,index){
return val;
}},
{title:"派单",align:"center",colspan:16}
],
//第二行
[
{field:'col1',title:"推送",align:"center",colspan:2},
{field:'col3',title:"已应标",align:"center",colspan:2},
{field:'col5',title:"超时未响应",align:"center",colspan:2},
{field:'col7',title:"联系未响应",align:"center",colspan:2},
{field:'col9',title:"投标违约",align:"center",colspan:2},
{field:'col11',title:"主动放弃",align:"center",colspan:2},
{field:'col13',title:"运营中止",align:"center",colspan:2},
{field:'col15',title:"雇主淘汰",align:"center",colspan:2}
],
//第三行
[
{field:'pushNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'pushPrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'enrollNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'enrollPrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'acceptOverNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'acceptOverPrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'connectOverNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'connectOverPrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'offerOverNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'offerOverPrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'acceptGiveUpNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'acceptGiveUpPrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'abortNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'abortPrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'revokeNum',title:"订单数",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}},
{field:'revokePrice',title:"订单金额(元)",align:"center",sortable:false,formatter:function(val,row,index){
return val;
}}

]];