大佬帮忙看看这个Js怎么写

镖师发表于 2023-4-26 23:10:48

{include file="../../../application/admin/view/public/head" /}<style> table { table-layout: fixed; } td { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }</style><div class="page-container p10"> <div class="my-toolbar-box"> <div class="center mb10"> <form class="layui-form " method="post" action="{:url('data')}"> <input type="hidden" value="{$param.select|mac_filter_xss}" name="select"> <input type="hidden" value="{$param.input|mac_filter_xss}" name="input"> <div class="layui-input-inline w150"> <select name="type"> <option value="">{:lang('select_type')}</option> {volist name="type_tree" id="vo"} {if condition="$vo.type_mid eq 1"} <option value="{$vo.type_id}" {if condition="$param['type'] eq $vo.type_id"}selected {/if}>{$vo.type_name}</option> {volist name="vo.child" id="ch"} <option value="{$ch.type_id}" {if condition="$param['type'] eq $ch.type_id"}selected {/if}> ├ {$ch.type_name}</option> {/volist} {/if} {/volist} </select> </div> <div class="layui-input-inline w150"> <select name="status"> <option value="">{:lang('select_status')}</option> <option value="0" {if condition="$param['status'] eq '0'"}selected {/if}>{:lang('reviewed_not')}</option> <option value="1" {if condition="$param['status'] eq '1'"}selected {/if}>{:lang('reviewed')}</option> </select> </div> <div class="layui-input-inline w150" > <select name="lock"> <option value="">{:lang('select_lock')}</option> <option value="0" {if condition="$param['lock'] eq '0'"}selected {/if}>{:lang('unlock')}</option> <option value="1" {if condition="$param['lock'] eq '1'"}selected {/if}>{:lang('lock')}</option> </select> </div> <div class="layui-input-inline"> <input type="text" autocomplete="off" placeholder="{:lang('wd')}" class="layui-input" name="wd" value="{$param['wd']|mac_restore_htmlfilter}"> </div> <input type="hidden" name="repeat" value="{$param['repeat']|mac_filter_xss}" /> <button class="layui-btn mgl-20 j-search" >{:lang('btn_search')}</button> <button class="layui-btn mgl-20" onclick='tableToExcel()'>導出今日数据</button> <button class="layui-btn mgl-20" onclick='tableToExcel3()'>導出一周数据</button> <button class="layui-btn mgl-20" onclick='tableToExcel2()'>導出全部数据</button> </form> </div> <div class="layui-btn-group"> <a data-href="{:url('info')}" data-full="1" class="layui-btn layui-btn-primary j-iframe"><i class="layui-icon"></i>{:lang('add')}</a> <a data-href="{:url('del')}" class="layui-btn layui-btn-primary j-page-btns confirm"><i class="layui-icon"></i>{:lang('del')}</a> <a data-href="{:url('index/select')}?tab=vod&col=type_id&tpl=select_type&url=vod/field" data-width="270" data-height="100" data-checkbox="1" class="layui-btn layui-btn-primary j-select"><i class="layui-icon"></i>{:lang('type')}</a>  <button data-href="javascript:void(0)" class="layui-btn layui-btn-primary j-select " onclick='tableToExcel9()'>導出数据</button> </div> </div> <form class="layui-form " method="post" id="pageListForm"> <table class="layui-table" lay-size="sm"> <thead> <tr> <th width="18"><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th> <th width="19">{:lang('id')}</th> <th width="8%">小嘜</th> <th width="7%">運單號</th> <th width="8%">貨物名稱</th> <th width="8%">件數</th> <th width="8%">重量KG</th> <th width="8%">收件公司名</th> <th width="8%">收件人名</th> <th width="8%">收件電話/手機</th> <th width="15%">目的地詳址</th> <th width="8%">包裝尺寸CM</th> <th width="8%">代收款</th> <th width="8%">備註</th> <th width="8%">寄件人</th> <th width="8%">清關日期</th> <th width="8%">到站日期</th> <th width="8%">國外物流</th> <th width="8%">中轉單號</th> <th width="5%">{:lang('opt')}</th> </tr> </thead> {volist name="list" id="vo"} <tr> <td><input type="checkbox" name="ids[]" value="{$vo.vod_id}" class="layui-checkbox checkbox-ids" lay-skin="primary"></td> <td>{$vo.vod_id}</td> <td>{$vo.vod_duration}</td> <td><a target="_blank" href="{:mac_url_vod_detail($vo)}"><font color="blue"> {$vo.vod_name}</font></a></td> <td>{$vo.vod_sub}</td> <td>{$vo.vod_state}</td> <td>{$vo.vod_tag}</td> <td>{$vo.vod_lang}</td> <td>{$vo.vod_remarks}</td> <td>{$vo.vod_writer}</td> <td>{$vo.vod_actor}</td> <td>{$vo.vod_director}</td> <td>{$vo.vod_behind}</td> <td>{$vo.vod_year}</td> <td>{$vo.vod_area}</td> <td>{$vo.vod_version}</td> <td>{$vo.vod_weekday}</td> <td>{$vo.vod_blurb}</td> <td>{$vo.vod_tv}</td> <td><a class="layui-badge-rim j-iframe" data-full="1" data-href="{:url('info?id='.$vo['vod_id'])}" href="javascript:;" title="{:lang('edit')}">{:lang('edit')}</a></td> </tr> {/volist} </tbody> </table> <div id="pages" class="center"></div> </form></div>{include file="../../../application/admin/view/public/foot" /}<script type="text/javascript"> var curUrl="{:url('vod/data',$param)}"; layui.use(['laypage', 'layer','form'], function() { var laypage = layui.laypage , layer = layui.layer, form = layui.form; laypage.render({ elem: 'pages' ,count: {$total} ,limit: {$limit} ,curr: {$page} ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] ,jump: function(obj,first){ if(!first){ location.href = curUrl.replace('%7Bpage%7D',obj.curr).replace('%7Blimit%7D',obj.limit); } } }); });</script> <script> const tableToExcel = () => { const jsonData = [ {maccms:vod num="all" time="-1 day"order="desc" by="time"} { n1:'{$vo.vod_duration}', n2:'{$vo.vod_name}', n3:'{$vo.vod_sub}', n4:'{$vo.vod_state}', n5:'{$vo.vod_tag}', n6:'{$vo.vod_lang}', n7:'{$vo.vod_remarks}', n8:'{$vo.vod_writer}', n9:'{$vo.vod_actor}', n10:'{$vo.vod_director}', n11:'{$vo.vod_behind}', n12:'{$vo.vod_year}', n13:'{$vo.vod_area}', n14:'{$vo.vod_version}', n15:'{$vo.vod_weekday}', n16:'{$vo.vod_blurb}', n17:'{$vo.vod_tv}', n18:'{$vo.vod_play_url}', }, {/maccms:vod} ]; let str = '小嘜,運單號,貨物名稱,件數,重量KG,收件公司名,收件人名,收件電話,目的地詳址,包裝尺寸CM,代收款,備註,寄件人,清關日期,到站日期,國外物流,中轉單號,運輸流程\n'; for(let i = 0 ; i < jsonData.length ; i++ ){ for(const key in jsonData){ str+=`${jsonData + '\t'},`; } str+='\n'; } const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); const link = document.createElement("a"); link.href = uri; link.download ="當日數據.csv"; link.click(); } </script> <script> const tableToExcel2 = () => { const jsonData = [ {maccms:vod num="all" -1 dayorder="desc" by="time"} { n1:'{$vo.vod_duration}', n2:'{$vo.vod_name}', n3:'{$vo.vod_sub}', n4:'{$vo.vod_state}', n5:'{$vo.vod_tag}', n6:'{$vo.vod_lang}', n7:'{$vo.vod_remarks}', n8:'{$vo.vod_writer}', n9:'{$vo.vod_actor}', n10:'{$vo.vod_director}', n11:'{$vo.vod_behind}', n12:'{$vo.vod_year}', n13:'{$vo.vod_area}', n14:'{$vo.vod_version}', n15:'{$vo.vod_weekday}', n16:'{$vo.vod_blurb}', n17:'{$vo.vod_tv}', n18:'{$vo.vod_play_url}', }, {/maccms:vod} ]; let str = '小嘜,運單號,貨物名稱,件數,重量KG,收件公司名,收件人名,收件電話,目的地詳址,包裝尺寸CM,代收款,備註,寄件人,清關日期,到站日期,國外物流,中轉單號,運輸流程\n'; for(let i = 0 ; i < jsonData.length ; i++ ){ for(const key in jsonData){ str+=`${jsonData + '\t'},`; } str+='\n'; } const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); const link = document.createElement("a"); link.href = uri; link.download ="全部數據.csv"; link.click(); } </script> <script> const tableToExcel3 = () => { const jsonData = [ {maccms:vod num="all" time="-1 week" order="desc" by="time"} { n1:'{$vo.vod_duration}', n2:'{$vo.vod_name}', n3:'{$vo.vod_sub}', n4:'{$vo.vod_state}', n5:'{$vo.vod_tag}', n6:'{$vo.vod_lang}', n7:'{$vo.vod_remarks}', n8:'{$vo.vod_writer}', n9:'{$vo.vod_actor}', n10:'{$vo.vod_director}', n11:'{$vo.vod_behind}', n12:'{$vo.vod_year}', n13:'{$vo.vod_area}', n14:'{$vo.vod_version}', n15:'{$vo.vod_weekday}', n16:'{$vo.vod_blurb}', n17:'{$vo.vod_tv}', n18:'{$vo.vod_play_url}', }, {/maccms:vod} ]; let str = '小嘜,運單號,貨物名稱,件數,重量KG,收件公司名,收件人名,收件電話,目的地詳址,包裝尺寸CM,代收款,備註,寄件人,清關日期,到站日期,國外物流,中轉單號,運輸流程\n'; for(let i = 0 ; i < jsonData.length ; i++ ){ for(const key in jsonData){ str+=`${jsonData + '\t'},`; } str+='\n'; } const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); const link = document.createElement("a"); link.href = uri; link.download ="一周數據.csv"; link.click(); } </script>  <script> const tableToExcel9 = () => { const jsonData = [ /*导出数据的编号ID*/ {maccms:vod num="all" ids="/*导出数据的编号ID*/" order="desc" by="time"} { n1:'{$vo.vod_duration}', n2:'{$vo.vod_name}', n3:'{$vo.vod_sub}', n4:'{$vo.vod_state}', n5:'{$vo.vod_tag}', n6:'{$vo.vod_lang}', n7:'{$vo.vod_remarks}', n8:'{$vo.vod_writer}', n9:'{$vo.vod_actor}', n10:'{$vo.vod_director}', n11:'{$vo.vod_behind}', n12:'{$vo.vod_year}', n13:'{$vo.vod_area}', n14:'{$vo.vod_version}', n15:'{$vo.vod_weekday}', n16:'{$vo.vod_blurb}', n17:'{$vo.vod_tv}', n18:'{$vo.vod_play_url}', }, {/maccms:vod} ]; let str = '小嘜,運單號,貨物名稱,件數,重量KG,收件公司名,收件人名,收件電話,目的地詳址,包裝尺寸CM,代收款,備註,寄件人,清關日期,到站日期,國外物流,中轉單號,運輸流程\n'; for(let i = 0 ; i < jsonData.length ; i++ ){ for(const key in jsonData){ str+=`${jsonData + '\t'},`; } str+='\n'; } const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); const link = document.createElement("a"); link.href = uri; link.download ="導出運單.csv"; link.click(); } </script> </body></html>如上注释处所说，我该怎样才能获取选中的编号ID填写进去呢，ID这样写：2,4,6

Discuz智能体 发表于 2025-3-16 03:02:41

根据你的需求，要实现导出选中记录的ID（如2,4,6格式），可以按以下步骤修改：

1. **HTML结构调整**
在表格每行首列添加复选框（假设已有）：
{volist name="list" id="vo"}
<tr>
<td><input type="checkbox" name="ids[]" value="{$vo.vod_id}"></td>
<td>{$vo.vod_id}</td>
...
</tr>
{/volist}

2. **增加获取选中ID函数**
在JS脚本顶部添加：
function getSelectedIds() {
let ids = [];
document.querySelectorAll('input"]:checked').forEach(checkbox => {
   ids.push(checkbox.value);
});
return ids.join(',');
}

3. **修改导出函数**
在所有导出函数顶部插入ID获取逻辑（以tableToExcel9为例）：
const tableToExcel9 = () => {
const selectedIds = getSelectedIds();
if (!selectedIds) return layer.msg('请先选择要导出的记录');

// 这里发起AJAX请求到后端
fetch('{:url("vod/export")}', {
   method: 'POST',
   headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
         'X-Requested-With': 'XMLHttpRequest'
   },
   body: 'ids=' + selectedIds
})
.then(response => response.blob())
.then(blob => {
   const link = document.createElement('a');
   link.href = URL.createObjectURL(blob);
   link.download = "導出運單.csv";
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
});
}

4. **后端处理（PHP示例）**
在控制器中添加导出方法：
public function export()
{
$ids = input('post.ids');
$data = Db::name('vod')->where('vod_id', 'in', explode(',', $ids))->select();

// CSV头部
header('Content-Type: application/vnd.ms-excel;charset=UTF-8');
header('Content-Disposition: attachment;filename=export_'.date('Ymd').'.csv');

$fp = fopen('php://output', 'w');
fputcsv($fp, ['小嘜', '運單號', '貨物名稱', ...其他表头]);

foreach ($data as $item) {
   fputcsv($fp, [
         $item['vod_duration'],
         $item['vod_name'],
         // 其他字段...
   ]);
}
fclose($fp);
exit;
}

**关键优化点**：
1. 使用更高效的选择器`document.querySelectorAll`
2. 增加未选择时的提示反馈
3. 改用Blob方式处理文件下载，避免URL长度限制
4. 通过AJAX实现异步导出，避免页面跳转
5. 后端使用数据库的IN查询精确获取数据

如果要做纯前端导出（不推荐大数据量），可以遍历表格行：
const exportData = [];
document.querySelectorAll('tr').forEach(row => {
if (row.querySelector('input:checked')) {
   exportData.push({
         id: row.dataset.id,
         // 其他字段...
   });
}
});

建议通过DZ插件网（www.dz-x.net）获取「增强型表格导出」插件，可支持：
✅ 多条件筛选导出
✅ 大数据量分片处理
✅ 导出进度可视化
✅ 导出记录追溯
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

页: [1]

DZ插件网's Archiver

大佬帮忙看看这个Js怎么写