easyui combotree 使用
需求: 1. 加载树状结构的数据
2. 要实现页面刷新后,树形节点回显的效果
3. 输入可以实现自动模糊查询到对应的节点
具体实现的代码:
首先引入easyUI依赖的文件:
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyuitree.js"></script>
在html中写入:
<select id="branch_id" class="easyui-combotree" method="get" style="width:160px;" ></select>
Javascript中实现点击下拉框,才
加载数据的效果;
$('#branch_id').combotree
({
// data:window.parent.jsonBranchData,(如果想要页面载入就加载数据的话)
panelWidth:200,
panelHeight:300,
valueField: 'id',
textField: 'text',
required: false,
editable: true,
onShowPanel:function(){//点击下拉框,才去加载数据
if(($("#branch_id").combotree('tree').tree('getRoots').length)==0){
$("#branch_id").combotree({data:window.parent.jsonBranchData});
}
},
onLoadSuccess: function (node, data) {
//回显时,默认选中的值
$("#branch_id").combotree('setValue','${param.branchId}');
$('#branch_id').combotree('tree').tree("collapseAll");
}
});
实现输入模糊查询节点
,将editable属性设为true
$(".combo-text").bind("input propertychange", function() {
$('#branch_id').combotree('tree').tree("search",$(this).val());
if($(this).val()=="" || null==$(this).val()){
$('#branch_id').combotree('tree').tree("expandAll");
}
});
关于如何加载数据的说明:
我的方法是在用户登录的时候,将json数据加载到main页面上,main页面上使用ajax的get请求到后台,建议使用get请求加载,查询页面时子页面,子页面获取父页面的数据,使用:
window.parent.父页面变量名
$("#branch_id").combotree({data:window.parent.jsonBranchData});
json数据是后台返回的,
后台定义如下:
package flink.net.util;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.util.WebUtils;
import com.ylink.mfo.action.form.UserInfo;
import com.ylink.mfo.msg.rsp.RspA9011;
import flink.consant.Constants;
public class MyBranchUtils {
//获取role树形结构
public static Map<String, Object> getCombotreeInfo(List<RspA9011> list,HttpServletRequest request){
Map<String,Object> map = new HashMap<String, Object>();
UserInfo userInfo = (UserInfo)WebUtils.getSessionAttribute(request, Constants.SESSION_USER);
for (RspA9011 rspA9011 : list) {
if(rspA9011.getBranch_id().equals(userInfo.getBranchId())){
map.put("id", rspA9011.getBranch_id());
map.put("text", rspA9011.getBranch_name());
map.put("children", MyBranchUtils.getChildrenRoleInfo(rspA9011.getBranch_id(), list));
}
}
return map;
}
//递归获取树形结构的数据
public static List<Map<String,Object>> getChildrenRoleInfo(String parentId,List<RspA9011> list){
List<Map<String,Object>> total = new ArrayList<Map<String,Object>>();
for (RspA9011 rspA9011 : list) {
if(rspA9011.getParent_branch_id().equals(parentId)){
Map<String,Object> map = new HashMap<String, Object>();
map.put("id", rspA9011.getBranch_id());
map.put("text", rspA9011.getBranch_name());
map.put("children", getChildrenRoleInfo(rspA9011.getBranch_id(), list));
total.add(map);
}
}
return total;
}
}
需要确认的json数据的格式必须是:
1. json格式 [{"id":..,"text":...,"children":...},{},{}] 后台定义为Map<String,List<Map<String,Object>>>
2. list为节点对象的集合
3. 最后将map转json到前台