MVC TREEVIEW插件

mvc treeview jquery

jquery插件中的treeview插件

用MVC模式怎么實(shí)現(xiàn)動(dòng)態(tài)的TreeView

可以把數(shù)據(jù)處理后在傳到view頁(yè)面顯示！

MVC 架構(gòu)中 TreeView 的實(shí)現(xiàn) (Jquery)

作為一個(gè)初級(jí)的軟件開(kāi)發(fā)工程師，在MVC的項(xiàng)目中要實(shí)現(xiàn)TreeView類型的一個(gè)文件目錄，在網(wǎng)上搜尋半天，有很多實(shí)現(xiàn)方法，例如Html.Telerik().TreeView() 效果非常炫，但是收費(fèi)的。最后終于找到一個(gè)比較簡(jiǎn)單免費(fèi)的實(shí)現(xiàn)方法。

從http://bassistance.de/jquery-plugins/

下載jQuery plugin:Treeview

 解壓后直接添加到項(xiàng)目目錄里

在View里文件TreeView.aspx里面引用

在MainContent 中繼續(xù)寫

[html] view plaincopy

<ul id="browser" class="filetree">  

    <li><span class="folder">Folder 1</span>  

        <ul>  

            <li><span class="file">Item 1.1</span></li>  

        </ul>  

    </li>  

    <li><span class="folder">Folder 2</span>  

        <ul>  

            <li><span class="folder">Subfolder 2.1</span>  

                <ul id="folder21">  

                    <li><span class="file">File 2.1.1</span></li>  

                    <li><span class="file">File 2.1.2</span></li>  

                </ul>  

            </li>  

            <li><span class="file">File 2.2</span></li>  

        </ul>  

    </li>  

</ul>  

還有javascript

[javascript] view plaincopy

<script type="text/javascript">  

    $(document).ready(function() {  

        $("#browser").treeview();  

    });          

</script>  

這里數(shù)據(jù)都是在html里假寫好的，沒(méi)有從數(shù)據(jù)庫(kù)提取數(shù)據(jù)。

運(yùn)行查看效果：

asp.net treeView動(dòng)態(tài)增加、編輯、刪除

可以只要一個(gè)刪除按鈕 在點(diǎn)擊刪除按鈕的事件里得到tvw中被選中的節(jié)點(diǎn)值
然后執(zhí)行一條delete語(yǔ)句 刪除對(duì)應(yīng)的數(shù)據(jù)內(nèi)容 最后讀取數(shù)據(jù)庫(kù)重新加載tvw

PS: 用這種方法會(huì)刷新頁(yè)面 還是用JQ實(shí)現(xiàn)好一點(diǎn) 微軟已經(jīng)推出了MVC開(kāi)發(fā)模式 其中特別提到摒棄runat="server"和事件機(jī)制 再者刷新頁(yè)面會(huì)使用戶體驗(yàn)不理想