首先引入zTree的css和js
html：
<div class="row">
<label class="col-sm-4 control-label"
style="text-align: right; margin-top:5px;padding-left: 10px;padding-right: 10px">选择产品：</label>
<div class="formControls col-xs-8 col-sm-7">
<ul id="funcTree" class="ztree"></ul>
</div>
</div>js配置：
获取数据：
var node="";
$.ajax({
url: "/it/orderManage/getLevelPackageTrain",
dataType: "json",
async: false,
data: {
"T_PACKAGE_CODE": $("#T_PACKAGE_CODE").val(),
},
type: "POST",
success: function (ret) {
node=JSON.stringify(ret);
},
error: function () {
}
});返回的数据形式：要有自己的id和其父id，名字
配置ztree
简单示例：
funcSetting= {
async:{
enable:true,
url:"${ctx}/serviceOrder/getServiceUserList",
otherParam:{//传入查询参数
//注意，要传入动态变化的参数必须用return的方式
"regionGroupId":function(){return $("#regionGroupId").val()
}
},
},
view: {
dblClickExpand: false,//禁止双击展开
showLine: true,
selectedMulti: false
},
data: {
key:{
name:"NAME"//显示的名字
},
simpleData: {
enable:true,
idKey: "ID", //id
pIdKey: "PID" //父id
}
},
check:{
enable:true,
//chkboxType:{ "Y": "ps", "N": "s" }
chkStyle: "radio", //选择框，可以是check或者radio
radioType:"all" //all为全部树状中选择，level为自己一个根节点中选择
},
callback: {//回调函数
onClick:function(event, treeId, treeNode){//点击每个节点回调
},
onAsyncSuccess:function(event, treeId, treeNode, msg) {//树结构加载完后回调
}
}
};
funcTreeObj = $.fn.zTree.init($("#funcTree"), funcSetting, null); //初始化ztree补充：
0.ztree里面用到的api和配置看这个手册，非常全面
http://www.treejs.cn/v3/api.php
1.查询传入参数用 otherParam,并用return返回
2.刷新树结构时：
funcTreeObj.reAsyncChildNodes(null, "refresh");这种方法可以让ztree重新发送请求并刷新树结构
3.实现单击展开子节点方法（onClick回调方法中实现）
onClick:function(event, treeId, treeNode){
funcTreeObj.expandNode(treeNode)//单击节点展开其子节点
if(treeNode.level==1){ //点击子节点后记录其参数值
$("#userId").val(treeNode.ID)
}
},4. 树加载完展开某节点
onAsyncSuccess:function(event, treeId, treeNode, msg) {
// funcTreeObj.expandAll(true);//展开所有节点
//默认打开顶级（第一级）节点
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.getNodes();
if (nodes.length>0) {
for(var i=0;i<nodes.length;i++){
treeObj.expandNode(nodes[i], true, false, false);//默认展开第一级节点
}
}
}5.实现只显示有子节点的根节点
onAsyncSuccess:function(event, treeId, treeNode, msg) {
var nodes = funcTreeObj.getNodes();//默认只能得到根节点
var ll=nodes.length;
//因为循环过程会删除节点导致节点数量变化，所以使用双循环方法
for (var i=0;i<ll;i++)
{
//删除选中的节点
var l=funcTreeObj.getNodes().length;
for(var j=0;j<l;j++){
if(!nodes[j].isParent){//判断根节点是否有子节点，有isParent为true，没有子节点为false
//console.log(nodes[j])
funcTreeObj.removeNode(nodes[j]);//删除子节点
break;
}
}
}
}6.编辑时根据后台传来的数据使ztree选中
var node="";
$.ajax({
url: "/it/orderManage/getLevelPackageTrain",
dataType: "json",
async: false,
data: {
"T_PACKAGE_CODE": $("#T_PACKAGE_CODE").val(),
},
type: "POST",
success: function (ret) {
node=JSON.stringify(ret);
},
error: function () {
}
});
var funcSetting = {
async:{
enable:true,
dataType:"json",
url:"/it/orderManage/getTrainList1?level="+$("#level").val()+"" ， //异步获取数据
otherParam:{//查询数据时传入参数
//注意，要传入动态变化的参数必须用return的方式，否则只能接收初始值
"regionGroupId":function(){return $("#regionGroupId").val()
}
},
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
key:{
name:"TITLE" //显示返回数据的名字
},
simpleData: {
enable:true,
idKey: "TID", //id
pIdKey: "PID", //父id
rootPID:0 //根id
}
},
check:{
enable:true,
chkboxType:{ "Y": "ps", "N": "s" }
},
callback: {
onAsyncSuccess:function(event, treeId, treeNode, msg) {//数据获取成功后执行
funcTreeObj.expandAll(true); //设置所有为展开状态
//使范户籍数据存在id的有选中状态
var allNodes = funcTreeObj.getNodesByFilter(function(onenode){//这是一个自循环函数，会自动将所有节点遍历一遍，返回符合条件的节点数组
return (node.indexOf(onenode.TID) != -1); //node为后台传来的值字符串，如果节点中的id存在我传的值，则把该节点选出
});
//循环选出的需要选中的节点
for(var i=0; i<allNodes.length; i++) {
funcTreeObj.checkNode(allNodes[i], true, false); //传入节点，使其选中
}
}
}
};
funcTreeObj = $.fn.zTree.init($("#funcTree"), funcSetting, null); //初始化ztreejs提交时向后台传选中项的值：
var checkedObjs = funcTreeObj.getCheckedNodes(true); //获取所有选中的节点
if(checkedObjs.length!=11){
layer.alert("必须选择10个产品");
flag=false;
return;
}
$("#form1 input[name='TID']").remove();
for(var i=0;i<checkedObjs.length;i++) {
var obj = checkedObjs[i];//将选中的值放到input中传到后台
if(obj.TID) {
$("#form1").append("<input type='hidden' name='TID' value='"+obj.TID+"' >"); //在form里增加input，将字符串数组传到后台
}
}
后台java接收：
//保存升级包
@RequestMapping(value = "/saveLevelPackage", method = RequestMethod.POST, produces = "text/html;charset=utf-8")
@ResponseBody
public String saveLevelPackage(@RequestParam HashMap<String, String> param,
@RequestParam(value = "file") MultipartFile[] files,
HttpServletRequest request,
String T_PACKAGE_CODE, HttpServletRequest req) {
String result;
String[] TIDs = req.getParameterValues("TID"); //在request中用字符串数据接收
try{
if(T_PACKAGE_CODE!=null&&!T_PACKAGE_CODE.equals("")){
orderManageService.removeLevelPackageTrain(param);
orderManageService.updateLevelPackage(param);
}else{
orderManageService.saveLevelPackage(param);
}
if(TIDs!=null){
for(int i=0;i<TIDs.length;i++){
if(TIDs[i].equals("1")){
continue;
}
param.put("TID",TIDs[i]);
orderManageService.addLevelPackageTrain(param); //循环保存
}
}
} catch (Exception e) {
e.printStackTrace();
}
result = "完成";
return JSON.toJSONString(result);
}java取值时：
//获取升级包等级价格
@RequestMapping(value = "/getTrainList1", method = RequestMethod.POST, produces = "text/html;charset=utf-8")
@ResponseBody
public String getTrainList1(@RequestParam HashMap<String, String> param) {
RetBase ret = new RetBase();
List<Map<String, String>> list = new ArrayList<>();
try {
list = orderManageService.getTrainList1(param);
Map<String, String> parent = new HashMap<>();
parent.put("TITLE", "系统产品"); //因为关系中没有父类，手动加一个父类
parent.put("PID", "0");
parent.put("TID", "1");
list.add(parent);
ret.setSuccess(true);
ret.setData(list);
} catch (Exception e) {
ret.setSuccess(false);
}
return JSON.toJSONString(list); //直接将结果集用字符串输出
}
1701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
