layui将table转化表单显示的方法(即table.render转为表单展示)_table.renderwhere - CSDN文库

5星 · 超过95%的资源 67 浏览量更新于2023-05-04 评论收藏 38KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

layui将将table转化表单显示的方法转化表单显示的方法(即即table.render转为表单展转为表单展

示示)

现有一个现有一个

table.render({

id : 'table',

type:'post',

elem : '#table',

url : url,

where : {'Id' : $data.Id},

page:false,

cols : [ [ //表头

]] })

最简单直接用最简单直接用ajax请求，确保请求，确保url路径正确路径正确

$.ajax({

dataType:'json',

type:'post',

url:url,

data:{'Id': $data.Id},

success:function (data) {

$.each(data.rows,function (k,v) {

var myJson=JSON.stringify(v);//转化格式便于传递

//遍历展示，将每一行数据分别隐藏在span便签

$(".ul").append("<li value="+v.id+" class='layui-btn layui-btn-add '>"

+v.Name+

"<span class='vid'>"+myJson+"</span>"+

"</li>"

)

var nowTemp=$("li[value='"+temp+"']");//监测编辑的对应行

if(nowTemp){

nowTemp.addClass("layui-table-double");

}

})

}

})

监听每一个监听每一个ul中动态产生的中动态产生的li

$('ul').on('click', 'li', function () {

var data=JSON.parse($(this).find('.vid').text());

$(this).addClass("layui-table-double");

$(this).siblings().removeClass("layui-table-double");

//点击每个动态生成的li标签，可以将其内部span隐藏的数据展示出来

appmod.formRender('Form',data);

});

可以编辑可以编辑

$('.edit').click(function () {

var dataTemp=$(".layui-table-double span").text();

var data=JSON.parse(dataTemp);

appmod.formRender('Form',data);

//修改后重新提交

})

删除按钮删除按钮

$('.del').click(function () {

var dataTemp=$(".layui-table-double span").text();

var data=JSON.parse(dataTemp);

layer.confirm('真的要删除吗?', function(index) {

$.ajax(url,{'id' : data.id},function(){

layer.close(index);

window.location.reload()

});

});

})

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论5

FelaniaLiu

2023-07-28

：通过阅读这个文件，我学到了如何使用layui将table转化为表单展示，非常有帮助。

weixin_38644141

粉丝: 5
资源: 925

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈