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 列宽百分比显示的更多相关文章
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- devpress grid表格自适应列宽的问题
/// <summary> /// 自适应列宽,显示横向滚轴,只有当所有列都已经在界面上加载完成之后才能生效 /// </summary> public void setAut ...
- 保存Total Commander的列宽
Total Commander的默认列宽经常显示不全内容,需要手工调整,用"Menu -> Configuration -> Save Position"可以永久保存列 ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
- 使用datatables实现列宽设置、水平滚动条、显示某列部分内容
示例 1.//使用 columnDefs 给列设置宽度 $('#example').DataTable( { "columnDefs": [ //给第一列指定宽度为表格整个宽度的2 ...
- layui table 数据表格固定列的行高和table其他列的行高不一致
1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...
- JS可改变列宽table
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- table列等宽
固定table列等宽 固定table列等宽 style: {table-layout : fixed} html: style="table-layout:fixed" js: o ...
- display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
随机推荐
- 如何在思科交换机上配置Telnet远程登录
本地用户认证登录 如果配置本地用户认证,则需要开启本地数据库认证,这时就不需要配置相应虚拟终端认证密码了,但要至少配置一个本地用户并设置用户密码用来进行登录认证,具体配置如下: C2960#conf ...
- Devops 导论
第一章 DevOps概述 第二章 个体软件过程 第三章 敏捷软件开发 第四章 软件架构演化 第五章 云原生与容器技术 第六章 XaaS和IT服务标准 第七章 DevOps工具链 --学习总结自< ...
- java 并发包JUC下的CountDownLatch和CyclicBarrier的理解和区别
推荐这篇帖子,讲得不错~ https://blog.csdn.net/liangyihuai/article/details/83106584
- 解决无法访问github的问题
当我们想学习下载某个大神分享的github项目时,由于github域名解析异常,时常会无法访问Github网站. 下面是我总结分享的有效解决方法:思路是自己手动修改hosts文件添加域名解析! 下面教 ...
- [Django高级之forms组件]
[Django高级之forms组件] forms组件之校验字段 # 第一步:定义一个类,继承forms.Form # 第二步:在类中写字段,要校验的字段,字段属性就是校验规则 # 第三步:实例化得到一 ...
- Python+Selenium - 定位策略
一个元素定位可能会在多个地方用到,用loc变量接收元素的定位方式和相对路径.使用时再拆包(*loc) loc = (定位方式,'定位方式对应的元素路径') =>元素定位方式及路径 driv ...
- 超轻量AI引擎MindSpore Lite
超轻量AI引擎MindSpore Lite 揭秘一下端上的AI引擎:MindSpore Lite. MindSpore Lite是MindSpore全场景AI框架的端侧引擎,目前MindSpore L ...
- TensorFlow六种激活函数
TensorFlow六种激活函数 每个神经元都必须有激活函数.神经元提供了模拟复杂非线性数据集所必需的非线性特性.该函数取所有输入的加权和,进而生成一个输出信号.把它看作输入和输出之间的转换.使用适当 ...
- GPU编程和流式多处理器(四)
GPU编程和流式多处理器(四) 3.2. 单精度(32位) 单精度浮点支持是GPU计算的主力军.GPU已经过优化,可以在此数据类型上原生提供高性能,不仅适用于核心标准IEEE操作(例如加法和乘法),还 ...
- NSight Compute 用户手册(中)
NSight Compute 用户手册(中) NVIDIA Nsight Compute支持密码和私钥身份验证方法.在此对话框中,选择身份验证方法并输入以下信息: 密码 IP/主机名:目标设备的IP地 ...