jquery动态赋值layui table数据

jquery动态赋值layui table数据

<table class="layui-table" id="productTest" style="width: 100%;">
    <thead>
	    <tr id="template">
			<th id="productname">商品名称</th>
			<th id="nowprice">现价</th>
			<th id="username">用户名</th>
			<th id="applyprice">申请价</th>
			<th id="check">输入框</th>
		</tr>
	</thead>
</table>
var tableData = data;
$.each(tableData, function (i, n) {  //回显到表格
	var row = $("#template").clone();
	row.find("#productname").text(n.productname);
	row.find("#nowprice").text(n.nowprice);
	row.find("#username").text(n.username);
	row.find("#applyprice").text(n.applyprice);
	row.find("#check").html('<input type="text" name="" id="" value="" />');//动态增加输入框
	row.appendTo("#productTest");//添加到模板的容器中
});
在使用 layuitable 组件时,可以通过调用 table.render() 方法来实现数据绑定。具体步骤如下: 1. 引入 layuitable 模块和 jQuery 库,例如: ```html <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> ``` 2. 在 HTML 页面中定义一个 table 元素,例如: ```html <table id="demo" lay-filter="test"></table> ``` 其中,lay-filter 属性用于指定表格的筛选器,后面会用到。 3. 编写 JavaScript 代码,通过 AJAX 请求获取数据,并将数据绑定到表格中,例如: ```javascript // 定义一个数组,用于存放模拟数据 var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 22}, {id: 3, name: '王五', age: 25}, {id: 4, name: '赵六', age: 28}, ]; // 使用 table.render() 方法将数据绑定到表格中 layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', // 指定要渲染的元素 data: data, // 指定要绑定的数据 cols: [[ // 表头定义 {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} ]] }); }); ``` 在上面的代码中,首先定义了一个数组 data,用于存放模拟数据。然后使用 layui.use() 方法加载 table 模块,并在回调函数中调用 table.render() 方法将数据绑定到表格中。其中,elem 属性指定要渲染的元素,data 属性指定要绑定的数据,cols 属性指定表头定义。 4. 最后,通过 AJAX 请求获取数据并更新表格时,可以调用 table.reload() 方法,例如: ```javascript // 定义一个函数,用于重新加载表格 function reloadTable() { $.ajax({ url: '/getData', // 请求数据的 URL type: 'get', success: function(res) { // 将新数据绑定到表格中 layui.use('table', function(){ var table = layui.table; table.reload('test', { data: res }); }); } }); } ``` 在上面的代码中,首先定义了一个函数 reloadTable,用于重新加载表格。然后通过 AJAX 请求获取数据,将新数据绑定到表格中。需要注意的是,调用 table.reload() 方法时需要传入表格的筛选器(即 lay-filter 属性的值)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值