jQuery實現(xiàn)樹形員工信息表
更新時間:2022年05月06日 10:22:43 作者:南初?
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)樹形員工信息表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)樹形員工信息表的具體代碼,供大家參考,具體內(nèi)容如下
一、效果圖



二、核心代碼
var list = [
? ?{
? ? ? ?name: "技術(shù)部",
? ? ? ?child: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "用戶一"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "用戶二"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "用戶三"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: "人事部",
? ? ? ? ? ? child: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "人事一"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "人事二"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "人事三"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: "財務(wù)部",
? ? ? ? ? ? child: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "財務(wù)一"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "財務(wù)二"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "財務(wù)三"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: "項目部",
? ? ? ? ? ? child: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "項目一"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "項目二"
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "項目三"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }
? ? ];
? ? $(function(){
? ? ? ? list.forEach(function(item,index){
? ? ? ? ? ? var li=$("<li class='plist' data-p='"+index+"'><span class='icon icon_close'></span><span
class='icon_tree'></span><span>"+item.name+"</span></li>");
? ? ? ? ? ? li.append(setchild(item.child));
? ? ? ? ? ? $(".treemenu").append(li);
? ? ? ? })
? ? ? ? function setchild(child){
? ? ? ? ? ? var str="<ul class='c_menu'>";
? ? ? ? ? ? for(var i=0;i<child.length;i++){
? ? ? ? ? ? ? ? str+="<li><span class='line'></span><span class='icon_check'></span><span
class='cname'>"+child[i].name+"</span></li>"
? ? ? ? ? ? }
? ? ? ? ? ? str+="</ul>";
? ? ? ? ? ? return str;
? ? ? ? }
? ? ? ? $(".icon").each(function(pindex){
? ? ? ? ? ? $(this).click(function(){
? ? ? ? ? ? ? ? $(".c_menu").eq(pindex).slideToggle();
? ? ? ? ? ? });
? ? ? ? });
? ? ? ? $(".icon_check").each(function(chindex){
? ? ? ? ? ? $(this).click(function(){
? ? ? ? ? ? ? ? //點擊時添加或移除選中符號
? ? ? ? ? ? ? ? $(this).toggleClass("icon_check_ck");
? ? ? ? ? ? ? ? //定義變量是否被選中
? ? ? ? ? ? ? ? var ishas=$(this).hasClass("icon_check_ck");
? ? ? ? ? ? ? ? //查找外層父元素對應(yīng)的索引
? ? ? ? ? ? ? ? var parentIndex=$(this).parents(".plist").attr('data-p');
? ? ? ? ? ? ? ? //自身索引
? ? ? ? ? ? ? ? var childIndex=chindex;
? ? ? ? ? ? ? ? //如果被選中
? ? ? ? ? ? ? ? if(ishas){
? ? ? ? ? ? ? ? ? ? //查找同胞兄弟元素cname的文本值
? ? ? ? ? ? ? ? ? ? var txt=$(this).siblings(".cname").text();
? ? ? ? ? ? ? ? ? ? var app=$("<span class='cklist' data-p="+parentIndex+" data-c="+childIndex+">"+txt+"</span>");
? ? ? ? ? ? ? ? ? ? $(".ck").append(app);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? $(".cklist").each(function(index){
? ? ? ? ? ? ? ? ? ? ? ? var pindex=$(this).attr("data-p");
? ? ? ? ? ? ? ? ? ? ? ? var cindex=$(this).attr("data-c");
? ? ? ? ? ? ? ? ? ? ? ? if(pindex==parentIndex&&cindex==childIndex){
? ? ? ? ? ? ? ? ? ? ? ? ? ? $(this).remove();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? });
? ? ? ? //點擊按鈕事件
? ? ? ? $(".btn").click(function(){
? ? ? ? ? ? var txt=$(".ipt").val();
? ? ? ? ? ? if(txt){
? ? ? ? ? ? ? ? //遍歷list
? ? ? ? ? ? ? ? list.forEach(function(item,index){
? ? ? ? ? ? ? ? ? ? item.child.map(function(it,id){
? ? ? ? ? ? ? ? ? ? ? ? if(txt==it.name){
? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".c_menu").eq(index).slideToggle().find(".cname").eq(id).addClass("red");
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? $(".c_menu").slideUp();
? ? ? ? ? ? ? ? $(".cname").removeClass("red");
? ? ? ? ? ? }
? ? ? ? })
})?以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery實現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
- jQuery 利用ztree實現(xiàn)樹形表格的實例代碼
- 推薦8款jQuery輕量級樹形Tree插件
- jQuery樹形控件zTree使用小結(jié)
- jquery ztree實現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
- json+jQuery實現(xiàn)的無限級樹形菜單效果代碼
- jquery實現(xiàn)樹形菜單完整代碼
- jQuery ztree實現(xiàn)動態(tài)樹形多選菜單
- jQuery 樹形結(jié)構(gòu)的選擇器
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
相關(guān)文章
jQuery Validate表單驗證插件 添加class屬性形式的校驗
這篇文章主要介紹了jQuery Validate表單驗證插件,在class屬性中添加校驗規(guī)則進(jìn)行簡單的校驗,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-01-01
js原生態(tài)函數(shù)中使用jQuery中的 $(this)無效的解決方法
今天遇到一個聽郁悶的問題,正如title所說 js中原生態(tài)函數(shù)在jQuery 中使用 $(this) 被解析成undefined2011-05-05
基于jquery實現(xiàn)簡單的手風(fēng)琴特效
這篇文章主要介紹了基于jquery實現(xiàn)簡單的手風(fēng)琴特效,需要的朋友可以參考下2015-11-11
JavaScript?Canvas實現(xiàn)高清繪制效果
在我們?nèi)粘@L制canvas的時候都不可避免的遇到一個問題,那就是canvas繪制出來的東西可能會有模糊,所以本文為大家準(zhǔn)備了解決canvas繪制模糊的方法,希望對大家有所幫助2023-06-06

