<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../theme/default/ui.custom.css" rel="stylesheet" />
<link href="../../theme/default/ui.jqgrid.css" rel="stylesheet" />
<link href="../../theme/default/font.awesome.css" rel="stylesheet" />
<link href="../../theme/default/ui.chosen.css" rel="stylesheet" />
<link href="../../theme/default/ui.uploadfile.css" rel="stylesheet" />
<link href="../../theme/default/page.common.css" rel="stylesheet" />
<link href="../../theme/default/page.sales.css" rel="stylesheet" />
<link href="../../theme/default/ui.pick.css" rel="stylesheet" />
<link href="../../theme/default/page.personManagement.css" rel="stylesheet" />
<link href="../css/wj.css" rel="stylesheet"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/ui.custom.js"></script>
<script type="text/javascript" src="../../js/ui.jqgrid.js"></script>
<script type="text/javascript" src="../../js/ui.autosearch.js"></script>
<script type="text/javascript" src="../../js/ui.chosen.js"></script>
<script type="text/javascript" src="../../js/ui.common.js"></script>
<script type="text/javascript" src="../../js/ui.custom.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.js"></script>
<script type="text/javascript" src="../../js/page.common.js"></script>
<script type="text/javascript" src="../../js/ui.pick.js"></script>
<link rel="stylesheet" href="../../theme/default/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
<style type="text/css">
.t-left-panel{width:500px;margin:24px auto 0;height:500px;}
.t-left-panel-title{height:30px;background:#018659;width:100%;}
.full-drop-panel{display:block;}
element.style {
margin-left: 0;
}
.toolbar button, .search-panel button, .title-bar button {
margin-left: 2px;
margin-right: 2px;
}
.fa-search {
background: #018659 none repeat scroll 0 0;
color: #fff;
cursor: pointer;
display: inline-block;
height: 24px;
left: 170px;
line-height: 24px;
position: absolute;
text-align: center;
top: 1px;
width: 30px;
}
</style>
<script type="text/javascript">
var result=[];
$(function(){
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y" : "ps", "N" : "ps" }
},
view: {
showLine: true,
selectedMulti: false,
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback:{
onCheck:onCheck
}
};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{name:"中国",id:"01",pId:"0",open:true,
children:[
{name:"上海",id:"1",pId:"01",open:true, children:[{name:"闵行",pId:"1",id:"11"}, {name:"徐汇",pId:"1",id:"12"}]},
{name:"北京",id:"2",pId:"01",open:true, children:[{name:"东城",pId:"2",id:"21"}, {name:"西城",pId:"2",id:"22"}]}
]},
{name:"中国1",id:"02",pId:"0",open:true,
children:[
{name:"上海1",pId:"02",id:"3",open:true, children:[{name:"闵行1",pId:"3",id:"31",}, {name:"徐汇1",pId:"3",id:"32",}]}
]}
];
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
// chooseCheckedNodes();
//重置左边树状型的高宽
resizeLeftTree();
$("#queryStoreTree").focus(function(){
showLeftPanel(".t-left-panel");
});
//初始化选中的节点
// initCheckedNodes();
});
/*******初始化选中的节点********/
function onCheck(){
if(result.length>0){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes=treeObj.getNodes();
var checkedId;
for(var j=0;j<result.length;j++){
checkedId=result[j].value;
treeObj.checkNode(treeObj.getNodeByParam("id", checkedId, null), true, true);
}
}
}
function resizeLeftTree(){
var hPanel=$(".t-left-panel").height(),
hTitle=$(".t-left-panel-title").height(),
hToolbar=$(".t-left-panel .toolbar").height(),
hTreeButton=$(".tree-button").height(),
hTree=hPanel-hTitle-hToolbar-hTreeButton-85;
$("#treeDemo").css({height:hTree,overflow:"scroll-y"});
}
function getValue() {
var result2 = [];
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getNodes();
var arr=[];
//获取选中的节点名称
checkedNode(nodes,result2);
return result2;
}
/******获取选中的节点名称*************/
function checkedNode(nodes,result2){
for(var i=0;i<nodes.length;i++){
if(nodes[i].children){
if(nodes[i].check_Child_State==2){
//填充result2
fillResult2(result2,nodes[i]);
continue;
}else if(nodes[i].check_Child_State==1){
checkedNode(nodes[i].children,result2);
}
}else{
if(nodes[i].checked==true){
//填充result2
fillResult2(result2,nodes[i]);
continue;
}
}
}
}
/*******填充result2************/
function fillResult2(result2,node){
var data=new Object();
data.text=node.name;
data.value=node.id;
result2.push(data);
}
function setValue(data) {
result=data;
}
function clearValue() {
result = [];
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkAllNodes(false);
}
</script>
</head>
<body>
<div style="width:800px">
<div class="t-left-panel">
<div class="toolbar" style="position:relative;">
<input data-xtype="text" placeholder="门店查询" style="width:120px;" class="left-search-shop"/>
<a class="fa fa-search"></a>
</div>
<!-- 左边树形图 -->
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../theme/default/ui.custom.css" rel="stylesheet" />
<link href="../../theme/default/ui.jqgrid.css" rel="stylesheet" />
<link href="../../theme/default/font.awesome.css" rel="stylesheet" />
<link href="../../theme/default/ui.chosen.css" rel="stylesheet" />
<link href="../../theme/default/ui.uploadfile.css" rel="stylesheet" />
<link href="../../theme/default/page.common.css" rel="stylesheet" />
<link href="../../theme/default/page.sales.css" rel="stylesheet" />
<link href="../../theme/default/ui.pick.css" rel="stylesheet" />
<link href="../../theme/default/page.personManagement.css" rel="stylesheet" />
<link href="../css/wj.css" rel="stylesheet"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/ui.custom.js"></script>
<script type="text/javascript" src="../../js/ui.jqgrid.js"></script>
<script type="text/javascript" src="../../js/ui.autosearch.js"></script>
<script type="text/javascript" src="../../js/ui.chosen.js"></script>
<script type="text/javascript" src="../../js/ui.common.js"></script>
<script type="text/javascript" src="../../js/ui.custom.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.js"></script>
<script type="text/javascript" src="../../js/page.common.js"></script>
<script type="text/javascript" src="../../js/ui.pick.js"></script>
<link rel="stylesheet" href="../../theme/default/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.excheck.js"></script>
<style type="text/css">
.t-left-panel{width:500px;margin:24px auto 0;height:500px;}
.t-left-panel-title{height:30px;background:#018659;width:100%;}
.full-drop-panel{display:block;}
element.style {
margin-left: 0;
}
.toolbar button, .search-panel button, .title-bar button {
margin-left: 2px;
margin-right: 2px;
}
.fa-search {
background: #018659 none repeat scroll 0 0;
color: #fff;
cursor: pointer;
display: inline-block;
height: 24px;
left: 170px;
line-height: 24px;
position: absolute;
text-align: center;
top: 1px;
width: 30px;
}
</style>
<script type="text/javascript">
var result=[];
$(function(){
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y" : "ps", "N" : "ps" }
},
view: {
showLine: true,
selectedMulti: false,
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
},
callback:{
onCheck:onCheck
}
};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{name:"中国",id:"01",pId:"0",open:true,
children:[
{name:"上海",id:"1",pId:"01",open:true, children:[{name:"闵行",pId:"1",id:"11"}, {name:"徐汇",pId:"1",id:"12"}]},
{name:"北京",id:"2",pId:"01",open:true, children:[{name:"东城",pId:"2",id:"21"}, {name:"西城",pId:"2",id:"22"}]}
]},
{name:"中国1",id:"02",pId:"0",open:true,
children:[
{name:"上海1",pId:"02",id:"3",open:true, children:[{name:"闵行1",pId:"3",id:"31",}, {name:"徐汇1",pId:"3",id:"32",}]}
]}
];
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
// chooseCheckedNodes();
//重置左边树状型的高宽
resizeLeftTree();
$("#queryStoreTree").focus(function(){
showLeftPanel(".t-left-panel");
});
//初始化选中的节点
// initCheckedNodes();
});
/*******初始化选中的节点********/
function onCheck(){
if(result.length>0){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes=treeObj.getNodes();
var checkedId;
for(var j=0;j<result.length;j++){
checkedId=result[j].value;
treeObj.checkNode(treeObj.getNodeByParam("id", checkedId, null), true, true);
}
}
}
function resizeLeftTree(){
var hPanel=$(".t-left-panel").height(),
hTitle=$(".t-left-panel-title").height(),
hToolbar=$(".t-left-panel .toolbar").height(),
hTreeButton=$(".tree-button").height(),
hTree=hPanel-hTitle-hToolbar-hTreeButton-85;
$("#treeDemo").css({height:hTree,overflow:"scroll-y"});
}
function getValue() {
var result2 = [];
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getNodes();
var arr=[];
//获取选中的节点名称
checkedNode(nodes,result2);
return result2;
}
/******获取选中的节点名称*************/
function checkedNode(nodes,result2){
for(var i=0;i<nodes.length;i++){
if(nodes[i].children){
if(nodes[i].check_Child_State==2){
//填充result2
fillResult2(result2,nodes[i]);
continue;
}else if(nodes[i].check_Child_State==1){
checkedNode(nodes[i].children,result2);
}
}else{
if(nodes[i].checked==true){
//填充result2
fillResult2(result2,nodes[i]);
continue;
}
}
}
}
/*******填充result2************/
function fillResult2(result2,node){
var data=new Object();
data.text=node.name;
data.value=node.id;
result2.push(data);
}
function setValue(data) {
result=data;
}
function clearValue() {
result = [];
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkAllNodes(false);
}
</script>
</head>
<body>
<div style="width:800px">
<div class="t-left-panel">
<div class="toolbar" style="position:relative;">
<input data-xtype="text" placeholder="门店查询" style="width:120px;" class="left-search-shop"/>
<a class="fa fa-search"></a>
</div>
<!-- 左边树形图 -->
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>