layui table 列宽百分比显示的实现方法


Posted in Javascript onSeptember 28, 2019

废话不多说了,为大家分享一下layui实现 table 列宽百分比显示的实例代码,希望对大家有所帮助吧

var layer = layui.layer, form = layui.form, table = layui.table;
      var $ = layui.$;
      /*select gysmc,zyzw ,xm ,sjhm ,bgshm ,emilyx ,
      zgsrgzwsj ,zggsgl ,cast(gysxxid as int) as gysxxid, pc,
       gysryxxMdataID as ID,sjbs from gysryxxMdata*/
      var tableInit = table.render({
        elem: '#tbgysplay'
        , method: 'post'
        , data: jsonData
        , height: "auto"
        , id: "tbgysplay"
        , text: {none: '暂无相关数据'}
        , toolbar: "#toolbarplan"
        , cols: [[
          {type: "checkbox", fixed: "left", width: 50}
          , {
            field: "number", title: "序号", width: '5%', align: "left", templet: function (data) {
              return data.LAY_INDEX
            }
          }
          , {field: "ID", title: "ID", align: "left", hide: true}
          , {field: "action", title: "action", align: "left", hide: true}
          , {field: "sjbs", title: "sjbs", align: "left", hide: true}
          , {field: "供应商名称", title: "供应商名称", width: '20%', align: "left"}
          , {field: "主要产品类型", title: "主要产品类型", width: '20%', align: 'left'}
          , {field: "所在省份", title: "所在省份", width: '15%', align: 'left'}
          , {
            field: "PSA计划时间", title: "PSA计划时间", width: '20%', align: 'left', edit: 'select',
            templet: function (d) {
              return '<input type="text" name="rzrq" verify lay-verify="verify" value="' + (d.rzrq || '') + '" placeholder="请选择时间" readonly="readonly" class="layui-input layui-input-date" style="text-align: center"/>';
            }
          }
          , {field: "PSA计划负责人", title: "PSA计划负责人", width: '20%', align: 'left', edit: 'text'}
        ]]
        , done: function () {//当数据渲染完后,执行的回调
          //日期控件
          $(".layui-input-date").each(function (i) {
            layui.laydate.render({
              elem: this,
              format: "yyyy-MM-dd",
              done: function (value, date) {
                if (res && res.data[i]) {
                  $.extend(res.data[i], {'rzrq': value})
                }
              }
            });
          });
          layer.closeAll();
        }

      });
      //双击编辑行
      table.on('edit(tbgysplay)', function (obj) {
        //检验格式 电话 办公室电话 邮箱
      });

以上这篇layui table 列宽百分比显示的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
js模拟实现Array的sort方法
Dec 11 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
js字符编码函数区别分析
Dec 28 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 #Javascript
JavaScript实现轮播图效果代码实例
Sep 28 #Javascript
json字符串对象转换代码实例
Sep 28 #Javascript
javascript头像上传代码实例
Sep 28 #Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 #Javascript
JavaScript生成随机验证码代码实例
Sep 28 #Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 #Javascript
You might like
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP单例模式详细介绍
2015/07/01 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
微信小程序实现可长按移动控件
2020/11/01 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python操作gitlab API过程解析
2019/12/27 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
代理商会议邀请函
2014/01/27 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
创业计划书之家教托管
2019/09/25 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书