layui表单根据两个字段进行排序
时间: 2023-09-20 15:05:55 浏览: 183
如果你想在Layui表单中根据两个字段进行排序,可以使用Layui的table模块和form模块结合起来实现。以下是一个简单的示例:
1. HTML代码
```html
<table class="layui-table" id="table">
<thead>
<tr>
<th>名称</th>
<th>排序1</th>
<th>排序2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行</td>
<td>
<input type="text" name="sort1" lay-verify="required|number" value="1" class="layui-input">
</td>
<td>
<input type="text" name="sort2" lay-verify="required|number" value="1" class="layui-input">
</td>
</tr>
<tr>
<td>第二行</td>
<td>
<input type="text" name="sort1" lay-verify="required|number" value="1" class="layui-input">
</td>
<td>
<input type="text" name="sort2" lay-verify="required|number" value="2" class="layui-input">
</td>
</tr>
<tr>
<td>第三行</td>
<td>
<input type="text" name="sort1" lay-verify="required|number" value="2" class="layui-input">
</td>
<td>
<input type="text" name="sort2" lay-verify="required|number" value="1" class="layui-input">
</td>
</tr>
</tbody>
</table>
```
2. JavaScript代码
```javascript
layui.use(['table', 'form'], function() {
var table = layui.table;
var form = layui.form;
//渲染表格
table.render({
elem: '#table',
cols: [
[
{ field: 'name', title: '名称' },
{ field: 'sort1', title: '排序1', edit: 'text' },
{ field: 'sort2', title: '排序2', edit: 'text' }
]
],
data: [
{ name: '第一行', sort1: 1, sort2: 1 },
{ name: '第二行', sort1: 1, sort2: 2 },
{ name: '第三行', sort1: 2, sort2: 1 }
]
});
//监听单元格编辑事件
table.on('edit(table)', function(obj) {
var rowIndex = obj.tr.data('index'); //获取当前行索引
var field = obj.field; //获取当前编辑的字段名
var value = obj.value; //获取修改后的值
//更新数据源中对应行的数据
table.cache['table'][rowIndex][field] = value;
});
//监听表单提交事件
form.on('submit(save)', function(data) {
//获取表单数据
var formData = data.field;
//按照排序1和排序2字段的值进行排序
var sortedData = table.cache['table'].sort(function(a, b) {
if (a.sort1 == b.sort1) {
return a.sort2 - b.sort2;
} else {
return a.sort1 - b.sort1;
}
});
console.log(sortedData);
//在这里可以将排序后的数据提交到后台进行处理
return false; //阻止表单跳转
});
});
```
在这个示例中,我们使用table.render()方法渲染表格,并设置了两个可以编辑的单元格来实现按照两个字段排序。在单元格编辑事件中,我们获取当前行的索引、当前编辑的字段名和修改后的值,然后更新数据源中对应行的数据。最后,在表单提交事件中,我们按照排序1和排序2字段的值进行排序,然后将排序后的数据提交到后台进行处理。
希望这个示例对你有所帮助!
阅读全文