jquery封裝多棵並列樹

2022-03-07 00:58:21 字數 1248 閱讀 5550

起因:當前的樹都是在一棵樹上,應產品需求,現在需要將一級選單並列開,然後往下鋪,這樣只好自己寫了。

demo圖:

我直接封在了jquery上,此外還加了獲取勾選資料的一些簡單api。

思路:先把一級選單摘出來,然後批量渲染每一列資料。

核心**:

1.遞迴演算法

畫樹必須有遞迴,回顧一下遞迴三要素:

1 fn.recursive = function

(data)

通過遞迴來拼每一列的dom

2.勾選的互動邏輯

a:只要孩子節點擊中,他所有的長輩都必須選中,(此處又有遞迴)

1 fn.setparentischeck = function

(_this)

5var targetnode = _this.parent('li').parent('ul').siblings('input[name="checkone"]');

6if(_this.prop('checked'))else

if(_this.parent('li').siblings('li').find('input[name="checkone"]').prop('checked') == false)11

this

.setparentischeck(targetnode);

12 }

b:節點擊中,所有孩子節點全選中。(此處需要迴圈遍歷)

$('#' + this.treeid).delegate('input[name="checkone"]','click',function

()) _this.children('input[name="checkone"]').prop('checked',true

); }

else

) }

that.setparentischeck(_this);

})

c:注意,取消勾選 當前節點,如果兄弟節點還是選中的話,他們的長輩還是選中狀態(易出的bug)

3.使用

html部分:

js部分: var mytree = $('#mytree').dafeitree(options) 

原始碼位址

線段樹 多棵 HDOJ 4288 Coder

題目傳送門 題意 集合,add x,del x,求和 分析 首先,暴力可以過這題。用上線段樹能大大降低時間的消耗,具體就是類似開了5棵線段樹,每個節點都有5個空間,表示該區間的id 5後的和,區間合併右邊的id i leftnum,子節點要存到sum o 1 表示 5 1。還需要對資料離線離散化。i...

jquery封裝之 css封裝

我之間我的部落格裡面有提到,自定義的庫和jquery庫是水火不相容的,其實在我學習了css封裝後,我算是大徹大悟。在前面的時候我提到,獲取節點,要用到繁瑣的getid,getclass,gettagname.今天學習了css封裝,我們也可以簡化js 設定 我自己定義的base.js 前台呼叫 var...

jquery 方法封裝

給jquery 身上設定全域性方法 方法一 jquery.myfunction function str 方法一呼叫 myfunction 直接給jq身上設定全域性方法 方法二 同時新增多方法 jquery.extend myfunction1 function str 方法二呼叫 myfuncti...