easyui tree的简单使用

1、帮助文档

先看下API中怎么说的吧:




2、前台:

	<div region="center" collapsible="false"  style="width:100%;margin-top:5px;margin-left:5px;" border="false">
		<div style="float: left;margin-left: 10px;" id="rightC">
			<ul id="tree" ></ul>
		</div>
	</div>

 
		  $("#tree").tree({
		  url:'getOrgTree.do',
		  method: 'GET',
		  animate: true,
		  checkbox: true,
		  cascadeCheck:true,//层叠选中
		  lines:true,//显示虚线效果
		  onLoadSuccess:function(node,data){
			  var nodeDep = $('#tree').tree('find',checkeid);
			  if (null != nodeDep && undefined != nodeDep)
			  {
				  $('#tree').tree('check',nodeDep.target);
			  }
		  },
		  onCheck:function(node, checked)
		  {
			  if (checked)
			  {
				  //这段逻辑自拟
 			  } 
 			  else 
 			  { 
 			  }
 			
			} 
		 });


3、后台


后台这段代码个人觉得写的不好,但是又没查到怎样写,暂且先这样吧


    public class OrgTree
    {
        private String id;
        
        private String text;
        
        private List<OrgTree> children = new ArrayList<OrgTree>();
        
        private String state;
        //getter & setter
    }


上面这个class是按照下面这个来加字段的:

    @RequestMapping("/getOrgTree")
    public void getOrgTree(String id, HttpServletRequest request, HttpServletResponse response)
    {
        List<Organization> orgList = new ArrayList<Organization>();
        OrgModel model = new OrgModel();
        String spid = "";
        //父节点的id为-1
        model.getBean().setParentid("-1");
    //按条件查询出所有的父节点
        orgList = organService.selectByCondition(model);
        
        // 查询出所有的父节点
        List<OrgTree> otree = new ArrayList<OrgTree>();
        // 遍历所有父节点
        if (null != orgList && orgList.size() > 0)
        {
            for (Organization o : orgList)
            {
                OrgTree ot = new OrgTree();
                ot.setId(o.getId());
                ot.setText(o.getOrgName());
                
                OrgModel childMod = new OrgModel();
                childMod.getBean().setParentid(o.getId());
                //根据父节点id查询出其子节点
                List<Organization> orgChild = organService.selectByCondition(childMod);
                if (orgChild != null && orgChild.size() > 0)
                {
                    List<OrgTree> list = new ArrayList<OrgTree>();
                    for (Organization child : orgChild)
                    {
                        OrgTree ochild = new OrgTree();
                        ochild.setId(child.getId());
                        ochild.setText(child.getOrgName());
                        list.add(ochild);
                    }
                    if(list.size() < 0)
                    {
                        ot.setState("open");
                    }
                    else
                    {
                        ot.setState("closed");
                    }
                    ot.setChildren(list);
                }
                
                otree.add(ot);
                
            }
        }
        

        ComUtil.writerJson(response, otree);
    }




效果如下:





本来是想实现每次只能选择一个选项的,但是一直有问题,问题出在那个cascadeCheck属性上,选择了一个节点时,就把另一个选中的节点给unchecked,但是由于这个层叠选中状态的,在只有一个子节点时,把父节点unchecked,但是同时子节点也就去勾选了,该功能未实现,待修改下方法在说。



小例子,记录...


使用easyUItree组件进行回显时,可以按照以下步骤进行操作: 1. 在回显前,先清除之前的回显数据。可以使用以下代码清除已选中的节点: ```javascript //先将回显数据全部清除 //获取所有选中节点 var nodes = $('#tt').tree('getChecked'); //遍历,选中的都不选中 for(var i=0; i<nodes.length; i++){ console.info('nodes[i:' + nodes[i]); console.info('nodes[i].target:' + nodes[i].target); $('#tt').tree('uncheck', nodes[i].target); } ``` 2. 在清除回显数据后,可以根据需要重新设置选中的节点。具体的实现方法可以参考easyui tree组件的文档和示例,根据业务需求进行相应的设置。 这样就可以实现easyui tree的回显功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Easyui tree实现省市区数据显示和回显功能](https://blog.csdn.net/weixin_31172555/article/details/118937247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [easyui tree带checkbox实现单选的简单实例](https://download.csdn.net/download/weixin_38643307/12791344)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [easyui CheckBox Tree 复选框实现数据回显](https://blog.csdn.net/dsa572713470/article/details/89675540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值