通过getElementsByName获得span标签

http://wowtianwen.blog.hexun.com/37999247_d.html

在Firefox下可以通过name属性获取span标签 <span name="a">ddd</span> <span name="a">eee</span> <span name="a">ggg</span> <mce:script type="text/javascript"><!-- var obj=document.getElementsByName("a"); alert(obj.length); // --></mce:script> 在IE下运行会发现得到的元素个数为0,也就是获取不到, IE下改成这样: <span id="a">ddd</span> <span id="a">eee</span> <span id="a">ggg</span> <mce:script type="text/javascript"><!-- var obj=document.getElementsByName("a"); alert(obj.length); // --></mce:script> 就可以了……

​ 不想看那么多分析的,只想了解大概原理的可直接跳转到目录二。 想直接拿 最终解决办法的,请跳到目录四。 一、前提背景 1.直接向后台传值删除的批量操作 在使用Thinkphp 工作时,会发现若想获取所有选中的id,并进行批量删除操作时,会使用以下代码: 在选中复选框checkbox后,点击delete删除按钮,向后台控制器Action传输ids,然后在后台循环执行已经写好了的SQL删除语句,删除成功后向前端返回值。 <div> //删除按钮 <li><a class="delete" href="__URL__/foreverdelete/navTabId/{$module}" target="selectedTodo" callback="navTabAjax" title="delete" warn="{$Think.lang.select_item}" postType="string"rel="ids"><span>{$Think.lang.del_item}</span></a></li> //显示的list表格 <table class="table" width="100%" layoutH="111"> <thead> <tr> <th width="5"><input type="checkbox" group="ids" class="checkboxCtrl"></th> <th width="5" orderField="item_id" <if condition="$_REQUEST._order eq 'item_id'">class="{$_REQUEST._sort}"</if>>{$Think.lang.id}</th> <th width="300">Name</th> </tr> </thead> <tbody> <volist id="vo" name="list"> <tr target="sid_node" rel="{$vo['item_id']}" style="height: 27px;"> <td><input name="ids" value="{$vo['item_id']}" type="checkbox"></td> <td>{$vo['item_id']}</td> <td title="{$vo['NOTE']}">{$vo['ITEM_NAME']}</td> </tr> </volist> </tbody> </table> </div> 2.执行原理 以上代码能成功执行的原理: 是<a> 标签定义超链接向后台foreverdelete方法传值, target 用于控制链接点击后的行为,获取到我们选中的 checkbox的id值; 最后将一切操作放到后台控制器中执行; callback是回调逻辑,用于操作成功后的响应 targert和 callback 都是自定义属性, target="selectedTodo" target 属性用于指定链接点击后操作的目标对象或作用域。在给定的代码中,target="selectedTodo" 表示该链接的操作将作用于一个名为 selectedTodo 的目标对象。这种机制通常用于与前端框架或库结合使用,例如 DWZ(一个基于 jQuery 的 UI 框架),用于实现特定的功能,如选中并删除多个条目。 在这种情况下,selectedTodo 是一个用于存储用户选择数据的变量或对象,当链接被点击时,这些数据会被传递给后端进行处理。该属性的值 selectedTodo 并不是标准 HTML 中定义的值,而是由前端框架或开发者自定义的标识符,用于触发特定的逻辑处理流程。 callback="navTabAjax" callback 属性用于指定链接点击后执行的回调函数。回调函数是一种在操作完成后执行的函数,通常用于处理异步操作的结果。在给定的代码中,callback="navTabAjax" 表示链接点击后会调用一个名为 navTabAjax 的回调函数。 该函数的作用包括:检查响应状态码是否为成功,重新加载指定的导航标签页(navTab),或关闭当前标签页等。通过 callback 属性,可以将链接的行为与特定的前端逻辑绑定在一起,从而实现更复杂的交互功能。 总结 3.缺陷 一切只能在后台进行固定操作,无法在页面进行操作时动态更改。 当我想实现批量更改数据操作:选中需要更改的->点击按钮->打开弹窗->输入我想要更改的值时->提交更改时。 target需要更改为 target=“dialog”,用于打开对应弹窗。但此时就会发现,缺少了selectedTodo,就无法获取到选中的checkbox的id,传值到后台。 二、通过按钮打开弹窗,并获取选中的所有id,进行批量更改操作 1.解决思路 经过尝试和思考,我最终选择通过点击时,调用JS方法拼接好id,然后向后台方法传值写入数据库中,mass_change方法从数据库获取ids,最后传给弹窗的方法。 <div> <li><a class="assign" href="__URL__/mass_change/navTabId/{$module}" target="dialog" mask="true" warn="{$Think.lang.select_item}" rel="mass_change" width="800" height="300" onclick="sendids()"><span>批量</span></a></li> </div> <script> function sendids(){ //得到chekbox对象 var checkbox = document.getElementsByName("ids"); var id =""; //当选中时,拿到它的value值,并拼起来 //需要注意的是,这样拼出来的id字符串,是以 ","结尾的,所以在使用的时候,应先将 ","去掉,也可在if中做判断 ,当为最后一个时,拼的时候不加 "," for ( var i = 0; i < checkbox.length; i++) { if(checkbox[i].checked){ id = id + checkbox[i].value+","; } } $.ajax({ type: "GET", url: '__URL__/get_mass/ids/'+id, dataType: "json", async: true, }); } </script> 2.注意事项 a按钮里传值的方法,和JS里传值的方法不能是同一个方法。 如果都是mass_change,这样子会出现,明明传输到ids了,但是你始终拿不到ids的值的情况。 原因在于:         点击按钮后,先是sendids()向mass_change 传入了ids值,你的后台显示能成功打印。                 然后 a标签打开弹窗又重新调用了一次mass_change 。 相当于执行了两次mass_change方法,所以第一次传输的ids值,自然无法在第二次调用时使用。 打开的弹窗就无法获取到传输的ids了。 3.实现方法 如前面所说,既然会执行两次mass_change()方法,导致无法正常获取ids,那我就用写两个方法:  先在js里向另一个自定义后台方法get_mass()传值,在get_mass方法里,将ids上传到数据表A中存储。 public function get_mass($ids){ $ids = rtrim($ids,','); //这里因为我的版本过老,我删除了设置数据库的sql ,大家需要自己补上 $sql_table = "INSERT INTO mass_change_table (id,ids) VALUES('NULL','$ids')"; $result = mysql_query($sql_table,$db); if($result){ $this->success('success'); }else{ $this->error("请重试"); } } 然后在从 mass_change里通过sql数据库,获取已经上传好的ids值,最后传值到弹窗中。 public function mass_change () { //这里因为我的版本过老,我删除了设置数据库的sql ,大家需要自己补上 $get_ids_sql = mysql_query("SELECT ids from mass_change_table order by id desc limit 1",$db); $res = mysql_fetch_array($get_ids_sql, MYSQL_ASSOC); //获取ids $ids = $res['ids']; $this->assign('ids',$ids); //需要的ids if ($this->_get("navTabId")) { //导航值 $this->assign("navTabId",$this->_get("navTabId")); } $this->display(); } 然后最后在弹窗里提交,到mass_update()里, 在mass_update()里 获取已经填好的表单值(其中就有ids),进行批量更改操作。 这样整体就能实现到通过按钮打开弹窗,并获取选中的所有id,进行批量更改的操作了。 三、思路解释 为什么我会选择用三个方法, 第一个方法上传ids到数据库,第二个方法获取ids传递到弹窗,第三个方法进行批量sql操作呢? 原因在于,我发现当我想使用cookie或$SESSION 存储传输过来的ids,然后再让mass_change通过cookie或$SESSION拿值时,一直拿不到,都是null。个人猜测可能和两次调用导致的。(若有懂的大哥们,可在评论区指出我的错误) 所以最后我只能使用上传数据库,用数据库保存ids数据,在从数据库获取ids数据的笨方法。 四、优化后的最终解决方法(效率最高最有效) 从前面的注意事项就可看出,其实只要我们能解决掉以下问题: (因为执行了两次mass_change方法,所以第一次传输的ids值,自然无法在第二次调用时使用。 打开的弹窗就无法获取到传输的ids了。) 就可以最有效的实现通过按钮打开弹窗,并获取选中的所有id,进行批量更改操作。 顺着这个思路走,我尝试不通过使用a标签里的DWZ方法 targer=‘dialog’ 来打开弹窗,而是直接使用 sendids()的JS方法来调用DWZ的弹窗。 这样就只会调用一次mass_change()方法,可以直接在第一次就把拼接到的is传输到后台控制器中,直接获取id,不需要在使用目录二里的笨方法,写到数据库上,能有效提高效率和响应速度。 1.优化后的前端HTML代码 <div> <li><a class="assign" href="javascript:void(0):" onclick="sendids()"><span>批量更改</span></a></li> </div> <script> function sendids(){ //得到chekbox对象 var checkbox = document.getElementsByName("ids"); var id =""; //当选中时,拿到它的value值,并拼起来 //需要注意的是,这样拼出来的id字符串,是以 ","结尾的,所以在使用的时候,应先将 ","去掉,也可在if中做判断 ,当为最后一个时,拼的时候不加 "," for ( var i = 0; i < checkbox.length; i++) { if(checkbox[i].checked){ id = id + checkbox[i].value+","; } } // 判断是否为空 if (!id) { alert("请至少选择一个项目"); return ; // 停止函数执行 } // 手动打开弹窗(使用 DWZ 的方式) 并传输拼接好的id $.pdialog.open("__URL__/mass_change/ids/"+id+"/navTabId/{$module}", "mass_change", "批量更改QR", { width: 600, height: 400, mask: true }); return false; // 阻止DWZ默认行为 } </script> 2.优化后的后端代码 public function mass_change () { $ids = rtrim($_REQUEST['ids'],','); $this->assign('ids',$ids); //传给mass_change页面 if ($this->_get("navTabId")) { $this->assign("navTabId",$this->_get("navTabId")); } $this->display(); } public function mc_update(){ $x= trim($_POST['你想传输过来的字段名']); // 看你自己要传什么数据 // 使用 explode 函数将字符串按逗号分割为数组,使用 implode 函数将数组重新组合为字符串,最后在前后加上引号。 $ids = "'" . implode("','", explode(",", $_POST['ids'])) . "'"; $dbname = C("数据库名"); $db=mysql_connect(C("DB_HOST"), C("DB_USER"), C("DB_PWD")) or die("Can not connect mysql database." . mysql_error()); MySQL_query("SET NAMES 'utf8'"); mysql_select_db($dbname,$db) or die("Could not select database"); $result = mysql_query("update语句,直接使用 in 来批量更改,不需要用循环语句",$db); if($result){ $this->success (L("operation_success")); }else{ $this->error('Error'); } } 若对你有帮助,请帮忙点赞收藏,感谢! ​请根据已编辑的文章内容,生成文章摘要
最新发布
08-26
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link href="../css/bootstrap.min.css" rel="stylesheet" /> <link href="../css/datatables.min.css" rel="stylesheet" /> <link href="../css/jquery.datetimepicker.css" rel="stylesheet" /> <script type="text/javascript" src="../js/date.format.js"></script> <script src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.datetimepicker.full.js"></script> <script src="../js/jquery.form.min.js"></script> <script src="../js/bootstrap.bundle.min.js"></script> <script src="../js/datatables.min.js"></script> <script type="text/javascript" src="../js/buttons.html5.min.js"></script> <script src="../js/datav.min.vue.js"></script> <style> .search-span { background-color: LightSteelBlue; } .row-div-20 { margin: 20px; } .row-div-10 { margin: 10px; } .row-div-5 { margin: 5px; } .custom-tooltip { --bs-tooltip-bg: var(--bs-secondary); } </style> </head> <body> <!-- search form --> <form id="search_form" action="../Controller/getTraceabilityList.ashx" method="post" enctype="application/x-www-form-urlencoded" onsubmit="loadDataTable();return false;"> <div class="row row-div-20"> <div class="col-3"> <div class="row"> <div class="col-12"> <div class="input-group"> <span class="input-group-text search-span">生產單號</span> <input id="base-id" name="base-id" type="text" class="form-control" /> </div> </div> <div class="col-12"> <div class="input-group"> <span class="input-group-text search-span">出貨單號</span> <input type="text" class="form-control" disabled /> </div> </div> <div class="col-12"> <div class="input-group"> <span class="input-group-text search-span">日期</span> <input id="start-time" name="start-time" type="text" class="form-control" autocomplete="off" /> <input id="end-time" name="end-time" type="text" class="form-control" autocomplete="off" /> </div> </div> </div> </div> <div class="col-1"> </div> <div class="col-8"> <div class="row"> <div class="col-12"> <div class="input-group"> <span class="input-group-text search-span">料號</span> <input id="parn-no" name="parn-no" type="text" class="form-control" /><!--required--> <span class="input-group-text search-span">批號</span> <input name="batch-no" type="text" class="form-control" /> <span class="input-group-text search-span">DC</span> <input name="dc" type="text" class="form-control" /> <span class="input-group-text search-span">版本</span> <input name="version" type="text" class="form-control" /> </div> </div> <div class="col-10"> <div class="input-group"> <span class="input-group-text search-span">客戶料號</span> <input type="text" class="form-control" disabled /> <span class="input-group-text search-span">客戶批號</span> <input type="text" class="form-control" disabled /> <span class="input-group-text search-span">機臺編號</span> <input name="machine-no" type="text" class="form-control" /> </div> </div> <div class="col-12"> <div class="input-group"> <span class="input-group-text search-span">站別</span> <input id="station" name="station" type="text" readonly class="form-control" autocomplete="off" /> <button type="button" onclick="showStationModal()" class="btn btn-outline-primary"> 選擇站別</button> <span class="input-group-text search-span">WPNL 號</span> <input name="wpnl-no" type="text" class="form-control" disabled /> <span class="input-group-text search-span">SPNL 號</span> <input name="spnl-no" type="text" class="form-control" disabled /> <span class="input-group-text search-span">PCS 號</span> <input name="pcs-no" type="text" class="form-control" disabled /> </div> </div> <div class="col-8"> <div class="input-group"> <span class="input-group-text search-span">Bacode</span> <input id="Code-no" name="Code-no" type="text" class="form-control" /> <button id="search-btn" class="btn btn-primary">查詢</button> </div> </div> </div> </div> </div> <div class="row row-div-10"> <div class="col-11"> <input id="reject" name="checkColumn" type="checkbox" title="test" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="reject" class="btn btn-outline-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="AOI / OS / VI"> 不良率</label> <input name="reject" type="text" value="N" style="display: none" /> <input id="scrap" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="scrap" class="btn btn-outline-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="AOI / OS / VI"> 報廢率</label> <input name="scrap" type="text" value="N" style="display: none" /> <input id="ipqc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="ipqc" class="btn btn-outline-success"> IPQC</label> <input name="ipqc" type="text" value="N" style="display: none" /> <input id="oqc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="oqc" class="btn btn-outline-success"> OQC 批退率</label> <input name="oqc" type="text" value="N" style="display: none" /> <input id="mrb" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="mrb" class="btn btn-outline-success"> MRB 報廢率</label> <input name="mrb" type="text" value="N" style="display: none" /> </div> </div> <div class="row row-div-10"> <div class="col-12"> <input id="materiel" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="materiel" class="btn btn-outline-success">原物料異常</label> <input name="materiel" type="text" value="N" style="display: none" /> <input id="eim" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="eim" class="btn btn-outline-success">設備 A 級告警數</label> <input name="eim" type="text" value="N" style="display: none" /> <input id="mes" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="mes" class="btn btn-outline-success">MES 設備維修記錄</label> <input name="mes" type="text" value="N" style="display: none" /> <input id="potion-oos" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="potion-oos" class="btn btn-outline-success">藥水 OOS 異常點數</label> <input name="potion-oos" type="text" value="N" style="display: none" /> <input id="potion-ooc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="potion-ooc" class="btn btn-outline-success">藥水 OOC 異常點數</label> <input name="potion-ooc" type="text" value="N" style="display: none" /> <input id="product-oos" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="product-oos" class="btn btn-outline-success">產品 OOS 異常點數</label> <input name="product-oos" type="text" value="N" style="display: none" /> <input id="product-ooc" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="product-ooc" class="btn btn-outline-success">產品 OOC 異常點數</label> <input name="product-ooc" type="text" value="N" style="display: none" /> <input id="great-exception" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="great-exception" class="btn btn-outline-success">重大異常</label> <input name="great-exception" type="text" value="N" style="display: none" /> <input id="rework" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="rework" class="btn btn-outline-success">重工</label> <input name="rework" type="text" value="N" style="display: none" /> <input id="exception-handle" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="exception-handle" class="btn btn-outline-success">異常處置</label> <input name="exception-handle" type="text" value="N" style="display: none" /> <input id="complaint" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" disabled /> <label for="complaint" class="btn btn-outline-success">客訴</label> <input name="complaint" type="text" value="N" style="display: none" /> </div> </div> <div class="row row-div-10"> <div class="col-12"> <input id="only-exception" name="checkColumn" type="checkbox" class="btn-check" onchange="checkboxChange($(this))" autocomplete="off" /> <label for="only-exception" class="btn btn-outline-success">只看異常</label> <input name="only-exception" type="text" value="N" style="display: none" /> <input id="all" type="checkbox" class="btn-check" onchange="changeAll($(this))" autocomplete="off" /> <label for="all" class="btn btn-outline-success">ALL</label> <input name="type" type="text" value="list" style="display: none" /> <input id="isSearching" type="text" value="N" style="display: none" /> <button id="submit-btn" type="submit" class="btn btn-primary">查詢</button> </div> </div> </form> <!-- datatable --> <div class="row row-div-20"> <div class="table-responsive col-lg-12"> <table id="table_id" class="display nowrap table table-primary table-striped table-hover text-center align-middle"> <thead> <tr id="table_head_id"> </tr> </thead> <tbody id="tbody_id"> </tbody> </table> </div> </div> <!-- Station Modal --> <div id="station-modal" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"> 站別選擇</h5> </div> <div class="modal-body"> <div class="row"> <div class="col-4"> <input type="text" placeholder="站別名稱" onkeyup="screenStation($(this))" class="form-control" /> </div> </div> <br /> <div id="station-div" class="row"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> 關閉</button> <button type="button" onclick="clearStation()" class="btn btn-danger"> 清除</button> <button type="button" onclick="confirmStation()" class="btn btn-primary" data-bs-dismiss="modal"> 確認</button> </div> </div> </div> </div> <!-- Info Modal --> <div id="info-modal" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 id="modal-head-id" class="modal-title"> </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div id="modal-content-id" class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> Close</button> </div> </div> </div> </div> <script type="text/javascript"> var table; const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); $(function () { //得到当前时间 var now = new Date(); var endDate = now.format('Y-m-d H:i'); now.setTime(now.getTime() - 60 * 60 * 1000); var startDate = now.format("Y-m-d H:i"); $('#start-time').datetimepicker({ format: 'Y-m-d H:i', step: 1, value: startDate }); $('#end-time').datetimepicker({ format: 'Y-m-d H:i', step: 1, value: endDate }); $.datetimepicker.setLocale('zh'); initStation(); //给行绑定选中事件 $('#table_id tbody').on('click', 'tr', function () { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { $('#table_id tbody > tr').removeClass('selected'); $(this).addClass('selected'); } }); }); function initStation() { $.ajax({ url: '../Controller/getTraceabilityList.ashx', data: { 'type': 'station' }, success: function(result) { $.each(result.data.list, function(i, n) { $('#station-div').append( '<div class="col-2">' + '<div class="form-check">' + '<input id="' + n + '" value="' + n + '" type="checkbox" class="btn-check" />' + '<label for="' + n + '" class="btn btn-outline-success btn-sm">' + n + '</label>' + '</div>' + '</div>' ); }); } }); } // code輸入後查詢 function getSampleBoardData() { var data; var codeNo = document.getElementById("Code-no").value; $.ajax({ url: '../Controller/getTraceabilityList.ashx?type=codeNo', data: { 'codeNo': codeNo }, async: false, success: function (result) { data = result; } }); return data; }; document.getElementById("search-btn").addEventListener("click", function() { var codeNo = document.getElementById("Code-no").value; var date = getSampleBoardData() document.getElementsByName('base-id')[0].value = date.list; document.getElementsByName('batch-no')[0].value = date.list1; document.getElementsByName('parn-no')[0].value = date.list2; // error: function() { // alert(‘查询失败,请重试’); // } }); function showStationModal() { clearStation(); var stationStr = $('#station').val(); var stationArr if (stationStr != '') { stationArr = stationStr.split(','); } $.each(stationArr, function(i, n) { $(eval(n)).prop('checked', true); }); var stationModal = new bootstrap.Modal($("#station-modal")); stationModal.show(); } function screenStation(input) { var str = input.val().toUpperCase(); $('#station-div > div').hide(); if (str == "") { $('#station-div > div').show(); } else { $('[id*="' + str + '"]').parent().parent().show(); } } function clearStation() { $('#station-div input').prop('checked', false); } function confirmStation() { var str = ""; $('#station-div input:checked').each(function (i, e) { str += ($(e).attr('id') + ','); }); $('#station').val(str.substring(0, str.length - 1)); } function checkboxChange(checkbox) { $('[name="' + checkbox.attr('id') + '"]').val(checkbox.prop('checked') ? 'Y' : 'N'); } function changeAll(checkbox) { var checkboxes = $('[name="checkColumn"]'); if (checkbox.prop('checked')) { checkboxes.prop('checked', true); } else { checkboxes.prop('checked', false); } checkboxes.each(function (i, e) { checkboxChange($(e)); }); } function loadDataTable() { if ($('#isSearching').val() === 'Y') { alert('系統查詢中,請稍等···'); return; } $('#isSearching').val('Y'); if (!$('#reject').prop('checked') && !$('#scrap').prop('checked') && !$('#oqc').prop('checked') && !$('#mrb').prop('checked') && !$('#eim').prop('checked') && !$('#mes').prop('checked') && !$('#great-exception').prop('checked') && $('#only-exception').prop('checked')) { $('#isSearching').val('N'); alert('未選擇異常項,無法只看異常。'); return; } let startTime = Date.parse($('#start-time').val()); let endTime = Date.parse($('#end-time').val()); let diffMin = Math.floor((endTime - startTime) / 60000); if (diffMin > 3 * 24 * 60) { $('#isSearching').val('N'); alert('只能查询三天内数据。'); return; } if ($('#base-id').val() == '' && $('#parn-no').val() == '' && ($('#reject').prop('checked') || $('#scrap').prop('checked') || $('#oqc').prop('checked') || $('#mrb').prop('checked') || $('#eim').prop('checked') || $('#mes').prop('checked') || $('#great-exception').prop('checked'))) { $('#isSearching').val('N'); alert('查询额外字段,请添加生产单号或批号条件进行筛选。') return; } $('#submit-btn').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'); $('#search_form').ajaxSubmit({ success: function (result) { if (table != null) { table.destroy(); } $('#table_head_id').empty(); $('#tbody_id').empty(); $.each(result.data.head, function (i, n) { $('#table_head_id').append('<th class="text-center">' + n + '</th>'); }); table = $('#table_id').DataTable({ data: result.data.list, fixedHeader: true, autoWidth: false, scrollX: true, scrollY: 700, searching: 5000, destroy: true, deferRender: true, //延遲渲染 lengthMenu: [ [25, 50, -1], [25, 50, 'All'] ], dom: "<'row'<'col-sm-12 col-md-2'B><'col-sm-12 col-md-1'l><'col-sm-12 col-md-9'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>", buttons: ['copy', 'excel'], ordering: false }); $('#submit-btn').text('查詢'); $('#isSearching').val('N'); } }); } function showEIM(count, partId, lotId, machineNo, inDate, outDate) { if (count <= 0) { shwoInfoModal('設備 A 級告警明細', '該機臺告警數為 0'); return; } $.ajax({ async: false, url: '../Controller/getTraceabilityList.ashx', data: { 'type': 'eim', 'partId': partId, 'lotId': lotId, 'machineNo': machineNo, 'inDate': inDate, 'outDate': outDate }, success: function (result) { var content = '<table class="table table-warning table-striped table-hover text-nowrap">' + '<thead><tr>' + '<th>設備名稱</th>' + '<th>告警編碼</th>' + '<th>告警信息</th>' + '<th>時間</th>' + '</tr></thead>' + '<tbody id="tbody_id">' $.each(result.data.list, function (i, n) { content += '<tr>' + '<td>' + n.eqName + '</td>' + '<td>' + n.eventCode + '</td>' + '<td>' + n.eventMessage + '</td>' + '<td>' + n.insertTime + '</td>' + '</tr>' }); content += '</tbody></table>' shwoInfoModal('設備 A 級告警明細', content); } }); } function showMES(count, machineNo, inDate, outDate) { if (count <= 0) { shwoInfoModal('MES 設備維修記錄', '該機臺維修記錄為 0。'); return; } $.ajax({ async: false, url: '../Controller/getTraceabilityList.ashx', data: { 'type': 'mes', 'machineNo': machineNo, 'inDate': inDate, 'outDate': outDate }, success: function (result) { var content = '<table class="table table-warning table-striped table-hover text-nowrap">' + '<thead><tr>' + '<th>設備名稱</th>' + '<th>記錄 1</th>' + '<th>記錄 2</th>' + '<th>記錄 3</th>' + '<th>記錄 4</th>' + '<th>記錄 5</th>' + '<th>申請時間</th>' + '<th>維修開始時間</th>' + '<th>維修結束時間</th>' + '</tr></thead>' + '<tbody id="tbody_id">' $.each(result.data.list, function (i, n) { content += '<tr>' + '<td>' + n.deptName + '</td>' + '<td>' + n.notepad1 + '</td>' + '<td>' + n.notepad4 + '</td>' + '<td>' + n.notepad5 + '</td>' + '<td>' + n.notepad6 + '</td>' + '<td>' + n.notepad7 + '</td>' + '<td>' + n.entDate + '</td>' + '<td>' + n.startRepairDate + '</td>' + '<td>' + n.endRepairDate + '</td>' + '</tr>' }); content += '</tbody></table>' shwoInfoModal('設備 A 級告警明細', content); } }); }; function shwoInfoModal(title, content) { $('#modal-head-id').text(title) $('#modal-content-id').empty(); $('#modal-content-id').append(content); var infoModal = new bootstrap.Modal($("#info-modal")); infoModal.show(); } </script> </body> </html> 切换中英文页面
08-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值