layui 樹形元件元素全選,全不選,反選

2021-10-07 09:53:03 字數 1577 閱讀 7374

layui的tree元件官方介紹的不多,而且元素的名稱都得是固定的所以如何將後台的資料與前台互動需要自己再設計

1、後台到前端(有遞迴呼叫)

private object fun(listtree, list> result) 

result.add(map);

}return result;

}

前端接收展示

layui tree展示有個bug 就是一級和二級的圖示尺寸不一樣,所以會對不齊。所以我把沒有子項的排除了。

2、全選,全不選,反選

官方文件中方法很少:1、獲取勾選的節點。2、指定節點id勾選。

所以得自己遍歷了,反選有點麻煩先遍歷出所有勾選的id。

指定適用班級

全選全不選反選

layui.use(['transfer', 'layer', 'table', 'element', 'form', 'tree', 'util'], function () );

}, setchecked: function () );

}, setunchecked: function () );

}, setreversechecked: function () );

}, reload: function () );

}});

// 全選

function allselect(database) })}

})}//全不選

function allunselect(database) })}

})}//反選

function reversechecked(database) else

})})

} else

// console.log(allelement, '資料')

// console.log(getid(checkeddata), '選中資料')

}// y用來遞迴篩選id

function getid(data) )}})

return myarmy;

}

3、後台接收前端資料 

用json接收傳來的資料再轉化,建個工具類。

/**

* @author huangzheng

* @date 2020/6/16 16:12

*/@data

public class tree

package com.alibaba.fastjson;

listarray = jsonarray.parsearray(ruleclasses, tree.class);

整體效果如前

jquery全選 全不選 反選技巧

按鈕 全選 取消全選 反選用函式,可以實現分頁的ajax傳值後生成的頁面,也能全選,取消全選,反選 選中所有 function selectall 取消選中所有 function unselect 反選 function reverseselect else 注 最好用prop屬性 判斷input框...

jQuery實現全選 全不選和反選

廖雪峰官網的jquery例子 function var flag false 是否是全選狀態,因為全選和全不選共用選擇框 selectall.change function else selectall.prop checked false 文字變反,選擇也相應變反 invertselect.cli...

案例 全選與全不選及反選

效果圖如下 點選全選時會全部選中 全不選時全部不選 反選時反向選中.html結構 js 實現過程 一 需求分析 1 點選全選 選中所有選擇框 設定checked屬性為true 2 點選全不選 不選中所有選擇框 設定checked屬性為false 3 點選反選 讓每乙個選擇框的checked屬性與自身...