树状下拉combotree的动态加载

旧城等待， 2022-04-14 02:22 393阅读 0赞

用的是easyui的combotree插件

先贴效果

![20181123110143363.png][]

**当返回的节点的state为open时说明他是有下级数据的，否则就是节点数据，  
每次点击上级的时候，上级节点展开之前，他会根据上级的id取请求他的下级数据，如果有数据，展开后会把数据自动填充为他的下级即**children:属性**，依次类推，**

**如果是静态的我们就应该补上**children:属性

ComboTree demo  
[http://www.jeasyui.com/demo/main/index.php?plugin=ComboTree&theme=material-teal&dir=ltr&pitem=&sort=asc][http_www.jeasyui.com_demo_main_index.php_plugin_ComboTree_theme_material-teal_dir_ltr_pitem_sort_asc]  
ComboTree api  
[http://www.jeasyui.com/documentation/combotree.php][http_www.jeasyui.com_documentation_combotree.php]

这个组件从$ .fn.combo.defaults和$ .fn.tree.defaults扩展。使用$ .fn.combotree.defaults覆盖默认值。  
可以加载以下格式的数据

loadData    data    Load the locale tree data.

Code example:

$('\#cc').combotree('loadData',  
 \[\{  
    id: 1,  
    text: 'Languages',  
    children:  
     \[\{  
        id: 11,  
        text: 'Java'  
    \},  
    \{  
        id: 12,  
        text: 'C++'  
    \}\]  
\}\]

);

它只有这一个方法有用  
clear    none    Clear the component value.

主要看看它继承的tree组件  
http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=material-teal&dir=ltr&pitem=&sort=asc  
http://www.jeasyui.com/documentation/tree.php

它常用的方法有  
options         none    Return the options of tree.  
onBeforeExpand    node    Fires before node is expanded, return false to cancel this expand action.  
其次注意的是（很重要）  
许多事件回调函数都可以采用'node'参数，该参数包含以下属性：  
id：标识值绑定到节点。  
text：要显示的文本。  
iconCls：要显示图标的css类。  
checked：是否检查节点。  
state：节点状态，'open'或'closed'。  
attributes：自定义属性绑定到节点。  
target：目标DOM对象。  
Events  
Many events callback function can take the 'node' parameter, which contains following properties:

id: An identity value bind to the node.  
text: Text to be showed.  
iconCls: The css class to display icon.  
checked: Whether the node is checked.  
state: The node state, 'open' or 'closed'.  
attributes: Custom attributes bind to the node.  
target: Target DOM object.

贴代码  
前端

$(function () {
            $('#orgName').combotree({
                width:135,
                url: 'tmCommonController.do?findOrgList&parentId=402882e55f813b35015f816362c70003',//第一次应该先加载顶级的节点
                onBeforeExpand: function (node) {
                    $(this).tree('options').url =
                        'tmCommonController.do?findOrgList&parentId='+node.id;
                }
            });
        });
    }

重置：

$('#orgName').combotree('clear');

后台

@RequestMapping(params = "findOrgList")
    @ResponseBody
    public List<TreeVo> findOrgList(String parentId){
        List<TreeVo> orgList = tmCommonService.findOrgList(parentId);
        return orgList;
    }

sql用自连接

SELECT DISTINCT
        CASE  
          WHEN t1.IS_LEAF = 1 THEN  'open'
          ELSE 'closed'
        END AS STATE,
        t1.id AS id,
        t1.org_code AS orgcode,
        t1.org_name AS text,
        t2.id AS parentid,
        t2.org_name AS parentname
    FROM
        tm_org t1
        LEFT JOIN tm_org t2 ON t1.parent_id = t2.id
    WHERE
            1 = 1
        AND
            t.parent_id =?

TreeGridVo  
    public class TreeGridVo<T> {
        private String id;
        private String parentId;
        private String parentName;
        private String text;
        private String state = "closed";
    
    }
    
    
    TreeVo
    public class TreeVo extends TreeGridVo<TreeVo> {
        private String orgId;
        private String orgName;
        private String orgCode;
        private String parentId;
    }

[20181123110143363.png]: /images/20220414/736a39721738429ba48606010db3112e.png
[http_www.jeasyui.com_demo_main_index.php_plugin_ComboTree_theme_material-teal_dir_ltr_pitem_sort_asc]: http://www.jeasyui.com/demo/main/index.php?plugin=ComboTree&theme=material-teal&dir=ltr&pitem=&sort=asc
[http_www.jeasyui.com_documentation_combotree.php]: http://www.jeasyui.com/documentation/combotree.php