随笔-jeecg基础上,tree栏目树,和页面布局总结


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%> //一些引入的标签在这个jsp里面
<script type="text/javascript">
    $(function() {  //页面加载的时候加载这个栏目树
        $('#columntree').tree({
            animate : true,
            url : 'articleColumnController.do?showTree',
            onClick : function(node) {
            $(this).tree('toggle', node.target);
                $("#columnpanel").panel("refresh",'articleInfoController.do?articleInfo&channelId='+node.id); //点击数的节点得到一个panel面板
            }
        });
        
    });
</script>
<div class="easyui-layout" fit="true">  //页面布局

//CENTER开始
<div region="center" style="padding: 3px;" class="easyui-panel" id="columnpanel" fit="true"></div> //中间center是个树(页面加载就加载了)
//CENTER结束
//WEST开始
<div region="west" style="width: 150px;" title="新闻栏目" split="true">                           //west是panel面板(通过点击数刷新一个面板)
<div class="easyui-panel" style="padding: 1px;" fit="true" border="false">
<ul id="columntree"></ul>
</div>
</div>  
//WEST结束

                                                              
</div>


//这个是west要显示面板内容

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<html>
    <head>
    </head>
    <body>
        <div id="lay" class="easyui-layout" style="width: 85%; height: 100%">
            <div region="center" id="showinfo" style="display: block;">
                <t:datagrid name="contentList" title="新闻内容"
                    actionUrl="articleInfoController.do?datagrid&channelid=${channelId}"
                    idField="id" fit="true">
                    <t:dgCol title="编号" field="id" hidden="false"></t:dgCol>
                    <t:dgCol title="文章标题" field="title"></t:dgCol>
                    <t:dgDelOpt title="删除" url="articleInfoController.do?del&id={id}" />
                    <t:dgToolBar title="录入" icon="icon-add"
                        url="articleInfoController.do?addorupdate&channelId=${channelId}"
                        funname="add"></t:dgToolBar>
                    <t:dgToolBar title="编辑" icon="icon-edit"
                        url="articleInfoController.do?addorupdate&channelId=${channelId}"
                        funname="update"></t:dgToolBar>
                    <t:dgToolBar title="查看" icon="icon-search"
                        url="articleInfoController.do?addorupdate" funname="detail"></t:dgToolBar>
                </t:datagrid>
            </div>
        </div>
    </body>
</html>



树的建立原理总结:
1,建立一个符合jquery_easyui的tree的vo
public class TreeVO {
    private String id ;
    private String text ;
    private String iconCls ;
    private int checked ;
    private String parent_id ;
    private Map<String, Object> attributes = new HashMap<String, Object>();
    private String state ;
    
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public String getIconCls() {
        return iconCls;
    }
    public void setIconCls(String iconCls) {
        this.iconCls = iconCls;
    }
    public int getChecked() {
        return checked;
    }
    public void setChecked(int checked) {
        this.checked = checked;
    }
    public String getParent_id() {
        return parent_id;
    }
    public void setParent_id(String parentId) {
        parent_id = parentId;
    }
    public Map<String, Object> getAttributes() {
        return attributes;
    }
    public void setAttributes(Map<String, Object> attributes) {
        this.attributes = attributes;
    }
    public String getState() {
        return state;
    }
    public void setState(String state) {
        this.state = state;
    }
    public TreeVO(String id, String text, String iconCls, int checked,
            String parentId, Map<String, Object> attributes, String state) {
        super();
        this.id = id;
        this.text = text;
        this.iconCls = iconCls;
        this.checked = checked;
        parent_id = parentId;
        this.attributes = attributes;
        this.state = state;
    }
    public TreeVO() {
        super();
        // TODO Auto-generated constructor stub
    }
}

2.建立一个树的表原则,有个主键id,还有一个父节点的id,首先建立一个根节点id为1父节点pid为9999;
id:2,pid:1 这个就是在根节点的叶子节点,如果在建立一个id:3,pid:2,那么这个节点是叶子节点而id:2的就是这个节点的父节点,
id:1
  ----id:2
      -----id:3

3.编写方法查找树
//每个都有父节点
    public List<TreeVO> findTreeVOList(String nodeid) {
        if(nodeid ==null){
            nodeid="9999";
        }
        StringBuffer sql=new StringBuffer();
        sql.append("select ID,name,pid from tb_article_column where pid="+"'"+nodeid +"'");
        List list =  getSession().createSQLQuery(sql.toString()).list();
        Iterator iter = list.iterator();
        //业务需求的栏目信息
        List<ArticleColumn> articlecolumnList =new ArrayList<ArticleColumn>();
        while(iter.hasNext()){
            ArticleColumn column=new ArticleColumn();
            Object[] obj = (Object[])iter.next();
            String id=(String) obj[0];
            String name=(String) obj[1];
            String pid=(String) obj[2];
            column.setId(id);
            column.setName(name);
            column.setPid(pid);
            articlecolumnList.add(column);
        }
        //填充TreeVO得到一个集合
        List<TreeVO> treeList =new ArrayList<TreeVO>();
        for(ArticleColumn ac:articlecolumnList){
            TreeVO tree=new TreeVO();
            tree.setId(ac.getId());
            tree.setParent_id(ac.getPid());
            tree.setText(ac.getName());
            if(getChildren(ac.getId()).size()>0){ //是否有子文件夹
                tree.setState("closed");            
            }else{
                tree.setState("open");
            }
            treeList.add(tree);
        }
        return treeList;
    }
    
    //通过pid查找是否是叶子
    public List<ArticleColumn> getChildren(String pid){
        if(pid ==null){
            pid="9999";
        }
        StringBuffer sql=new StringBuffer();
        sql.append("select ID,name,pid from tb_article_column where pid="+"'"+pid+"'");
        List list =  getSession().createSQLQuery(sql.toString()).list();
        Iterator iter = list.iterator();
        List<ArticleColumn> articlecolumnChildrenList =new ArrayList<ArticleColumn>();
        while(iter.hasNext()){
            ArticleColumn column=new ArticleColumn();
            Object[] obj = (Object[])iter.next();
            String id=(String) obj[0];
            String name=(String) obj[1];
            String pid1=(String) obj[2];
            column.setId(id);
            column.setName(name);
            column.setPid(pid1);
            articlecolumnChildrenList.add(column);
        }
        return articlecolumnChildrenList;
    }
    
4.在录入的时候把父节点也给录入进去,获取当前节点的父节点,然后录入进去,知道跟节点

你可能感兴趣的:(随笔-jeecg基础上,tree栏目树)