程序博客网 > 证件照的软件

ztree做的选择带回（带 checkbox 的多选下拉菜单）

来源：互联网发布：证件照的软件编辑：程序博客网时间：2024/05/27 01:10

效果：

下面看代码：

<link rel="stylesheet" href="<%=basePath%>util/zTree/css/demo.css"
type="text/css">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>util/zTree/css/zTreeStyle/zTreeStyle.css">

<script type="text/javascript"
src="<%=basePath%>util/jqEasyUI/myAdd/jquery-1.8.3.js"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.all-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.core-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.excheck-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.exedit-3.5.js"
type="text/javascript"></script>
<script src="<%=basePath%>util/zTree/js/jquery.ztree.exhide-3.5.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "post",
async : false,
url : 'SubsidyAction09.do',
dataType : "json",
beforeSend : function(jqXHR, settings) {
},
success : function(data, textStatus, jqXHR) {//AJAX发送后成功执行。
zNodes = data;

$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandAll(true);
//父节点不显示checkbox
var nodes = zTree.transformToArray(zTree.getNodes());
for (var i = 0; i < nodes.length; i++) {
var id = nodes[i].id;

for (var j = 0; j < nodes.length; j++) {
if (id == nodes[j].pId) {
node = zTree.getNodeByParam("id", id, null);
node.nocheck = true;
zTree.updateNode(node);
}
}
}

return;
},
error : function(jqXHR, textStatus, errorThrown) {//AJAX发送出错执行。

alert("发生错误，请重试。");
return;
},
complete : function() {

}
});

});
var zTree;
var loginId = "";
var setting = {
check : {
enable : true,
chkboxType : {
"Y" : "",
"N" : ""
}
},
view : {
dblClickExpand : false
},
data : {
simpleData : {
enable : true
}
},
callback : {
beforeClick : beforeClick,
onCheck : onCheck
}
};

function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}

function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree
.getCheckedNodes(true), v = "";
for (var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
//loginId += nodes[i].id + ",";
}
//alert(loginId);
if (v.length > 0)
v = v.substring(0, v.length - 1);
var cityObj = $("#citySel");
cityObj.attr("value", v);
}

function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({
left : cityOffset.left + "px",
top : cityOffset.top + cityObj.outerHeight() + "px"
}).slideDown("fast");

$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "citySel"
|| event.target.id == "menuContent" || $(event.target).parents(
"#menuContent").length > 0)) {
hideMenu();
}
}

<style type="text/css">
.ztree li span.button.add {
margin-left: 2px;
margin-right: 10px;
background-position: -144px 0;
vertical-align: top;
*vertical-align: middle
}
</style>
</head>
<body style="float: left;">
<div id="menuContent" class="menuContent"
style="display: none; position: absolute;">
<ul id="treeDemo" class="ztree"
style="margin-top: 0; width: 260px; height: 300px;"></ul>
</div>

<td align="left" width="60px">姓名：</td>
<td align="left" width="200px"><input id="citySel" type="text"
readonly value="" style="width: 200px;" onclick="showMenu();" />
  <input type="button" id="menuBtn"
onclick="showMenu(); return false;" value="选择.."></td>

下面是action中的方法：

@RequestMapping(value = "/SubsidyAction09")
public String Subsidy09(HttpServletResponse response)
{
List<Map<String, Object>> list = companyServiceImpl.selectAllCompany();
StringBuffer sbf = new StringBuffer();
sbf.append("[");
for (Map<String, Object> map : list)
{
sbf.append("{id:" + map.get("id") + ",");
sbf.append("pId:" + map.get("parentId") + ",");
sbf.append("name:'" + map.get("name") + "',");
sbf.append("},");

List<Map<String, Object>> listName = SubsidyServiceImpl.selectNameByCCDM(map.get("ccdm").toString());
for (Map<String, Object> map2 : listName)
{
// System.out.println(map.get("id") + "***" + map2.get("name") + "***" + map2.get("EMPLOYEE_ID"));
sbf.append("{id:" + map2.get("EMPLOYEE_ID") + ",");//
sbf.append("pId:" + map.get("id") + ",");
sbf.append("name:'" + map2.get("name") + "',");
sbf.append("sign:'s',");
sbf.append("},");
}
}
sbf.append("]");
response.setCharacterEncoding("utf-8");
JSONArray array = new JSONArray();
PrintWriter out = null;
try
{
out = response.getWriter();
} catch (IOException e)
{
e.printStackTrace();
}
array = JSONArray.fromObject(sbf.toString());
out.print(array);
return null;
}

主要要点：ztree,ajax与Action的交互，json的数据格式

0 0

证件照的软件

证件照的软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子人法网查询执行信息 12348上海法网如法网的学法入口法律服务平台法罗法罗力维修电话法罗内衣几线品牌法老法老之蛇法老王猎犬砍死法老法老的宠妃2 古埃及法老法老之鹰法老的宠妃3 法老的冷妻法老猫法老jk kisos法老法老的宠妻法老公敌 wdgaf法老众神与法老埃及法老vs女儿皇后砍死法老歌词乐高无限法老王在哪法老溺爱宠妃法老的宠妃3终结篇埃及法老图片图坦卡蒙法老法老的宠妃终结篇法老王的宠妃法老之蛇实验法老与众神手机高清免费看法老的宠妃结局考研千万别考法硕考马斯亮蓝法测蛋白质含量学法考法平台登录入口 2019法考法考报名入口柏杜法考