利用jquery treeview实现读者借书清单.pdf

ReaderInfoBrowseByCategory.aspx

1、构造页面

<divid="main"style="float:left;width:140px;padding:10px">

<ulid="tvBookType"class="filetree">

<spanclass="folder">读者类型</span>

</ul>

</div>

<divid="divRight"style="float:left">

<iframeid="myiframe"name="myiframe"frameborder="0"

scrolling="no"style="width:510px;height:370px;disy:block"

src=""></iframe>

</div>

2、引入相关js与css

<scriptsrc="/SmallBook/js/jquery-1.2.2b2.js"

type="text/javascript"></script>

<linkhref="/SmallBOOK/js/jsPlugin/jquery-

treeview/jquery.treeview.css"rel="stylesheet"

type="text/css"/>

<scriptsrc="/SmallBOOK/js/jsPlugin/jquery-

treeview/jquery.treeview.js"type="text/javascript"></script>

<scriptsrc="/SmallBOOK/js/jsPlugin/jquery-

treeview/jquery.treeview.async.plug.js"

type="text/javascript"></script>

3、实现jquerytreeview需加载的数据

HandleReaderInfoBrowseByCategory.aspx

第1次请求传递参数：？root=source

返回的数据：

[{'text':'学生','id':'1','hasChildren':'true'},{'text':'成人

1','id':'2','hasChildren':'true'},{'text':'公司

','id':'6'},{'text':'老师','id':'7','hasChildren':'true'},{'text':'

老师1','id':'10'},{'text':'老师2','id':'11'},{'text':'会员

','id':'15'}]

第二次点击父节点：

url:

返回的数据：

[{'text':'小苏

',url:'GetReaderInfoByCategoryId.aspx?readercode=

5763','target':'myiframe'},{'text':'小

A',url:'GetReaderInfoByCategoryId.aspx?readercode=

43541','target':'myiframe'},{'text':'小

B',url:'GetReaderInfoByCategoryId.aspx?readercode=

65761','target':'myiframe'},{'text':'小

C',url:'GetReaderInfoByCategoryId.aspx?readercode=

43541','target':'myiframe'},{'text':'小

D',url:'GetReaderInfoByCategoryId.aspx?readercode=

434341','target':'myiframe'}]

欢迎我们的

欢迎我们的