jquery插入复杂表格，合并行列
2024-10-19 21:18:52
此方法为个人测试所写，针对各种兼容性问题还未测试，初写的目的是easyui复杂表头有些缺陷，比如某个表头合并两列，
在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ，不过闲来无事 自己写了写jquery，下面进入正题
先展示下效果
指标性选择为 表头的隐藏用 （客户要求可自定义表头，在extjs中表单自带这个功能,不过复杂表头好像也不支持，单行表头判断条件少的多，比较好实现）
从图片中 可以看到 复杂表头，数据自动合并列，某列比值变红，自定义变红 等功能实现，下面逐步展示代码
<div id="Zj" style="width: auto;">
<asp:CheckBoxList ID="ZjCheck" runat="server" Font-Size="Small">
<asp:ListItem Value="30MW" Text="30MW"></asp:ListItem>
<asp:ListItem Value="60MW" Text="60MW"></asp:ListItem>
<asp:ListItem Value="20MW" Text="20MW"></asp:ListItem>
<asp:ListItem Value="其他" Text="其他"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div id="Tx" style="width: auto;">
<asp:CheckBoxList ID="TxCheck" runat="server" Font-Size="Small">
<asp:ListItem Value="湿法脱硫" Text="湿法脱硫"></asp:ListItem>
<asp:ListItem Value="60MW" Text="干法脱硫"></asp:ListItem>
<asp:ListItem Value="20MW" Text="循环流化床"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div id="TL" style="width: auto;">
<asp:CheckBoxList ID="TLCheck" runat="server" Font-Size="Small">
<asp:ListItem Value="湿法脱硫" Text="SCR"></asp:ListItem>
<asp:ListItem Value="60MW" Text="LNB+SCR"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div id="TreeHeaddiv" style="width: 240px; left: 830px;">
<ul id="TreeHead" class="ztree">
</ul>
</div> <div id="panel" class="easyui-panel" title="查询条件" style="width: 1100px; padding: 10px; margin-bottom:20px;">
<div style="float: left">
<label id="Label1" runat="server" for="dateD">
起始时间：</label>
<input type="text" id="dateSatar" style="text-align: center;" runat="server" onfocus="WdatePicker({skin:'whyGreen',maxDate:'#F{$dp.$D(\'dateEdd\')}',dateFmt:'yyyy-MM-dd'})"
class="Wdate" /> 至
<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'})"
class="Wdate" />
<a href="javascript:void(0)" id="btnJZ" class="easyui-linkbutton" onclick="showMenu('btnJZ','Zj')">
机组容量</a> <a href="javascript:void(0)" id="btnTL" class="easyui-linkbutton" onclick="showMenu('btnTL','TL')">
脱硫方式</a> <a href="javascript:void(0)" id="btnTX" class="easyui-linkbutton" onclick="showMenu('btnTX','Tx')">
脱销方式</a> <a href="javascript:void(0)" id="btnItem" class="easyui-linkbutton" onclick="showMenu('btnItem','TreeHeaddiv')">
指标项选择</a>
</div>
<div style="float: right;">
<a href="javascript:void(0)" id="Serach" class="easyui-linkbutton">查询</a>
</div>
</div>
<div style="width:1100px">
<table id="table">
<thead id="thead">
<tr>
<td rowspan="3" style=" width:40px;">
序号
</td>
<td rowspan="3" style=" width:132px;">
二级公司/机组名称
</td>
<td rowspan="2">
所属火电机组台数
</td>
<td rowspan="2">
所属火电机组容量
</td>
<td colspan="6" style=" width:390px;">
脱硫系统运行情况
</td>
<td colspan="6" style=" width:390px;">
脱硝系统运行情况
</td>
</tr>
<tr>
<td >
投运率
</td>
<td>
综合效率
</td>
<td>
停运次数
</td>
<td>
停运台均次
</td>
<td>
停运时间
</td>
<td>
停运台均时间
</td>
<td >
投运率
</td>
<td>
综合效率
</td>
<td>
停运次数
</td>
<td>
停运台均次
</td>
<td>
停运时间
</td>
<td>
停运台均时间
</td>
</tr>
<tr class="lasttr">
<td>
台
</td>
<td>
MW
</td>
<td>
%
</td>
<td>
%
</td>
<td>
次
</td>
<td>
次/台
</td>
<td>
小时
</td>
<td>
小时/台
</td>
<td>
%
</td>
<td>
%
</td>
<td>
次
</td>
<td>
次/台
</td>
<td>
小时
</td>
<td>
小时/台
</td>
</tr>
</thead> </table>
</div>
</div>
web页面布局
指标性按钮针对的tree的绑定
var Theadsetting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: onCheck
}
};
TreeSetting
var zNodes = [
{ id: 1, pId: 0, name: "全选", open: true },
///脱硫情况
{id: "SO", pId: 1, name: "脱硫系统运行情况", open: true },
{ id: "4", pId: "SO", name: "投运率" },
{ id: "5", pId: "SO", name: "综合效率" },
{ id: "6", pId: "SO", name: "停运次数" },
{ id: "7", pId: "SO", name: "停运台均次" },
{ id: "8", pId: "SO", name: "停运时间" },
{ id: "9", pId: "SO", name: "停运台均时间" }, ///脱硝系统运行情况
{id: "No", pId: 1, name: "脱硝系统运行情况", open: true },
{ id: "10", pId: "No", name: "投运率" },
{ id: "11", pId: "No", name: "综合效率" },
{ id: "12", pId: "No", name: "停运次数" },
{ id: "13", pId: "No", name: "停运台均次" },
{ id: "14", pId: "No", name: "停运时间" },
{ id: "15", pId: "No", name: "停运台均时间" }
];
treeNode
//表头节点点击事件
function onCheck(e, treeId, treeNode) { ItemHide(GetMultItemValues("TreeHead"));
}
treeNode点击事件
//隐藏表格
function ItemHide(NodeIs) { $("#thead tr").eq(0).find("td").eq(4).attr("colspan", 6);
$("#thead tr").eq(0).find("td").eq(4).css("width", 390);
$("#thead tr").eq(0).find("td").eq(5).attr("colspan", 6);
$("#thead tr").eq(0).find("td").eq(5).css("width", 390);
$("#table tr td").show();
// Merge(); for (var i = 0; i < NodeIs.length; i++) { for (var j = 0; j < $("#thead tr").length; j++) {
if (j == 0) { if (NodeIs[i] > 3 && NodeIs[i] <= 9) {
$("#thead tr").eq(0).find("td").eq(4).attr("colspan", $("#thead tr").eq(0).find("td").eq(4).attr("colspan") - 1);
$("#thead tr").eq(0).find("td").eq(4).css("width", parseInt($("#thead tr").eq(0).find("td").eq(4).css("width")) - 65);
} else {
$("#thead tr").eq(0).find("td").eq(5).attr("colspan", $("#thead tr").eq(0).find("td").eq(5).attr("colspan") - 1);
$("#thead tr").eq(0).find("td").eq(5).css("width", parseInt($("#thead tr").eq(0).find("td").eq(5).css("width")) - 65);
} if ($("#thead tr").eq(0).find("td").eq(4).attr("colspan") == 0) {
$("#thead tr").eq(0).find("td").eq(4).hide();
}
if ($("#thead tr").eq(0).find("td").eq(5).attr("colspan") == 0) {
$("#thead tr").eq(0).find("td").eq(5).hide();
} } else if (j == 1) {
$("#thead tr").eq(j).find("td").eq(NodeIs[i] - 4).hide();
} else {
$("#thead tr").eq(j).find("td").eq(NodeIs[i] - 2).hide();
} }
for (var j = 0; j < $("#tbody tr").length; j++) {
$("#tbody tr").eq(j).find("td").eq(NodeIs[i]).hide();
}
}
}
隐藏表格的方法
tree绑定
$(function () {
$.fn.zTree.init($("#TreeHead"), Theadsetting, zNodes);
});
表格 数据绑定
var json = [];
//异地数据
$.post("GetData.aspx", { name: "CHJ" }, function (data) {
json = $.parseJSON(data);
///填充数据
var str = "";
for (var i = 0; i < json.length; i++) {
var tr = "<tr><td style='width:40px'>" + i + "</td>";
for (var j = 0; j < json[i].length; j++) {
tr += "<td>" + json[i][j] + "</td>";
}
tr += "</tr>";
str += tr;
}
$("#tbody").append(str);
Merge();
Bgcolcor();
//tr点击变色
for (var i = 0; i <= $("#tbody tr").length; i++) {
var tr = $("#tbody tr").eq(i);
tr.click(function () {
$("#tbody tr").removeClass("click");
Bgcolcor();
$(this).removeClass("trtwobgcolor");
$(this).addClass("click");
})
}
//比对变红
for (var i = 0; i < $("#tbody tr").length; i++) {
var textone = $("#tbody tr").eq(i).find("td").eq(5).text();
var texttwo = $("#tbody tr").eq(i).find("td").eq(6).text();
if (parseFloat(textone) < parseFloat(texttwo)) {
var textone = $("#tbody tr").eq(i).find("td").eq(5).html("<b style='color:red;'>" + textone + "</b>");
}
}
});
post方法读取数据
自动合并某列，可以自定义参数，范例如下
function Merge() {
var Initialvalue = 1;
var InitBool = false;
for (var i = 1; i <= $("#tbody tr").length; i++) {
var one = $.trim($("#tbody tr").eq(i - 1).find("td").eq(1).text());
var two = $.trim($("#tbody tr").eq(i).find("td").eq(1).text());
if (one == two) {
Initialvalue++;
InitBool = false;
$("#tbody tr").eq(i).find("td").eq(1).hide();
} else {
InitBool = true;
}
if (i == $("#tbody tr").length) {
InitBool = true;
}
if (InitBool) {
$("#tbody tr").eq(i - Initialvalue).find("td").eq(1).attr("rowspan", Initialvalue);
Initialvalue = 1;
}
}
}
合并表格某列
单击某行变色
function Bgcolcor() {
//单双行变色
var SingleTr = 0;
for (var i = 0; i < $("#tbody tr").length; i++) {
var tr = $("#tbody tr").eq(i);
var rowspan = 0;
for (var j = 0; j < tr.find("td").length; j++) {
if (tr.find("td").eq(j).attr("rowspan") != undefined) {
if (parseInt(tr.find("td").eq(j).attr("rowspan")) > rowspan) {
rowspan = parseInt(tr.find("td").eq(j).attr("rowspan"));
}
}
}
for (var m = 0; m <= rowspan; m++) {
if (SingleTr % 2 != 0) {
$("#tbody tr").eq(i + m).addClass("trtwobgcolor");
}
}
for (var tempi = 1; tempi < rowspan; tempi++) {
i++;
}
SingleTr++;
}
}
单击某行变色
最新文章
- Android中的Context
- Ubuntu16.04下部署golang开发环境
- uart串口的调试学习
- sprintf（）函数的用法
- Codeforces Round #313 (Div. 2) A B C 思路 枚举 数学
- 【转】WPF MultiBinding 和 IMultiValueConverter
- Java分布式处理技术(RMI,JDNI)
- centos ppp拨号
- Ubuntu 下开发环境的常规配置。
- Javascript轮播 支持平滑和渐隐两种效果
- thinkphp增删改查
- instanceof、isInstance、isAssignableFrom的区别
- Android官方命令深入分析之dmtracedump
- 如何安装Pycharm官方统计代码行插件
- 如何创建djiago项目和djiago连接数据库
- 第二个web网页
- ElasticSearch入门介绍一
- PC端和移动端在前端开发上的一些区别，前端里移动端到底比pc端多哪些知识
- java多线程的认识
- hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀