处理layui表格复选框勾选后保持原始勾选状态

最新推荐文章于 2024-04-13 22:05:43 发布

WAZYY0619

最新推荐文章于 2024-04-13 22:05:43 发布

阅读量152

点赞数 3

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/wangkaiyuan666/article/details/137511697

版权

本文介绍了通过AJAX获取API返回的userId，实现前端表格中特定行的选中和取消选中，提升了用户体验。

摘要由CSDN通过智能技术生成

done: function(res, curr, count) {
                    var siteid = "[[${siteid}]]";
                    var checkedRowIndexes = [];
                    // 发起获取 userIdFromAPI 的请求
                    $.ajax({
                        url: '/stat/admin/webconfig/selectuser?siteid=' + siteid,
                        type: 'GET',
                        success: function(data) {
                            var userIdFromAPI =  data.list[0].userid; // 替换为实际的响应字段
                            var $table = $('#layuitable').next().find('.layui-table tbody');
                            var rows = $table.children('tr');
                            rows.each(function() {
                                var $row = $(this);
                                var rowData = table.cache.layuitable[$row.data('index')];
                                if (rowData.userID === userIdFromAPI) { // 假设 userId 字段名
                                    $row.find('.layui-form-checkbox').addClass('layui-form-checked');
                                    $row.siblings().find('.layui-form-checkbox').removeClass('layui-form-checked');
                                    $row.siblings().find('input[type="checkbox"]').prop('disabled', false);
                                    checkedRowIndexes.push(index); // 将选中的行索引存入数组
                                }
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error("Failed to fetch userIdFromAPI: " + error);
                        }
                    });

$.ajax() 发起了一个异步请求来获取 userIdFromAPI，请求成功后，会将相应的用户ID与表格中的数据进行匹配，选中对应的复选框。