前端数据的渲染和加载(render和reload)、对table和form的渲染(layui),layui.table的使用(done:function)、table向后端传递数据、js获得url

本文介绍了layui表格渲染render与reload的区别,render用于全面刷新包括表头,reload则针对数据进行局部更新。此外,还详细讲解了layuitable的使用,涉及ajax请求和表格配置,以及注意事项。
摘要由CSDN通过智能技术生成

1.render和reload

1)render渲染

是对整个部分进行渲染

2)reload加载

对部分加载,在table中使用的时候是只对数据进行渲染

3)例子
//对整个table进行渲染包括表头等
table.render()

//对整个table进行渲染包括表头等
table.render("id值",请求)


//对整个form进行刷新(layui中对有layui-form修饰过的标签中的内容进行刷新)
form.relocad()

//对form中的select进行刷新(layui中对有layui-form修饰过的标签中的select内容进行刷新)
form.relocad("select")

//对form中的select的id值为hello进行刷新(layui中对有layui-form修饰过的标签中的select的id值为hello内容进行刷新)
form.relocad("select","hello")

2.layui table的使用

layui.table的render加载对数据库的请求实际上就是一个ajax的get请求
var obj=windows.location
layui.table.render({
        elem: '#Table'//与table标签id对应
        ,height: 470
        ,width:1300
        ,url: obj.protocol+"//"+obj.host+urls //数据接口,采用绝对地址
        ,where: {key1:value,key2:value}//返回数据
        ,dataType:"json"//返回数据类型
        ,title: '用户表'
        ,cols: [[ //表头
            {field: 'id', title: '序号', width:60}
            ,{field: 'receiver', title: '供应商', width:80}
            //templet中填写的是对应的就是方法,方法名为sss
            ,{field: 'ap', title: '状态', width: 100,templet:sss}
      //向对应单元格插入工具栏(toolbar)绑定的是type="text/html"的js块的id
            ,{field: 'department_code', title: '操作', width: 168,toolbar:"#edit"}
        ]],
         done: function (res, curr, count) {
         		//前端返回的数据
        	     //console.log(res);
			    //得到当前页码
               // console.log(curr);
               //得到数据总量
              // console.log(count);
         },
        page:true, //开启分页
        limit: 10,//每页显示的数量
    });

page:true但是分页没有开启

responcedata中的count必须有值,因为table需要以此来确定页数

通讯正常,前端接收到返回值,但是不显示数据

responcedata中的code的值必须为0

table向后端传递数据使用where字段代码如上

以上方法虽然可以使用,但是在使用时还是注意查看官方文档,官方文档写的非常详细,一定要非常仔细的查看官方文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值