zTree的使⽤，向后台传值和获取值选中
⾸先引⼊zTree的css和js
html：
<div class="row">
<label class="col-sm-4 control-label"
>选择产品：</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
补充：
<⾥⾯⽤到的api和配置看这个⼿册，⾮常全⾯
1.查询传⼊参数⽤ otherParam，并⽤return返回
2.刷新树结构时：
这种⽅法可以让ztree重新发送请求并刷新树结构
3.实现单击展开⼦节点⽅法（onClick回调⽅法中实现）
onClick:function(event, treeId, treeNode){
if(treeNode.level==1){ //点击⼦节点后记录其参数值
$("#userId").val(treeNode.ID)
}
},
4. 树加载完展开某节点
onAsyncSuccess:function(event, treeId, treeNode, msg) {
// pandAll(true);//展开所有节点
//默认打开顶级（第⼀级）节点
var treeObj = $.ZTreeObj(treeId);
var nodes = Nodes();
if (nodes.length>0) {
for(var i=0;i<nodes.length;i++){
}
}
}
5.实现只显⽰有⼦节点的根节点
onAsyncSuccess:function(event, treeId, treeNode, msg) {
var nodes = Nodes();//默认只能得到根节点
var ll=nodes.length;
//因为循环过程会删除节点导致节点数量变化，所以使⽤双循环⽅法
for (var i=0;i<ll;i++)
{
//删除选中的节点
var Nodes().length;
for(var j=0;j<l;j++){
if(!nodes[j].isParent){//判断根节点是否有⼦节点，有isParent为true，没有⼦节点为false                //console.log(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) {
js获取json的key和valuenode=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) {//数据获取成功后执⾏
//使范户籍数据存在id的有选中状态
var allNodes = NodesByFilter(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);  //初始化ztree
js提交时向后台传选中项的值：
var checkedObjs = CheckedNodes(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 = ParameterValues("TID"); //在request中⽤字符串数据接收
try{
if(T_PACKAGE_CODE!=null&&!T_PACKAGE_CODE.equals("")){
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 = "完成";
JSONString(result);
}
java取值时：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。