layui数据表格在安卓系统上可以完美运行,但是在ios系统上非常不友好,横向不自动适应并且没有了左右滑动的滚动条,解决办法如下。
判断是不是ios操作系统,如果是的话就给layui数据表格加上宽和高可以解决问题。
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return { //移动终端浏览器版本信息
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
};
}(),
}
if(browser.versions.ios||browser.versions.iPad){
layui.use(['table','laydate','form'], function(){
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
table.render({
elem: '#baoming'
,url:'/sale/baoming/getData'
,height : 300 /*这里可以设置数据表格大大小*/
,width : 350
,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
,limit:50
}
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'experience', title: '积分', sort: true}
,{field:'score', title: '评分', sort: true}
,{field:'classify', title: '职业'}
,{field:'wealth', width:137, title: '财富', sort: true}
]]
});
});