Layui表格checkbox与li标签实现双向联动

表格分页时需维持联动

	var selectedId = new Array(); // 所有选中的元素id
	var currentPage = new Array(); // 当前页数据
	
	table.render({
	    ...
	    , done: function (res, cur, cnt) {
	        currentPage = res.data;
	        setRowId(currentPage);
	    }
	});
	
    // 监听表格勾选事件
    table.on('checkbox(layerTableFilter)', function (obj) {
        if (obj.checked == true) { // 勾选
            if (obj.type == 'one') { // 单个元素选中
                selectedId.push(obj.data.id);
                addListOption(obj.data);
            } else { // 当前页全选
                currentPage.forEach(function(item){
                    if(!selectedId.includes(item.id)){ // 过滤已经选中的元素
                        selectedId.push(item.id);
                        addListOption(item);
                    }
                })
            }
        } else { // 取消勾选
            if (obj.type == 'one') {  // 单个元素取消选中
                removeSelectedId(obj.data.id);
                removeListOption(obj.data);
            } else { // 当前页所有元素取消选中
                currentPage.forEach(function(item){
                    removeSelectedId(item.id);
                    removeListOption(item);
                })
            }
        }
    })
	
	// 给表格的行添加id属性
	function setRowId(currentPage) {
	    var index = 0;
	    $(".layui-table-body tr").each(function () {
	        $(this).attr("id",currentPage[index++].id);
	    })
	}
	
	// 右侧列表添加内容
	function addListOption(obj) {
	    var option = '<li class="layer-list" data-name="' + obj.name + '" data-id="' + obj.id + '"><i class="layui-icon layui-icon-layer"></i>' + obj.name + '<i class="layui-icon layui-icon-close"></i></li>'
	    $("#rightList").append(option);
	    addLayerListEven();
	}
	
	// 右侧列表移除内容
	function removeListOption(obj) {
	    var option = ".layer-list[data-id='" + obj.id + "']";
	    $(option).remove();
	}
	
	// 右侧列表中的内容删除时，左侧表格取消相应勾选
	function addLayerListEven() {
	    $(".layer-list .layui-icon-close").off().click(function () {
	        $(this).parent().remove();
	        var optionId = $(this).parent().attr("data-id");
			removeSelectedId(optionId);
	        var selectRow = "tr[id='" + optionId + "']";
	        $(selectRow).find("input").attr("checked", false);
	        form.render();
	    })
	}
	
     // 移除SelectedId中对应元素
     function removeSelectedId(optionId) {
         var index = selectedId.indexOf(optionId);
         if (index > -1) {
             selectedId.splice(index, 1);
         }
     }