layui分成两列相同的表格_layui的table表格在同一单元格换行显示2个数据(layui-table) / 解决 layui table 一个单元格显示多行数据,以及操作栏样式错乱问题...

本文介绍如何在layui中将表格分成两列显示相同数据,并解决一个单元格内显示多行信息以及操作栏样式错乱的问题。示例代码展示了如何使用layui的table组件进行设置和模板渲染。
摘要由CSDN通过智能技术生成

{{# layui.each(d.web_admin_address,function(index, item){ }}{{ item.web_admin_address }}


{{# }); }}

form=layui.form,

table=layui.table;

table.render({

elem:'#currentTableId',

url:"{:url('admin/baota/json_list')}",

toolbar:'#toolbarDemo',

defaultToolbar: ['filter','exports','print', {

title:'提示',

layEvent:'LAYTABLE_TIPS',

icon:'layui-icon-tips'}],

title:'宝塔信息管理表',

cols: [[

{type:"checkbox", fixed:'left',width:50},

{field:'id', width:50, title:'ID', fixed:'left', sort:true},

{field:'bt_name', width:120, title:'宝塔名称', fixed:'left', },

{field:'bt_adderss', width:320, title:'宝塔地址', sort:true},

{field:'bt_account', width:120, title:'宝塔账号'},

{field:'bt_password', width:100, title:'宝塔密码'},

{field:'web_admin_address', width:180, title:'网站', templet:'#titleTpl'},

{field:'remarks', width:120, title:'备注'},

{field:'create_time', width:180, title:'创建时间', sort:true},

{title:'操作', minWidth:150, toolbar:'#currentTableBar', align:"center",fixed:'right',}

]],

limits: [10,15,20,25,50,100],

limit:15,

page:true,

skin:'line',done:function(res, curr, count){

$(".layui-table-main tr").each(function(index, val) {

$($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());

$($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());

})

},

parseData:function(res){//将原始数据解析成 table 组件所规定的数据

//console.log(res.data.data);

return{"code": res.code,//解析接口状态

"msg": res.msg,//解析提示文本

"count": res.count,//解析数据长度

"data": res.data.data//解析数据列表

};

},

request: {

pageName:'page' //页码的参数名称,默认:page

, limitName:'size' //每页数据量的参数名,默认:limit

//页码和显示数量

}

});//监听搜索操作

form.on('submit(data-search-btn)',function(data) {//执行搜索重载

table.reload('currentTableId', {

page: {

curr:1}

, where: {

searchParams: data.field,

}

},'data');return false;

});/**

* toolbar监听事件*/table.on('toolbar(currentTableFilter)',function(obj) {if(obj.event=== 'add') {//监听添加操作

varindex=layer.open({

title:'添加用户',

type:2,

shade:0.2,

maxmin:true,

shadeClose:true,

area: ['100%','100%'],

content:'../page/table/add.html',

});

$(window).on("resize",function() {

layer.full(index);

});

}else if(obj.event=== 'delete') {// //监听删除操作

//监听批量删除操作

varcheckStatus=table.checkStatus(obj.config.id);

checkData=checkStatus.data;

delList=[];for(vari= 0; i

delList.push(checkData[i].id);

}if(delList== ''){

layer.msg('请选择删除项',{time:700});return false;

}

console.log(delList);

layer.confirm('确定批量删除吗?',function(index){

layer.close(index);

$.ajax({

type:'post',

dataType:'json',

url:"{:url('server/server_del_many')}",

data:{ids:delList},

success:function(res) {if(res.status== 200) {

layer.msg(res.msg,{time:500},function() {

window.location.reload();

})

}else{

layer.msg('失败', {icon:2, time:500});

}

}

});

});

}

});//监听表格复选框选择

//table.on('checkbox(currentTableFilter)', function (obj) {

//console.log(obj)

//});

table.on('tool(currentTableFilter)',function(obj) {varid=obj.data.id;if(obj.event=== 'edit') {varindex=layer.open({

title:'编辑服务器',

type:2,

shade:0.2,

maxmin:true,

shadeClose:true,

area: ['100%','100%'],

content:"{:url('admin/server/edit')}?id="+id,

end:function() {

window.location.reload();

}

});

$(window).on("resize",function() {

layer.full(index);

});return false;

}else if(obj.event=== 'delete') {

layer.confirm('真的删除行么',function(index) {

obj.del();

layer.close(index);

$.ajax({

type:'post',

url:"{:url('admin/server/del')}",

data:{id:obj.data.id},

success:function(res) {//console.log(res);

if(res.status== 200) {

layer.msg(res.msg,{time:500},function() {

window.location.reload();

})

}else{

layer.msg('失败', {icon:2, time:500},function() {

window.location.reload();

});

}

}

});

});

}

});

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值