第一部分--拖拽介紹
在https://code.csdn.net/2013ossurvey中最后一個開源項目就是zTree,一方面是因為自己看到有項目中使用了zTree,而已大家表示還不錯。另外一方面,自己需要實現一個zTree不支持的復雜邏輯的拖拽功能。總體來說,我要實現的是一個可以拖拽的樹形列表。當然最新版zTree也支持多課樹之間的數據交互。當然一般的企業開發或者web開發中,使用到2個或3個數就足夠了。太多了樹形結構對於用戶來說,也非常復雜。個人推薦不是非常復雜的需求都可以考慮使用zTree,因為它的授權許可是MIT,你可以自由獲取,修改和分發給他人。
zTree多棵樹之間的數據交互實例demo:http://www.ztree.me/v3/demo.php#_308
第二部分--功能需求。
1.父節點可以嵌套葉子節點,而已最好支持嵌套層數不顯示,程序自動完成這個功能,或者在初始化的時候,開發人員傳入一個指定的層級數目
2.父節點和葉子節點都可以拖動。說明:拖動父節點到右側時,它包含的葉子節點都需要拖到右邊
3.樹形類表默認可以折疊,單擊展開,再單擊就折疊。
4.點擊節點右側的“刪除”按鈕可以刪除列表里面的數據
大家參照上面的實例demo,可以看出我需要完成的功能。因為自己開始不知道有zTree這么成熟的控件,而已它確實不能完全滿足我的需求,所以我需要從頭開始完成這個功能。
項目中主要使用到jQuery UI里面的draggable和droppable,因為很多老的瀏覽器都不值html5的drag api。我自己也沒有去查看zTree的源代碼,所以也不知道zTree底層拖拽實現是否也是使用了jQuery UI的draggable和droppable方法。
同時因為zTree考慮到具體業務需求,對大數據處理時可以使用ajax方法,而我自己在實現,因為后台返回的數據是json格式,而且數據量不是非常的大,所以沒有考慮着一塊。
比較復雜的是,生成拖拽到右邊列表的數據。zTree目前當然支持比較好的平行數據內容,而已在官方網站也說明,未來會加入保存數據的接口,或者通過form表單的形式發送到服務器。而我實際開發中,就是因為傳入到后台的數據要求比較復雜,所以我就放棄了使用zTree控件。
完成最后的功能界面如下,完成通過拖拽數據到右邊可以計算出符合條件的人數。
江西財經大學和“東華理工大學”是或的一個關系,而他們整體和”南昌航空大學“又是”且“的關系,當然也可以是”排除“關系。這里將實際項目簡化了。點擊江西高校,可以將下面所有的節點折疊起來。拖拽元素到右邊,可以拖到一個單獨的區域里面,也可以拖到一個已經存在節點的區域里面。就想上圖中的關系。
點擊確定需要把右邊的樹形結構數據保存下來。當然下次打開系統,必須通過反方法把右邊的數據生成如圖的結果。
第三部分--方案思路:
1.了解jQuery draggable和droppable方法和工作原理
2.遞歸思想
3.各個擊破
4.熟練使用jQuery操作dom結構
第四部分--參考網址:
1.http://www.ztree.me/v3/main.php


