Layui table 按住shift多选复选框

前情提要

用户觉得一个个选太麻烦，全选又要一个个取消，筛选又不想筛，想要多选。

前期准备

页面添加下面这行代码，用于保存最后选中的复选框的下标。

<input type="hidden" id="last_index" value="0">

使用数据渲染完毕的回调函数 done 实现

				]],
                done: function(){
                    // 刷新列表后初始化
                    $('#last_index').val(0);

                    let downing_shift = false;  //记录shift键
                    $(document).keydown(function (e) {
                        if (e.shiftKey) {
                            downing_shift = true;
                        }
                    }).keyup(function () {
                        downing_shift = false;
                    });

                    // 监听复选框点击事件
                    $('.layui-form-checkbox').on('click',function (d) {
                        var last_index = $('#last_index').val() * 1;    //  上次选中的复选框的下标
                        var data_index = $(this).closest("tr").attr('data-index') * 1;  // 当前选中的复选框的下标
						// 如果按住了shift
                        if (downing_shift) {
                        	// 取消shift按住状态，防止无限递归
                            downing_shift = false;
                            var number = last_index - data_index;   // 负数为从下往上选，正数为从上往下选
                            var count = number < 0 ? number * -1 : number;	// 包含的行数
                            for (var a = 0; a < count + 1; a++) {
                            	// 计算下标
                                var di = number < 0 ? last_index + a : data_index + a;
                                // 获取复选框所在行所在列
                                // 这里用 layui-table-fixed-l 是因为复选框固定到了左侧
                                // 根据实际情况填写，例如没有固定列可以用 layui-table-main
                                var name = '.layui-table-fixed-l [data-index="' + di + '"] td';
                                // 获取复选框选中状态
                                var is_checked = $(name).eq(1).find('.layui-unselect').attr('class');
                                // 没选中则点击
                                (is_checked === undefined || !is_checked.includes('layui-form-checked')) && $(name).eq(1).find('.layui-unselect').click();
                            }
                        }
                        $('#last_index').val(data_index);
                    });
           		 }