一个问题?tabpanel中放checkbox不能正常显示

Checkbox显示问题
本文记录了一个关于Ext.js中TabPanel组件内放置Checkbox控件时遇到的显示问题。在初始加载时,Checkbox未能正确显示,需要调整窗口大小才能正常显示。文中提供了相关代码示例。
今天写了一个tabpanel里面放checkbox不能正常显示,改变一下窗口大小才显示出来,我设置的高度也应该够呀

[img]/upload/attachment/59908/319cefde-cac1-3ab3-ab48-2e261bdf4ca3.jpg[/img]

[img]/upload/attachment/59910/3e34c176-05df-37f8-81f0-639a0ec36dab.jpg[/img]


代码
var authtabpanel = new Ext.TabPanel({
activeTab: 0,
renderTo:'roleauthpanel',
frame:true,
defaults:{autoHeight: true},
items:[


{title:'strategyInfo',height:300,items:[
{xtype:'checkbox',height:100,boxLabel: 'Item 3', name: 'cb-auto-3',inputValue:'item3'}
]}
,

{title:'systemInfo',height:300,items:[
{xtype:'checkbox',height:100,boxLabel: 'Item 3', name: 'cb-auto-3',inputValue:'item3'}
]}
,

{title:'baseInfo',height:300,items:[
{xtype:'checkbox',height:100,boxLabel: 'Item 3', name: 'cb-auto-3',inputValue:'item3'}
]}

]
});
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta http-equiv="Cache-Control" content="no-siteapp"/> <!--[if lt IE 9]> <script type="text/javascript" src="../lib/html5shiv.js"></script> <script type="text/javascript" src="../lib/respond.min.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css"/> <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css"/> <link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css"/> <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin"/> <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css"/> <!--[if IE 6]> <script type="text/javascript" src="../lib/DD_belatedPNG_0.0.8a-min.js"></script> <script>DD_belatedPNG.fix('*');</script> <![endif]--> <title>销售明细查询(长春)</title> <style type="text/css"> /**tabs**/ /*.tabPanel ul{height:30px;border-bottom:1px solid #aaa;}*/ /*.tabPanel ul li{*/ /* float:left;margin:0 2px 0 0;border:1px solid #aaa;font-size:11px;height:29px;line-height:30px;width:111px;text-align:center;cursor:pointer;*/ /* text-shadow:0 1px 0 #fff;*/ /* border-radius:4px 4px 0 0;*/ /* box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5);*/ /* background:#ddd;*/ /* background:-moz-linear-gradient(top, #eee, #ddd);*/ /* background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));*/ /*}*/ /*.tabPanel .hit{*/ /* border-bottom:1px solid #fff;cursor:pointer;color:black;text-shadow:0 1px 0 #fff;*/ /* background:#fff;*/ /* background:-webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff));*/ /* background:-moz-linear-gradient(top, #e1e1e1, #fff);*/ /*}*/ /*.pane{border:1px solid #aaa;border-top:0;min-height:100px;background-color:#fff;display:none;}*/ /*.pane p{padding:15px 15px 0 10px;}*/ /*.pane h4{padding:15px 15px 0 10px;font-size:14px;font-weight:bold;}*/ td { text-align: center; } .overLoading { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f5f5f5; opacity: 0.5; z-index: 1000; } .layoutLoading { display: none; position: absolute; top: 40%; left: 40%; width: 20%; height: 20%; z-index: 1001; text-align: center; } </style> </head> <body> <!-- 新增加载提示元素(解决JS报错) --> <div class="overLoading" id="over"></div> <div class="layoutLoading" id="layout">加载中...</div> <nav class="breadcrumb"> <i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span>销售明细查询 <span class="c-gray en">></span>销售明细查询(长春) <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a> </nav> <div class="page-container"> <div class="mt-20"> <div class="page-container" style="margin-top: 0px;padding-top: 0px;"> <div class="row cl"> <table style="margin-left: 50px;margin-top:0px;border-collapse:separate; border-spacing:0px 5px; width: calc(100% - 100px);"> <tr> <td colspan="2">下单日期: <input type="text" id="date1" onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd',})" class="Wdate"/> - <input type="text" id="date2" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'date1\')}',maxDate:'2029-12-31', })" class="Wdate"/> </td> <td colspan="1"> <input id="date11" name="selectDate" type="radio" value="本年" onclick="selectDate1()"/>本年 <input id="date22" name="selectDate" checked type="radio" value="近3年" onclick="selectDate2()"/>近3年 <input id="date33" name="selectDate" type="radio" value="近10年" onclick="selectDate3()"/>近10年 </td> <td colspan="3" style="text-align: left;"> <button class="btn btn-secondary-outline radius" id="search" style="float: left" onclick="submit_order()"> <i class="Hui-iconfont"></i>检索 </button> </td> </tr> <tr> <!-- 发货客户编号 --> <td style="alignment: left">发货客户编号: <select id="fhkhbh"> <option value="0">所有</option> <option value="60009">60009</option> <option value="2000000108">2000000108</option> <option value="1000200000">1000200000</option> </select> </td> <!-- 领料单位 --> <td style="alignment: left">领料单位: <select id="lldw"> <option value="0">所有</option> <option value="中国铁路北京局集团有限公司">中国铁路北京局集团有限公司</option> <option value="北京动车段">北京动车段</option> <option value="北京北所">北京北所</option> <option value="北京南动车所">北京南动车所</option> <option value="朝阳所">朝阳所</option> <option value="石家庄动车所">石家庄动车所</option> <option value="雄安所">雄安所</option> <option value="北京东动车所">北京东动车所</option> <option value="中车长春轨道客车股份有限公司">中车长春轨道客车股份有限公司</option> <option value="北京西所">北京西所</option> </select> </td> <!-- 物料来源 --> <td style="alignment: left">物料来源: <select id="wlly"> <option value="0">所有</option> <option value="供应商寄售">供应商寄售</option> <option value="配件公司直采">配件公司直采</option> <option value="配件公司库存">配件公司库存</option> <option value="销售退货">销售退货</option> </select> </td> <!-- 库存地点 --> <td style="alignment: left">库存地点: <select id="kcdd"> <option value="0">所有</option> <option value="配件中心-北京动车段">配件中心-北京动车段</option> <option value="配件中心-北京北所">配件中心-北京北所</option> <option value="配件中心-北京中心库销货库">配件中心-北京中心库销货库</option> <option value="配件中心-北京动车段中心库">配件中心-北京动车段中心库</option> </select> </td> <!-- 开票状态 --> <td style="alignment: left">开票状态: <select id="kpzt"> <option value="0">所有</option> <option value="YES">YES</option> <option value="NO">NO</option> </select> </td> <td style="alignment: left"> <button class="btn btn-secondary-outline radius" id="huizong" onclick="downloadExl1()"> <i class="Hui-iconfont"></i>导出 </button> </td> </tr> <tr> <!-- 车型 --> <td style="alignment: left">车型: <select id="cx"> <option value="0">所有</option> <option value="CR400BF">CR400BF</option> <option value="CRH380B">CRH380B</option> <option value="CRH5A">CRH5A</option> <option value="CRH380CL">CRH380CL</option> <option value="CRH3A">CRH3A</option> <option value="CR400BF-G">CR400BF-G</option> <option value="CRH5G">CRH5G</option> <option value="CRH380BL">CRH380BL</option> <option value="CR400BF-C">CR400BF-C</option> <option value="CRH3">CRH3</option> <option value="CR400BF-A">CR400BF-A</option> <option value="CRH380BG">CRH380BG</option> <option value="CRH400BF">CRH400BF</option> <option value="CRH380B/BL">CRH380B/BL</option> <option value="CRH380BK">CRH380BK</option> <option value="CRH5">CRH5</option> <option value="CR400BF-Z">CR400BF-Z</option> <option value="CR400BF-GZ">CR400BF-GZ</option> </select> </td> <!-- 修程 --> <td style="alignment: left">修程: <select id="xc"> <option value="0">所有</option> <option value="CR03">CR03</option> <option value="A42">A42</option> <option value="L3">L3</option> <option value="A21">A21</option> <option value="CR00">CR00</option> <option value="CR01">CR01</option> <option value="CR02">CR02</option> <option value="A31">A31</option> <option value="A32">A32</option> <option value="A11">A11</option> <option value="CR04">CR04</option> </select> </td> <td colspan="4"></td> </tr> <!-- 复选框区域 --> <tr> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option1"> <span class="checkbox-icon"></span> <span class="checkbox-label">出库单号</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option2" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">出库单序号</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option3"> <span class="checkbox-icon"></span> <span class="checkbox-label">出库单状态</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option4"> <span class="checkbox-icon"></span> <span class="checkbox-label">创建时间</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option5"> <span class="checkbox-icon"></span> <span class="checkbox-label">创建人</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option6" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">销售办公室</span> </label> </td> </tr> <tr> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option7"> <span class="checkbox-icon"></span> <span class="checkbox-label">发货客户编号</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option8"> <span class="checkbox-icon"></span> <span class="checkbox-label">客户名称</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option9"> <span class="checkbox-icon"></span> <span class="checkbox-label">领料单位</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option10"> <span class="checkbox-icon"></span> <span class="checkbox-label">领料人</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option11"> <span class="checkbox-icon"></span> <span class="checkbox-label">过账日期</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option12"> <span class="checkbox-icon"></span> <span class="checkbox-label">计划编号</span> </label> </td> </tr> <tr> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option13" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">计划行号</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option14" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">路局计划号</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option15" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">路局采购单号</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option16" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">SAP物料</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option17"> <span class="checkbox-icon"></span> <span class="checkbox-label">物料描述</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option18" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">基本计量单位</span> </label> </td> </tr> <tr> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option19" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">物资编码</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option20"> <span class="checkbox-icon"></span> <span class="checkbox-label">数量</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option21"> <span class="checkbox-icon"></span> <span class="checkbox-label">含税单价</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option22"> <span class="checkbox-icon"></span> <span class="checkbox-label">税率</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option23"> <span class="checkbox-icon"></span> <span class="checkbox-label">含税金额合计</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option24" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">价格来源</span> </label> </td> </tr> <tr> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option25" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">退货数量</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option26" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">应开票数量</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option27" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">应开票金额</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option28" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">已开票数量</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option29" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">已开票税前金额</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option30" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">已开票税后金额</span> </label> </td> </tr> <tr> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option31" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">未开票数量</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option32" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">未开票税前金额</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option33" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">未开票税后金额</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option34" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">批次</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option35"> <span class="checkbox-icon"></span> <span class="checkbox-label">物料来源</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option36"> <span class="checkbox-icon"></span> <span class="checkbox-label">库存地点</span> </label> </td> </tr> <tr> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option37"> <span class="checkbox-icon"></span> <span class="checkbox-label">开票状态</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option38"> <span class="checkbox-icon"></span> <span class="checkbox-label">车型</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option39" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">单价</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option40" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">车组号</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option41"> <span class="checkbox-icon"></span> <span class="checkbox-label">修程</span> </label> </td> <td style="alignment: left"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option42" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">货主</span> </label> </td> </tr> <tr> <td style="alignment: left" colspan="2"> <label class="checkbox-item"> <input type="checkbox" name="option" value="option43" checked> <span class="checkbox-icon"></span> <span class="checkbox-label">总价</span> </label> </td> <td colspan="4"></td> </tr> </table> </div> <div class="row cl" style="margin-top: 20px;"></div> <div id="testTable" style="margin: auto;"> <table class="table table-border table-bordered table-hover table-bg table-sort" id="testCheck" style="margin-top: 30px; width: auto; table-layout: auto; word-wrap: break-word; word-break: break-all;"> <thead id="title"> <tr class="text-c"> <th data-column="option1" style="text-align: center;">出库单号</th> <th data-column="option2" style="text-align: center;">出库单序号</th> <th data-column="option3" style="text-align: center;">出库单状态</th> <th data-column="option4" style="text-align: center;">创建时间</th> <th data-column="option5" style="text-align: center;">创建人</th> <th data-column="option6" style="text-align: center;">销售办公室</th> <th data-column="option7" style="text-align: center;">发货客户编号</th> <th data-column="option8" style="text-align: center;">客户名称</th> <th data-column="option9" style="text-align: center;">领料单位</th> <th data-column="option10" style="text-align: center;">领料人</th> <th data-column="option11" style="text-align: center;">过账日期</th> <th data-column="option12" style="text-align: center;">计划编号</th> <th data-column="option13" style="text-align: center;">计划行号</th> <th data-column="option14" style="text-align: center;">路局计划号</th> <th data-column="option15" style="text-align: center;">路局采购单号</th> <th data-column="option16" style="text-align: center;">SAP物料</th> <th data-column="option17" style="text-align: center;">物料描述</th> <th data-column="option18" style="text-align: center;">基本计量单位</th> <th data-column="option19" style="text-align: center;">物资编码</th> <th data-column="option20" style="text-align: center;">数量</th> <th data-column="option21" style="text-align: center;">含税单价</th> <th data-column="option22" style="text-align: center;">税率</th> <th data-column="option23" style="text-align: center;">含税金额合计</th> <th data-column="option24" style="text-align: center;">价格来源</th> <th data-column="option25" style="text-align: center;">退货数量</th> <th data-column="option26" style="text-align: center;">应开票数量</th> <th data-column="option27" style="text-align: center;">应开票金额</th> <th data-column="option28" style="text-align: center;">已开票数量</th> <th data-column="option29" style="text-align: center;">已开票税前金额</th> <th data-column="option30" style="text-align: center;">已开票税后金额</th> <th data-column="option31" style="text-align: center;">未开票数量</th> <th data-column="option32" style="text-align: center;">未开票税前金额</th> <th data-column="option33" style="text-align: center;">未开票税后金额</th> <th data-column="option34" style="text-align: center;">批次</th> <th data-column="option35" style="text-align: center;">物料来源</th> <th data-column="option36" style="text-align: center;">库存地点</th> <th data-column="option37" style="text-align: center;">开票状态</th> <th data-column="option38" style="text-align: center;">车型</th> <th data-column="option39" style="text-align: center;">单价</th> <th data-column="option40" style="text-align: center;">车组号</th> <th data-column="option41" style="text-align: center;">修程</th> <th data-column="option42" style="text-align: center;">货主</th> <th data-column="option43" style="text-align: center;">总价</th> </tr> </thead> <tbody id="info"> </tbody> </table> </div> </div> </div> </div> <!--_footer 作为公共模版分离出去--> <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="../lib/layer/2.4/layer.js"></script> <script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script> <script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script> <script type="text/javascript" src="../js/apply.js"></script> <!--/_footer 作为公共模版分离出去--> <!--业务相关脚本--> <script type="text/javascript" src="../lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script> <script type="text/javascript" src="../lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script> <script type="text/javascript" src="../lib/My97DatePicker/4.8/WdatePicker.js"></script> <script type="text/javascript" src="../lib/datatables/1.10.0/jquery.dataTables.min.js"></script> <script type="text/javascript" src="../lib/laypage/1.2/laypage.js"></script> <script type="text/javascript" src="../js/xlsx.full.min.js"></script> <script type="text/javascript" src="../js/sheetJson.js"></script> <script type="text/javascript"> var baseurl = getURL(); $(function () { startCookie(); selectDate2(); // submit_order(); }); // 日期选择相关函数 function getThisYear() { var now = new Date(); var year = now.getFullYear(); return [year + "-01-01", year + "-12-31"]; } function getThreeYear() { var now = new Date(); var year = now.getFullYear(); return [(year - 2) + "-01-01", year + "-12-31"]; } function getTenYear() { var now = new Date(); var year = now.getFullYear(); return [(year - 9) + "-01-01", year + "-12-31"]; } function selectDate1() { var thisYear = getThisYear(); $("#date1").val(thisYear[0]); $("#date2").val(thisYear[1]); } function selectDate2() { var threeYear = getThreeYear(); $("#date1").val(threeYear[0]); $("#date2").val(threeYear[1]); } function selectDate3() { var tenYear = getTenYear(); $("#date1").val(tenYear[0]); $("#date2").val(tenYear[1]); } // 生成复选框选中状态数组 function generateOptionList() { const checkboxes = document.querySelectorAll('input[name="option"]'); return Array.from(checkboxes).map(checkbox => checkbox.checked ? 1 : 0); } // 复选框与表格列同步逻辑 document.addEventListener('DOMContentLoaded', function () { const checkboxes = document.querySelectorAll('input[name="option"]'); const tableHeaders = document.querySelectorAll('#testCheck th'); const tableRows = document.querySelectorAll('#testCheck tbody tr'); // 初始化表格列显示 updateTableColumns(); // 监听复选框变化 checkboxes.forEach(checkbox => { checkbox.addEventListener('change', updateTableColumns); }); // 更新表格列显示状态 function updateTableColumns() { const selectedColumns = Array.from(checkboxes) .filter(cb => cb.checked) .map(cb => cb.value); // 更新表头 tableHeaders.forEach(header => { const columnName = header.getAttribute('data-column'); header.style.display = selectedColumns.includes(columnName) ? 'table-cell' : 'none'; }); // 更新数据行 tableRows.forEach(row => { const cells = row.querySelectorAll('td'); cells.forEach((cell, index) => { cell.style.display = tableHeaders[index].style.display; }); }); } window.updateTableColumns = updateTableColumns; }); // 查询函数 var printCase = []; function submit_order() { var pkStr = ""; var date1 = $("#date1").val(); var date2 = $("#date2").val(); // 获取下拉框选中的文本内容 var fhkhbh = document.querySelector('#fhkhbh option:checked')?.textContent || ''; var lldw = document.querySelector('#lldw option:checked')?.textContent || ''; var wlly = document.querySelector('#wlly option:checked')?.textContent || ''; var kcdd = document.querySelector('#kcdd option:checked')?.textContent || ''; var kpzt = document.querySelector('#kpzt option:checked')?.textContent || ''; var cx = document.querySelector('#cx option:checked')?.textContent || ''; var xc = document.querySelector('#xc option:checked')?.textContent || ''; // 拼接日期条件 if (date1) pkStr += "cjsj>='" + date1 + "'&&"; if (date2) pkStr += "cjsj<='" + date2 + "'&&"; // 拼接下拉框条件(包含查询) if (fhkhbh !== "所有") pkStr += "fhkhbh conta'" + fhkhbh + "'&&"; if (lldw !== "所有") pkStr += "lldw conta'" + lldw + "'&&"; if (wlly !== "所有") pkStr += "wlly conta'" + wlly + "'&&"; if (kcdd !== "所有") pkStr += "kcdd conta'" + kcdd + "'&&"; if (kpzt !== "所有") pkStr += "kpzt conta'" + kpzt + "'&&"; if (cx !== "所有") pkStr += "cx conta'" + cx + "'&&"; if (xc !== "所有") pkStr += "xc conta'" + xc + "'&&"; // 处理末尾多余的&& if (pkStr.length >= 2 && pkStr.slice(-2) === "&&") { pkStr = pkStr.slice(0, -2); } console.log("查询条件:", pkStr); $.ajax( { type: "post", url: baseurl + "chazhao/", dataType: 'json', data: { tablename: "`jjmx(c)`", pk: pkStr, }, beforeSend: function () { $("#over").show(); $("#layout").show(); }, success: function (res) { console.log("查询结果:", res); var result = res.data || []; var newResult = []; for (var i = 0; i < result.length; i++) { if (result[i]) newResult.push(result[i]); } // 表格配置 // 处理空值 console.log("newResult:"); console.log(newResult); var ifLeft = 1; var ifTop = 1; var title = [ "出库单号", "出库单序号", "出库单状态", "创建时间", "创建人", "销售办公室", "发货客户编号", "客户名称", "领料单位", "领料人", "过账日期", "计划编号", "计划行号", "路局计划号", "路局采购单号", "SAP物料", "物料描述", "基本计量单位", "物资编码", "数量", "含税单价", "税率", "含税金额合计", "价格来源", "退货数量", "应开票数量", "应开票金额", "已开票数量", "已开票税前金额", "已开票税后金额", "未开票数量", "未开票税前金额", "未开票税后金额", "批次", "物料来源", "库存地点", "开票状态", "车型", "单价", "车组号", "修程", "货主", "总价"] var titledisplay = generateOptionList(); var ifDetailInfo = ["0",]; var ifCheckBox = 0; var ifDetail = []; var operating = []; var rowArray = [ "ckdh", "ckdxh", "ckdzt", "cjsj", "cjr", "ssbgs", "fhkhbh", "khmc", "lldw", "llr", "gzrq", "jhbh", "jjhh", "ljjhh", "ljcgdh", "sapwl", "wpms", "jbjldw", "wzbm", "number", "bhsjg", "sl", "hsjehj", "jgly", "thsl", "ykpsl", "ykpje", "ykpsl-already", "ykpsqje", "ykpshje", "wkpsl", "wkpsqje", "wkpshje", "pc", "wlly", "kcdd", "kpzt", "cx", "dj", "czh", "xc", "hz", "zj"]; for (var i = 0; i < newResult.length; i++) { for (var j = 0; j < rowArray.length; j++) { if (newResult[i][rowArray[j]] === null || newResult[i][rowArray[j]] === "" || newResult[i][rowArray[j]] === undefined) { newResult[i][rowArray[j]] = ""; } } } console.log("newResult:"); console.log(newResult); var rowdisplay = titledisplay var allCon = showTable(ifLeft, ifTop, title, newResult, ifDetailInfo, ifCheckBox, ifDetail, operating, rowArray, titledisplay, rowdisplay); $("#testCheck").dataTable().fnDestroy();//彻底清空表格数据 $('#title').empty().append(allCon[0]); $('#info').empty().append(allCon[1]); $('.table-sort').dataTable({ "aaSorting": [ [0, "asc"] ], //从第0列开始,第1列倒序排序 "bStateSave": true, //状态保存 "bRetrieve": true, "aoColumnDefs": [ //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示 {"orderable": false} // 制定列参与排序 // { "orderable": false, "aTargets": [1] } // 制定列参与排序 ] }); }, complete: function () { // 可以在这里隐藏加载提示 } }); } // 导出Excel函数 function downloadExl1() { var pkStr = ""; var date1 = $("#date1").val(); var date2 = $("#date2").val(); // 获取下拉框选中的文本内容 var fhkhbh = document.querySelector('#fhkhbh option:checked')?.textContent || ''; var lldw = document.querySelector('#lldw option:checked')?.textContent || ''; var wlly = document.querySelector('#wlly option:checked')?.textContent || ''; var kcdd = document.querySelector('#kcdd option:checked')?.textContent || ''; var kpzt = document.querySelector('#kpzt option:checked')?.textContent || ''; var cx = document.querySelector('#cx option:checked')?.textContent || ''; var xc = document.querySelector('#xc option:checked')?.textContent || ''; // 拼接日期条件 if (date1) pkStr += "cjsj>='" + date1 + "'&&"; if (date2) pkStr += "cjsj<='" + date2 + "'&&"; // 拼接下拉框条件(包含查询) if (fhkhbh !== "所有") pkStr += "fhkhbh conta'" + fhkhbh + "'&&"; if (lldw !== "所有") pkStr += "lldw conta'" + lldw + "'&&"; if (wlly !== "所有") pkStr += "wlly conta'" + wlly + "'&&"; if (kcdd !== "所有") pkStr += "kcdd conta'" + kcdd + "'&&"; if (kpzt !== "所有") pkStr += "kpzt conta'" + kpzt + "'&&"; if (cx !== "所有") pkStr += "cx conta'" + cx + "'&&"; if (xc !== "所有") pkStr += "xc conta'" + xc + "'&&"; // 处理末尾多余的&& if (pkStr.length >= 2 && pkStr.slice(-2) === "&&") { pkStr = pkStr.slice(0, -2); } $.ajax({ type: "post", url: baseurl + "chazhao/", dataType: 'json', data: { tablename: "`jjmx(c)`", pk: pkStr, }, beforeSend: function () { $("#over").show(); $("#layout").show(); }, success: function (res) { var result = res.data || []; var newResult = []; for (var i = 0; i < result.length; i++) { if (result[i]) newResult.push(result[i]); } // 导出字段配置 var sheetNameMap = { "出库单号": "ckdh", "出库单序号": "ckdxh", "出库单状态": "ckdzt", "创建时间": "cjsj", "创建人": "cjr", "销售办公室": "ssbgs", "发货客户编号": "fhkhbh", "客户名称": "khmc", "领料单位": "lldw", "领料人": "llr", "过账日期": "gzrq", "计划编号": "jhbh", "计划行号": "jjhh", "路局计划号": "ljjhh", "路局采购单号": "ljcgdh", "SAP物料": "sapwl", "物料描述": "wpms", "基本计量单位": "jbjldw", "物资编码": "wzbm", "数量": "number", "含税单价": "bhsjg", "税率": "sl", "含税金额合计": "hsjehj", "价格来源": "jgly", "退货数量": "thsl", "应开票数量": "ykpsl", "应开票金额": "ykpje", "已开票数量": "ykpsl-already", "已开票税前金额": "ykpsqje", "已开票税后金额": "ykpshje", "未开票数量": "wkpsl", "未开票税前金额": "wkpsqje", "未开票税后金额": "wkpshje", "批次": "pc", "物料来源": "wlly", "库存地点": "kcdd", "开票状态": "kpzt", "车型": "cx", "单价": "dj", "车组号": "czh", "修程": "xc", "货主": "hz", "总价": "zj" }; // 转换导出数据格式 var exportData = newResult.map(item => { var data = {}; Object.keys(sheetNameMap).forEach(key => { data[key] = item[sheetNameMap[key]] || ""; }); return data; }); // 导出Excel var workbook = sheetJson.toSheet({ sheetName: Object.keys(sheetNameMap), datas: exportData }); sheetJson.downloadExl(workbook, "销售明细查询(长春)汇总"); }, complete: function () { $("#over").hide(); $("#layout").hide(); }, error: function (err) { console.error("导出失败:", err); $("#over").hide(); $("#layout").hide(); } }); } </script> </body> </html>前端页面显示数据,我基金崩溃
最新发布
11-28
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值