Grails顯示樹形結構

兩個步驟
1.首先實現樹形結構的領域類。
2.前端顯示。javascript

表徵樹形結構的領域類:
直接在領域類內實現樹形結構,採用兩個函數,第一個是主函數(String treeView())負責調用遞歸函數,並返回值。
第二個是遞歸函數(formTreeView),負責遞歸整個樹,並生成字符串。
class SystemMenu {
    String menuContext
    String menuAction
    SystemMenu upMenuItem
   
    static hasMany = [menuItems: SystemMenu]
   
    static constraints = {
        menuContext(unique:true)
        menuAction()
        upMenuItem(nullable:true)
    }
   
    String toString() {
        return "${menuContext}"
    }css

    String treeView() {
        StringBuilder sb = new StringBuilder();
        //append(getId()).
        sb.append("<ul>");
        formTreeView(sb, menuItems);
        sb.append("</ul>");
       
        return sb.toString();
    }
   
    void formTreeView(sb, menuItems) {
        for (SystemMenu e: menuItems) {
            sb.append("<li>abc");
            sb.append(e.menuContext);
            if (e.menuItems) {
                sb.append("<ul>");
                formTreeView(sb, e.menuItems);
                sb.append("</ul>");
            }
            sb.append("</li>");
        }
    }
   
}html


2.樹形結構的前端顯示
實現這一目標採用jsTree控件,一個jQuery的插件,下載地址:http://www.jstree.com/
Grails網站所推薦的插件方式沒有成功
下載jsTree
將所需的css文件放到\grails-app\assets\stylesheets\目錄下;
js文件放到\grails-app\assets\javascripts\目錄下。
在gsp文件的Head段內增長以下內容
    <!--Include a jsTree theme-->
    <asset:stylesheet href="themes/default/style.min.css"/>
    <!--Include jQuery,因爲Grails本身有jQuery的內容,因此這一步能夠省略-->
    <!--Include jsTree-->
    <asset:javascript src="jstree.min.js"/>
        <!--實現樹形結構-->
    <script type = "text/javascript" >
        $(function () { $('#tree').jstree(); });       
    </script>前端

顯示樹形結構的最後一步是這樣的:
<g:treeView item="${systemMenuInstance}"></g:treeView>java

這裏調用的是一個本身寫的標籤app

class MenuTagLib {
    //static defaultEncodeAs = 'html'
    //static encodeAsForTags = [tagName: 'raw']
   
    def treeView = {attrs, body->
        def SystemMenu item = attrs['item']
        out << "<div id=\"tree\">"
        out << item.treeView()
        out << "</div>"
    }
   
}
函數

相關文章
相關標籤/搜索