树状下拉combotree的动态加载

用的是easyui的combotree插件

先贴效果

当返回的节点的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
ComboTree api
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.


贴代码
前端

<input id="orgName" type="text" name="orgName" />

 

$(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 =?


vo

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;
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值