JS樹型選單

2022-07-18 01:54:14 字數 2716 閱讀 2661

本樹型選單主要實現功能有:基本的樹型選單,可勾選進行多選項操作。

本樹型選單適合最初級的學者學習,涉及內容不難,下面看**。

首先看view的**,第乙個用來定義樹顯示的位置和id

1

"persontree

">23

"margin-left:230px;

" id="

result

">

4class="

t-button t-state-default

" id="

personselectsubmit

" onclick="

displaycheckedpersons ()

">選擇人員

接下來看js**:

1

$(document).ready(function () );

4 $("

#persontree

").jstree(',

9 type: '

post',

10 datatype: '

json',

11 contenttype: ''12

}13},1415"

themes

": ,16"

plugins

": ["

themes

", "

json_data

", "

ui", "

checkbox"]

17});

18});

1920

var selectedpersonnum = 0;21

var selectedpersons = new

array();

2223

function displaycheckedpersons()

33});

3435 selectedpersonnum =checkedpersons.length;

36if (checkedpersons.length < 1

) 40 selectedpersons =checkedpersons;

41$.ajax(,

45 datatype: "

html",

46success: function (request) ,

49 traditional: true

50});

51return

;52 }

上半部分,是用於顯示樹的,下面的function是用於勾選目標專案進行操作的。這裡使用的是ajax形式,不太了解的朋友可以搜搜資料了解下,還是蠻好掌握的。

接下來看後台控制器**:

沒用到地點值,顯示全部人員,只是保留318

else

1922 }

這是用於根節點的選取,由第五行獲得登入使用者的身份並獲取該類使用者可選操作的根節點,

1

public

void populatetree(string

dhid, jstreemodel node)28

9var dp = db.classinfo.where(c => c.classnum ==dhid).firstordefault();

10var dpid = dp == null ? 0

: dp.id;

11var hid =dp.id;

12foreach (var d in db.classinfo.where(c => c.classnum.substring(0, dhid.length) == dhid & c.classnum.length == dhid.length + 3

).tolist())

1323

//lastly, loop through each file in the directory, and add these as nodes

24foreach (var p in db.usersinfo.where(e => e.classid == hid).orderby(e =>e.username).tolist())

2537 }

這裡,有2個遍歷,第乙個用於遍歷之前傳過來的根節點下的所有節點,第二個用於遍歷每個節點的葉子。

這裡的model需要注意的一點事:

1

public

class

jstreemodel28

9public

class

jstreeattribute

1014

15public

class

jstreeleafmodel

16

這是樹型選單需要的乙個model。

好了,剩下的就是資料庫和資料元素的model的建立了,這裡就不做多演示了,相信不會難。希望能幫到大家,有不足的望指出。

php 樹狀 選單 用PHP實現多級樹型選單

樹型目錄結構模板程式 選單目錄庫欄位說明 menu id 選單專案 id menu 選單名稱 menu grade 選單等級 1 為主選單 2 為二級選單 menu superior 上一級選單 id 號 function my menu menu content,i,menu grade temp...

無限分類樹型選單演示 asp

顯示列表函式 function checklist parentid,cs,str1 dim j j 0for i 0 to ubound list,2 if list 1,i parentid then response.write str1 if j0 then str2 str2 if lis...

典型樹型選單問題解決

問題描述 實現對商品資訊的分類,分類的同時生成乙個序號。序號的規則就是取他所屬的類的序號 同一類別的排序號 scb subject classid classname fatherid scblevel 1 蔬菜 1 01 2 茄子 1 0101 3 白菜 1 0102 4 蘿蔔 1 0103 5 ...