使用layui遇到的一些问题及解决方案
1.在做批量删除的时候,存储的数据为数组,后台要求接收的参数也是数组,但是请求的时候并没有成功?
这是因为后台不识别数组,要把它转换成对象格式,比如:idStr.join(','),这样就把数组转换成对象,成功传递给后台进行数据交互了!
2.在执行删除操作后,需要刷新页面,但是还要保持在原页以及原模块,这个时候应该怎么办?
我们可以找到父页面的分页确定按钮,让它在请求后台成功的时候执行这句代码:$(window.parent.document).find('.layui-laypage-btn').click();
admin.req({
url:setter.commonUrl+'/******',
method:'post',
data:{
id:IdStr.join(','),//将数组转换成对象,后台就能成功接收了
reason:reasonDel
},
done: function(res){
console.log(res)
layer.msg('删除成功',{icon:setter.icon.smile,shade:0.01},function(index){
parent.layer.closeAll();
$(window.parent.document).find('.layui-laypage-btn').click();//刷新页面
})
}
})
3.如何实现表格的批量删除?点击全选,删除所有的数据?
首先先获取勾选的数据,获取要传递给后台的数据(比如id),将获取到的id存储到数组里,如果是将数组传递到子页面,可以使用layui.sessiondata()将数组存起来,在子页面用到时候再取出来,然后实现数据交互就可以了
var checkStatus = table.checkStatus('table-firm'),
data = checkStatus.data;
console.log(data) //获取选中行的数据
console.log(data.length) //获取选中行数量，可作为是否有选中行的条件
var str = [];//存入id
if(data.length>0){
layui.each(data, function(index,item){//将获取的选中行数据进行遍历
str.push(item.id);//将id存入数组
})
// 将获取到的存起来
layui.sessionData(setter.tableName,{
key:'IDStr',
value:{
'IdStr':str
}
})
}
4.如何在layui里实现导出功能?
在使用ajax请求后台数据时,并没有弹出Excel表格,浏览器也返回了数据,但是是一堆乱码,也就是说使用ajax请求的数据格式不可以,所以就换了一种请求方式window.open()
var checkStatus= table.checkStatus('table-firm'),
data = checkStatus.data,//获取选中的数据
outList = [];//导出的id数组
data.forEach(function(item,index){
outList.push(item.id);
})
console.log(data.length)
if(data.length>0){
console.log(outList)
layer.msg('正在导出...',{icon:setter.icon.loading,time:1000});
window.open("url?id="+outList.join(','));//注意:传递给后台的数据(数组)一定要转换成对象
}else{
layer.msg('请选择要导出的数据',{icon:setter.icon.error,shade:0.01,anim:6,time:1000})
}
5.表格重载如何使用?
相信文档上写的清楚之时而在实际项目之中又带点不明白,在实际项目中,重载的时候是有新的接口(新的url),不多说了,代码奉上
var demoReloadVal= $.trim($('#test-table-demoReload').val());//搜索的内容(去掉前后空格)
table.reload('table-firm',{
url:'重载的接口',
//对于分页请求的参数
request: {
pageName: 'page',
limitName: 'count'
},
where:{
condition:demoReloadVal//请求参数,将查询的内容传递给后台
},
page:{
curr:1
}
})
}
6.在数据表格中,点击工具条里的禁用,弹出个确认框,如果确认,就把禁用替换成已禁用?
这里就可以使用模板引擎的功能亮点了
<!--操作按钮模板--> <script type="text/html" id="firm"> <a class="layui-btn layui-btn-xs layui-btn-danger platDel" lay-event="user-del">删除</a> <!--userStatus是从后台返回的数据,可以直接拿来用--> <button class="layui-btn layui-btn-primary platForbid layui-btn-xs {{d.userStatus==0?'':'layui-btn-disabled'}}" lay-event="user-cool" {{d.userStatus==0?'':'disabled'}}>{{d.userStatus==0?'禁用':'已禁用'}}</button> </script>
