关于layui数据表格不兼容ios的问题

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}
    ]]
  });
});
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值