这个就我这两天做的经验来看，不要像web端的那样父页面和树形选择页面分开来写，手机端合在一个页面会更好写
思路：
由于没有找到很好的相关插件，所以CSS我是自己写的，JS我调用了web的插件的ZTree，再加上一些js控制，可以达到目的，效果图如下
注意事项：
1：要写ztree中的setting，同时初始化，
zTreeObj = $.fn.zTree.init($("#depTree"), depSetting, data);
2：要获取到所有的对象
treeObj=$.fn.zTree.getZTreeObj("depTree");
treeNodes = treeObj.transformToArray(treeObj.getNodes());
把ztree渲染的树隐藏起来，在页面中点击的时候和隐藏的ztree同步，就可以达到使用ztree的功能的目的
下面是代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>${systemTitle}</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="mobileApply/js/jquery-1.8.2.js"></script>
<script src="mobileApply/js/jquery.mobile-1.1.0-mini.js"></script>
<script src="mobileApply/js/myShowImage.js"></script>
<link rel="stylesheet" href="mobileApply/css/jquery.mobile-1.1.0-mini.css" type="text/css" />
<link rel="stylesheet" href="mobileApply/css/myCss.css" type="text/css" />
<script src="${my_js_path}"></script><script src="mobileApply/js/myShowSystemFile.js"></script>
<script language="javascript" type="text/javascript" src="dateTool/WdatePicker.js"></script>
<script type="text/javascript" src="jquery/map.js"></script>
<script type="text/javascript" src="jquery/jquery.ztree.all-3.5.min.js"></script>
<link rel="stylesheet" href="jquery/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<style>
.dep{
margin-left: 50px !important;
line-height: 50px;
}
.out-border{
background-color: lightgrey;
height: 50px;
border-radius: 10px;
}
.selected{
width: 15px !important;
height: 15px !important;
margin: 17px 0px 0px 0px !important;
background : url(mobileApply/images/tree/2.png) no-repeat !important;
}
.unselected{
width: 15px !important;
height: 15px !important;
margin: 17px 0px 0px 0px !important;
background : url(mobileApply/images/tree/3.png) no-repeat !important;
}
.childSelected{
width: 15px !important;
height: 15px !important;
margin: 17px 0px 0px 0px !important;
background : url(mobileApply/images/tree/1.png) no-repeat !important;
}
</style>
<body>
<form action="" id="form1" name="webForm" method="post">
<div data-role="page" id="index">
<div style="clear:both"></div>
<div data-role="header" class="footer-docs" data-theme="b" data-position="fixed" id="heder">
<a href="#" onClick="backFile()" class="ui-btn-left ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-left" data-icon="arrow-l" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">返回</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
</span>
</a>
<h1 class="ui-title" role="heading" aria-level="1"></h1>
<a href="" data-icon="home" data-theme="b" data-ajax="false" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span">
<span class="ui-btn-text">首页</span>
</a>
</div>
<div data-role="content" style="background-color:#FFF">
<div id="content1">
</div>
<div id="content" style="display: none"></div>
<ul style="display: none"><li id="depTree" class="ztree"></li></ul>
<div data-role="footer" data-id="mainFooter" data-position="fixed" data-theme="c" id="footer">
<div data-role="navbar" data-grid="a" data-inset="true">
<ul class="apple-navbar-ui comboSprite">
<li><a href="#" data-iconpos="top" data-icon="check" data-ajax="false" onclick="SendOfficialDoc()">转发文件<span class="ui-li-count"></span></a></li>
<li><a href="mobileMake.do?method=fileReceiveList" data-iconpos="top" data-icon="back" data-ajax="false" >返回列表</a></li>
</ul>
</div>
</div>
</div>
<input name="depsId" id="depsId" type="hidden" value="">
</form>
</body>
</html>
<script type="text/javascript">
function showTree() {
var headContent="<a href=\"#\" onClick=\"backFile()\" class=\"ui-btn-left ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-left\" data-icon=\"arrow-l\" data-theme=\"b\" data-corners=\"true\" data-shadow=\"true\" data-iconshadow=\"true\" data-wrapperels=\"span\">\n" +
" <span class=\"ui-btn-inner ui-btn-corner-all\">\n" +
" <span class=\"ui-btn-text\">返回</span>\n" +
" <span class=\"ui-icon ui-icon-arrow-l ui-icon-shadow\"></span>\n" +
" </span>\n" +
" </a>\n" +
" <h1 class=\"ui-title\" role=\"heading\" aria-level=\"1\">公文转发</h1>\n" +
" <a href=\"mobileMake.do?method=index\" data-icon=\"home\" data-theme=\"b\" data-ajax=\"false\" data-corners=\"true\" data-shadow=\"true\" data-iconshadow=\"true\" data-wrapperels=\"span\" class=\"ui-btn-right ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-left\">\n" +
" <span class=\"ui-btn-inner ui-btn-corner-all\">\n" +
" <span class=\"ui-btn-text\">\n" +
" <span class=\"ui-btn-text\">首页</span>\n" +
" </span>\n" +
" <span class=\"ui-icon ui-icon-home ui-icon-shadow\"> </span>\n" +
" </span>\n" +
" </a>"
if($("#content").is(":hidden")){
$("#content1").hide();
$("#footer").hide();
$("#content").show();
headContent="<a href=\"#\" onClick=\"goBcak()\" class=\"ui-btn-left ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-left\" data-icon=\"arrow-l\" data-theme=\"b\" data-corners=\"true\" data-shadow=\"true\" data-iconshadow=\"true\" data-wrapperels=\"span\">\n" +
" <span class=\"ui-btn-inner ui-btn-corner-all\">\n" +
" <span class=\"ui-btn-text\">返回</span>\n" +
" <span class=\"ui-icon ui-icon-arrow-l ui-icon-shadow\"></span>\n" +
" </span>\n" +
" </a>\n" +
" <h1 class=\"ui-title\" role=\"heading\" aria-level=\"1\">选择部门</h1>\n" +
" <a href=\"#\" onClick=\"sub()\" data-icon=\"home\" data-theme=\"b\" data-ajax=\"false\" data-corners=\"true\" data-shadow=\"true\" data-iconshadow=\"true\" data-wrapperels=\"span\" class=\"ui-btn-right ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-left\">\n" +
" <span class=\"ui-btn-inner ui-btn-corner-all\">\n" +
" <span class=\"ui-btn-text\">\n" +
" <span class=\"ui-btn-text\">确定</span>\n" +
" </span>\n" +
" <span class=\"ui-icon ui-icon-home ui-icon-shadow\"> </span>\n" +
" </span>\n" +
" </a>"
}else{
$("#content1").show();
$("#footer").show();
$("#content").hide();
}
$("#heder").html(headContent)
}
var depSetting =
{
data:
{
simpleData:
{
enable: true
}
},
check:
{
enable:true,
chkStyle:'checkbox'
}
};
var treeObj;
var treeNodes;
var choMap=new Map();
$(function () {
$.ajax({
type: "POST",
dataType: "json",
url: '',
success: function (data) {
zTreeObj = $.fn.zTree.init($("#depTree"), depSetting, data);
var nodes=zTreeObj.getNodes();
changeContent(nodes)
treeObj=$.fn.zTree.getZTreeObj("depTree");
treeNodes = treeObj.transformToArray(treeObj.getNodes());
}
});
});
/*点击复选框*/
function chooseDep(obj){
var node = treeObj.getNodeByParam("id", $(obj).val(), null);
if ($(obj).is(':checked')){
treeObj.checkNode(node,true,true,false);
$(obj).attr("class","selected");
}else{
treeObj.checkNode(node,false,true,false);
$(obj).attr("class","unselected");
}
for (var i = 0; i < treeNodes.length; i++){
if(treeNodes[i].checked){
if(treeNodes[i].level == "1"){
if(!choMap.containsKey(treeNodes[i].id)){
choMap.put(treeNodes[i].id,treeNodes[i].name);
}
}
}else{
if(choMap.containsKey(treeNodes[i].id)){
choMap.remove(treeNodes[i].id);
}
}
}
}
/*点击部门,要去到下一层级*/
function childs(id){
var nodes = treeObj.getNodesByParam("pId", id, null);
changeContent(nodes)
}
/*改变显示的部门内容*/
function changeContent(nodes) {
var content="";
if (nodes.length!=0){
for (var i = 0;i < nodes.length; i++){
if ((nodes[i].checked&&choMap.containsKey(nodes[i].id))||(nodes[i].checked&&nodes[i].check_Child_State==2)){
content+="<div class='out-border'><input class='selected' style='-webkit-appearance: none' type='checkbox' value='"+nodes[i].id+"' onclick='chooseDep(this)'><div class='dep' onclick=childs('"+nodes[i].id+"')>"+nodes[i].name+"</div></div>";
}else if (nodes[i].check_Child_State==1) {
content+="<div class='out-border'><input class='childSelected' style='-webkit-appearance: none' type='checkbox' value='"+nodes[i].id+"' onclick='chooseDep(this)'><div class='dep' onclick=childs('"+nodes[i].id+"')>"+nodes[i].name+"</div></div>";
}else {
content+="<div class='out-border'><input class='unselected' style='-webkit-appearance: none' type='checkbox' value='"+nodes[i].id+"' onclick='chooseDep(this)'><div class='dep' onclick=childs('"+nodes[i].id+"')>"+nodes[i].name+"</div></div>";
}
}
$("#content").html(content)
$("#content").trigger("create");
}
}
/*点击确定*/
function sub() {
var depId="";
var depName="";
for ( var i = 0; i <choMap.size(); i++){
depName+=choMap.element(i).value+",";
depId+=choMap.element(i).key+",";
}
if (depName!=""&&depName.length>0) {
depName=depName.substring(0,depName.length-1);
}
if(depName==""||depName.length<=0){
depName="点击选择";
}
$("#showDepName").text(depName);
$("#depsId").val(depId);
var nodes = treeObj.getNodesByParam("pId", null, null);
changeContent(nodes)
showTree();
}
/*返回上一级*/
function goBcak() {
var nodes = treeObj.getNodesByParam("pId", null, null);
changeContent(nodes)
}
</script>