1，在table外加入 div ，xm-select可以渲染出来，但是把div放在layui table的表头toolbarDemo上就无法渲染了。
2，使用layui excel导出table时，打开excel发现最右边多出一列，怀疑是不是把滚动条这一栏也导出了。
<!-- 数据表格开始 -->
<table class="layui-hide" id="test1" lay-filter="test1"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-input-inline">
<input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - " style="width:250px; " autocomplete="off">
</div>
<div class="layui-input-inline" style="width:200px;" id="goodsname"></div>
<button type="button" class="layui-btn layui-btn-primary" id="searchBtn" lay-filter="search" lay-event="search" style="border-color:white;"><i class="iconfont" style="color:blue;"></i></button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="exportFile" lay-event="exportFile" style="border-color:white;width:45px;" title="导出excel"><i class="iconfont"style="color:white;" ></i></button>
</script>
<script src="../layui/layui.all.js" charset="utf-8"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
var tagIns1 = xmSelect.render({
el: '#goodsname', // div的id值
toolbar: { // 工具条【‘全选’，‘清空’】
show: true, // 开启工具条
showIcon: false, // 隐藏工具条的图标
},
tips: '选择物料类型', // 让默认值不是“请选择”，而是“选择。。”
theme: { color: '#558ff5' },
filterable: false, // 开启搜索模式，默认按照name进行搜索
paging: false, // 启用分页
pageSize: 3, // 每页的数据个数
data: [ // 默认是name（相当于我们常传的value值）和value(相当于我们常传的id)
{name: 'A', value: 'A'},
{name: 'B', value: 'B'},
{name: 'C', value: 'C'},
]
});
var tableIns = table.render({
elem: '#test1'
,url: './data.php' //数据接口
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'print']
,title:''
,loading:true
,height:'full-30'
,cols: [
[
{field: 'id', title: 'ID',sort: true, totalRowText: '合计：'}
,{field: 'name', title: 'name',sort: true, filter: true}
]
],
where:{
}
, page: false
});
//头工具栏事件，添加，批量删除
table.on('toolbar(test1)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
var data = checkStatus.data;
console.log(data);
console.log(checkStatus);
switch (obj.event) {
case 'exportFile':
exportFile();
break;
case 'refresh':
table.reload('test1',{
url: './data.php'});
laydate.render({
elem: '#ID-laydate-range-datetime',//选择器结束时间
type: 'datetime',
range: true,
min:"1970-1-1"
});
break;
//查询事件
case 'search':
let goodsname= $('#searchReload').val();
let date = $('#ID-laydate-range-datetime').val();
var str = date;
var dates = str.split(' - ');
var start = dates[0];
var end = dates[1];
if (sn =="" && date ==""){
layer.msg("请输入查询信息！");
return false;
}
table.reload('test1',{
url: './order_material_call_search_data.php',
loading:true,
page: {
curr: 1 //重新从第 1 页开始
},
where: {
goodsname: goodsname,
startt: start,
endd:end
}
});
$('#searchReload').val(sn).select();//重加载后，重新赋值上次搜索的内容
$('#ID-laydate-range-datetime').val(date);
laydate.render({
elem: '#ID-laydate-range-datetime',//选择器结束时间
type: 'datetime',
range: true,
min:"1970-1-1"
});
break;
};
});
//excel export
function exportFile() {
var id="test1";
//根据传入tableID获取表头
var headers=document.querySelector("body > div.layui-form.layui-border-box.layui-table-view > div.layui-table-box > div.layui-table-header > table > thead");
var htrs = Array.from(headers.querySelectorAll('tr'));
var titles = {};
for (var j = 0; j < htrs.length; j++) {
var hths = Array.from(htrs[j].querySelectorAll("th"));
for (var i = 0; i < hths.length; i++) {
titles['data-field' + i] = hths[i].innerText;
}
}
//根据传入tableID获取table内容
var bodys=document.querySelector("body > div.layui-form.layui-border-box.layui-table-view > div.layui-table-box > div.layui-table-body.layui-table-main > table > tbody");
var btrs = Array.from(bodys.querySelectorAll("tr"))
var bodysArr = new Array();
for (var j = 0; j < btrs.length; j++) {
var contents = {};
var btds = Array.from(btrs[j].querySelectorAll("td"));
for (var i = 0; i < btds.length; i++) {
for (var key in titles) {
//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
var field = 'data-field' + i;
if (field === key) {
//根据表头字段获取table内容字段
contents[field] = btds[i].innerText;
}
}
}
bodysArr.push(contents)
}
//将标题行置顶添加到数组
bodysArr.unshift(titles);
//导出excel
LAY_EXCEL.exportExcel(bodysArr, '明细<?PHP echo date('Y-m-d_his',time()); ?>.xlsx', 'xlsx')
};
});
</script>
<script>
layui.use('laydate', function(){ // 日期时间范围
var laydate = layui.laydate;
var Datefiler = {
elem: '#ID-laydate-range-datetime',//选择器结束时间
type: 'datetime',
range: true,
min:"1970-1-1"
}
laydate.render(Datefiler);
});
</script>
