此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列,jquery插入复杂表格,合并行列

 

在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ,不过闲来无事 自己写了写jquery,下面进入正题

 

先展示下效果

jquery插入复杂表格,合并行列

指标性选择为 表头的隐藏用 (客户要求可自定义表头,在extjs中表单自带这个功能,不过复杂表头好像也不支持,单行表头判断条件少的多,比较好实现)

jquery插入复杂表格,合并行列

从图片中 可以看到 复杂表头,数据自动合并列,某列比值变红,自定义变红 等功能实现,下面逐步展示代码

  1 <div id="Zj" style="width: auto;">
  2         <asp:CheckBoxList ID="ZjCheck" runat="server" Font-Size="Small">
  3             <asp:ListItem Value="30MW" Text="30MW"></asp:ListItem>
  4             <asp:ListItem Value="60MW" Text="60MW"></asp:ListItem>
  5             <asp:ListItem Value="20MW" Text="20MW"></asp:ListItem>
  6             <asp:ListItem Value="其他" Text="其他"></asp:ListItem>
  7         </asp:CheckBoxList>
  8     </div>
  9     <div id="Tx" style="width: auto;">
 10         <asp:CheckBoxList ID="TxCheck" runat="server" Font-Size="Small">
 11             <asp:ListItem Value="湿法脱硫" Text="湿法脱硫"></asp:ListItem>
 12             <asp:ListItem Value="60MW" Text="干法脱硫"></asp:ListItem>
 13             <asp:ListItem Value="20MW" Text="循环流化床"></asp:ListItem>
 14         </asp:CheckBoxList>
 15     </div>
 16     <div id="TL" style="width: auto;">
 17         <asp:CheckBoxList ID="TLCheck" runat="server" Font-Size="Small">
 18             <asp:ListItem Value="湿法脱硫" Text="SCR"></asp:ListItem>
 19             <asp:ListItem Value="60MW" Text="LNB+SCR"></asp:ListItem>
 20         </asp:CheckBoxList>
 21     </div>
 22     <div id="TreeHeaddiv" style="width: 240px; left: 830px;">
 23         <ul id="TreeHead" class="ztree">
 24         </ul>
 25     </div>
 26    
 27      
 28         <div id="panel" class="easyui-panel" title="查询条件" style="width: 1100px; padding: 10px; margin-bottom:20px;">
 29             <div style="float: left">
 30                 <label id="Label1" runat="server" for="dateD">
 31                     起始时间:</label>
 32                 <input type="text" id="dateSatar" style="text-align: center;" runat="server" onfocus="WdatePicker({skin:'whyGreen',maxDate:'#F{$dp.$D(\'dateEdd\')}',dateFmt:'yyyy-MM-dd'})"
 33                     class="Wdate" /> 至
 34                     <input type="text" id="dateEdd" style="text-align: center;" runat="server" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d', minDate:'#F{$dp.$D(\'dateSatar\')}',dateFmt:'yyyy-MM-dd'})"
 35                     class="Wdate" />
 36                 <a href="javascript:void(0)" id="btnJZ" class="easyui-linkbutton" onclick="showMenu('btnJZ','Zj')">
 37                     机组容量</a> <a href="javascript:void(0)" id="btnTL" class="easyui-linkbutton" onclick="showMenu('btnTL','TL')">
 38                         脱硫方式</a> <a href="javascript:void(0)" id="btnTX" class="easyui-linkbutton" onclick="showMenu('btnTX','Tx')">
 39                             脱销方式</a> <a href="javascript:void(0)" id="btnItem" class="easyui-linkbutton" onclick="showMenu('btnItem','TreeHeaddiv')">
 40                                 指标项选择</a>
 41             </div>
 42             <div style="float: right;">
 43                 <a href="javascript:void(0)" id="Serach" class="easyui-linkbutton">查询</a>
 44             </div>
 45         </div>
 46         <div style="width:1100px">
 47         <table id="table">
 48             <thead id="thead">
 49                 <tr>
 50                     <td rowspan="3" style=" width:40px;">
 51                         序号
 52                     </td>
 53                     <td rowspan="3" style=" width:132px;">
 54                         二级公司/机组名称
 55                     </td>
 56                     <td rowspan="2">
 57                         所属火电机组台数
 58                     </td>
 59                     <td rowspan="2">
 60                         所属火电机组容量
 61                     </td>
 62                     <td colspan="6" style=" width:390px;">
 63                         脱硫系统运行情况
 64                     </td>
 65                      <td colspan="6" style=" width:390px;">
 66                         脱硝系统运行情况
 67                     </td>
 68                 </tr>
 69                 <tr>
 70                     <td  >
 71                         投运率
 72                     </td>
 73                     <td>
 74                         综合效率
 75                     </td>
 76                     <td>
 77                         停运次数
 78                     </td>
 79                     <td>
 80                         停运台均次
 81                     </td>
 82                     <td>
 83                         停运时间
 84                     </td>
 85                     <td>
 86                         停运台均时间
 87                     </td>
 88                      <td >
 89                         投运率
 90                     </td>
 91                     <td>
 92                         综合效率
 93                     </td>
 94                     <td>
 95                         停运次数
 96                     </td>
 97                     <td>
 98                         停运台均次
 99                     </td>
100                     <td>
101                         停运时间
102                     </td>
103                     <td>
104                         停运台均时间
105                     </td>
106                 </tr>
107                 <tr class="lasttr">
108                     <td>
109                         台
110                     </td>
111                     <td>
112                         MW
113                     </td>
114                     <td>
115                         %
116                     </td>
117                     <td>
118                         %
119                     </td>
120                     <td>
121                         次
122                     </td>
123                     <td>
124                         次/台
125                     </td>
126                     <td>
127                         小时
128                     </td>
129                     <td>
130                         小时/台
131                     </td>
132                      <td>
133                         %
134                     </td>
135                     <td>
136                         %
137                     </td>
138                     <td>
139                         次
140                     </td>
141                     <td>
142                         次/台
143                     </td>
144                     <td>
145                         小时
146                     </td>
147                     <td>
148                         小时/台
149                     </td>
150                 </tr>
151             </thead>
152 
153         </table>
154         </div>
155     </div>
web页面布局

相关文章:

  • 2022-12-23
  • 2021-12-17
  • 2021-07-16
  • 2022-12-23
  • 2021-07-25
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-10-06
  • 2022-12-23
  • 2021-06-08
  • 2021-06-14
  • 2021-12-22
  • 2021-07-02
  • 2021-08-15
相关资源
相似解决方案