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版网站风格切换实例代码
Oct 06 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
微信小程序实现登录注册功能
Dec 29 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
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JS重载实现方法分析
2016/12/16 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
python删除列表中重复记录的方法
2015/04/28 Python
详解Django中Request对象的相关用法
2015/07/17 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Python 从attribute到property详解
2020/03/05 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
企业军训感言
2014/02/08 职场文书
安全生产月活动总结
2014/05/04 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
优秀教师推荐材料
2014/12/16 职场文书
终止劳动合同通知书
2015/04/16 职场文书
2015年测量员工作总结
2015/05/23 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
详解java如何集成swagger组件
2021/06/21 Java/Android
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers