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 相关文章推荐
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
在centos7中分布式部署pyspider
2017/05/03 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
matplotlib实现区域颜色填充
2019/03/18 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python 经典数字滤波实例
2019/12/16 Python
python psutil监控进程实例
2019/12/17 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
商务专员岗位职责
2013/11/23 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
企业金融服务方案
2014/06/03 职场文书
党员演讲稿
2014/09/04 职场文书
教师工作态度自我评价
2015/03/05 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python