layui的table的列宽能设置成百分比的么

发布网友 发布时间：2022-04-21 06:31

我来回答

共1个回答

热心网友 时间：2022-04-29 12:24

可以的。
代码如下：
(function ($) {
$.fn.table = function(pin) {
return this.each( function() {
//定义jquery对象
var _divObj = $(this);
var _divObjId= _divObj[0].id;
//调用插件的参数
var p = $.extend(true,{
url : "", //url
data : null, //url的参数
cols : [], //列
width : null, //table宽
height : 'full-170', //table高
page : 0, //数页
limit : 10, //页大小
limits : [10,20,30,40,50,60,70,80,90],
id : _divObjId, //layui.table的容器id
loading : false, //是否显示加载进度条
refreshBtn : null, //刷新按钮
onSuccess : null //列表加载完成后执行的回调
}, pin || {});

setFieldWidth();
dataTable();

/**
* 根据列设置的宽度百分比计算实际宽度并回写回去
*/
function setFieldWidth() {
var columns = p.cols[0];
var tableWidth = p.width == null ? _divObj.parent().width()-columns.length : p.width;
for(var i=0;i<columns.length;i++){
var field = columns[i];
var fieldWidth = field.width+'';
if(n = fieldWidth.indexOf('%') >= 0){
var realWidth = parseInt(fieldWidth.substring(0,n)) * 0.1 * tableWidth;
field.width = parseInt(realWidth);
}

}
}