其实我之前写过一篇类似的文章,那骗文章是jQuery bootgrid,他也是后台按前台的规则传值到前台,这样就可以显示出来,easyUI的tree也是同样的道理,下面就来看看具体步骤。
- 先看easyUI tree的数据格式
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
这段代码是官网给的数据格式,所以我们需要在后台传json数据,而且需要新建一个实体类,来写上text,state这些东西,下面来看具体写法。
2. 后台给前台返值
@RequestMapping("/queryBrand")
public @ResponseBody List<TreeMenu> queryBrand(HttpServletRequest request){
List<TreeMenu> treeList=new ArrayList<TreeMenu>();
List<SysBrandType> typeList = brandService.queryTypeList();
for(int i=0;i<typeList.size();i++){
SysBrandType brand=typeList.get(i);
int brandId=brand.getBrandId();
String brandName=brand.getBrandName();
TreeMenu treeMenu=new TreeMenu();
treeMenu.setId(brandId);
treeMenu.setText(brandName);
treeList.add(treeMenu);
}
List<TreeMenu> list=new ArrayList<TreeMenu>();
TreeMenu tree=new TreeMenu();
tree.setId(0);
tree.setText("全选");
tree.setChildren(treeList);
list.add(tree);
return list;
}
注:TreeMenu是我新建的实体类,里边放着前台所需字段,text就是所需显示的名字,所以我放了品牌名,children是一个集合,所以我把list放了进去,其余的就不多说了,想必大家都明白,下面来看一下前台写法。
3. 前台写法
//保存信息,将tree的id等值拼接好传值到后台
var _parentNodeId = '';
function add(){
var nodes = $('#treeMenus').tree('getChecked');
var nodeStore=$('#treeStore').tree('getChecked');
var _param = '';
for (var i = 0; i < nodes.length; i++) {
_param = getParentNode(_param,nodes[i]);
if (_param != '')
_param += ',';
_param += nodes[i].id;
}
var param_ = '';
for (var i = 0; i < nodeStore.length; i++) {
param_ = getParentNode(param_,nodeStore[i]);
if (param_ != '')
param_ += ',';
param_ += nodeStore[i].id;
}
$('#addDepotForm').form('submit', {
url:"<%=request.getContextPath()%>/coupon/addCoupon",
onSubmit: function(param){
param.bId = _param;
param.storeId=param_;
/* param.p2 = 'value2'; */
},
success:function(res){
if(res=='success'){
$.messager.alert('提示','添加成功!','info',function(){
goback();
});
}else{
$.messager.alert('提示','添加失败!');
}
}
});
}
function getParentNode(param_,node){
var pnode = $('#treeMenus').tree('getParent',node.target);
if(pnode!=null){
if(!pnode.checked &&(_parentNodeId!=pnode.id)){
if (param_ != '')
param_ += ',';
param_+=pnode.id;
param_=getParentNode(param_,pnode);
_parentNodeId=pnode.id;
}
}
return param_;
}
效果图
先这样,我有点事儿,如果有不懂得地方,欢迎大家给我留言。
补:
$(function() {
$('#treeMenus').tree({
checkbox:true,
url:'<%=request.getContextPath()%>/coupon/queryBrand',
animate : true,
lines : true
});
$('#treeStore').tree({
checkbox:true,
url:'<%=request.getContextPath()%>/coupon/queryStore',
animate : true,
lines : true
});
});
注:补得这段代码意思是 调用easyUI的tree,然后访问后台接口;checkbox为true,表示在每个节点前都显示复选框;url就是后台接口地址;animate为true,表示节点在展开或折叠的时候显示动画效果,默认值为false;lines定义是否显示树控件上的虚线,默认是false;基本就这么多,如果想显示其他效果,可以具体填写。
然后上边那段代码是树显示出来以后,在前台拼接好这些id值,并按逗号分隔,传值到后台,后台保存即可,保存到数据库的格式就是 1,2,3,4。提交form表单这块其实和ajax类似,onsubmit我是用来提交上边的两个额外参数,所以用了这个属性,如果没有额外参数,就不需要写这个属性,灵活掌握。其余的大家应该就都能看懂了,如果有任何问题,欢迎大家给我踊跃留言,谢谢大家的支持。