layui 整合 ztree,设置树形展示的大小和点击取值

提问 未结 0 81
fly小胖
fly小胖 7天前
悬赏:80飞吻
版本:layuiAdmin 2.5 浏览器:
我目前在整合layui和ztree的时候遇到了些问题
1、在弹出的iframe页面中点击输入框弹出部门树,如何调整这个部门树大小而不受iframe大小的限制;
2、调整部门树大小之后如何取到点击的值






用户添加页面的部分代码

<div class="layui-form-item">
<label class="layui-form-label">部门<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input id="deptId" name="deptId" type="hidden">
<input id="deptName" name="deptName" placeholder="请输入部门" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
</div>
</div>
//点击部门输入框时触发的事件
// 点击部门时
$('#deptName').click(function () {
var formName = encodeURIComponent("parent.UserInfoDlg.data.deptName");
var formId = encodeURIComponent("parent.UserInfoDlg.data.deptId");
var treeUrl = encodeURIComponent(Feng.ctxPath + "/dept/tree");

layer.open({
type: 2,
title: '部门选择',
//area: ['300px', '400px'],
area: ['1000px', '800px'], //这个行不通
content: Feng.ctxPath + '/system/commonTree?formName=' + formName + "&formId=" + formId + "&treeUrl=" + treeUrl,
end: function () {
console.log(UserInfoDlg.data);
$("#deptId").val(UserInfoDlg.data.deptId);
$("#deptName").val(UserInfoDlg.data.deptName);
}
});
});
后端请求代码

    @RequestMapping("/commonTree")
public String deptTreeList(@RequestParam("formName") String formName, @RequestParam("formId") String formId,
@RequestParam("treeUrl") String treeUrl, Model model) {
if (ToolUtil.isOneEmpty(formName, formId, treeUrl)) {
throw new RequestEmptyException("请求数据不完整!");
}
try {
model.addAttribute("formName", URLDecoder.decode(formName, "UTF-8"));
model.addAttribute("formId", URLDecoder.decode(formId, "UTF-8"));
model.addAttribute("treeUrl", URLDecoder.decode(treeUrl, "UTF-8"));
} catch (UnsupportedEncodingException e) {
throw new RequestEmptyException("请求数据不完整!");
}
return "/common/tree_dlg.html";
}
树形弹出框的页面代码

<!DOCTYPE html>
<html class="bg-white">
@/**
@ * 本页面所用的模板变量
@ *
@ * treeUrl : 加载树的url
@ * fromName : 需要设置的显示名称
@ * fromId : 需要设置的隐藏id
@ **/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>${systemName}</title>
<meta name="description" content="${systemName}">
<meta name="author" content="stylefeng">

<!--其他插件css-->
<link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css"/>
<link href="${ctxPath}/assets/common/plugins/ztree/zTreeStyle.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="deptForm" class="layui-fluid">
<div class="layui-row" style="margin-top:15px;background: #f2f7f8;padding: 20px;">
<ul id="zTree" class="ztree"></ul>
</div>
<div class="layui-row" style="background: #CFD4D5;padding: 10px;">
<div style="text-align: center;">
<button class="layui-btn layui-btn-sm" id="saveButton">保存</button>
<button class="layui-btn layui-btn-sm layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
</div>
</div>
</div>
</body>


@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
var Feng = {
ctxPath: "",
addCtx: function (ctx) {
if (this.ctxPath === "") {
this.ctxPath = ctx;
}
}
};
Feng.addCtx("${ctxPath}");
</script>
<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js"></script>

<script type="text/javascript" src="${ctxPath}/assets/common/plugins/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/plugins/ztree/jquery.ztree.all.min.js"></script>

<script type="text/javascript">


layui.use(['ztree'], function () {
var $ZTree = layui.ztree;

var ZTreeDlg = {
index: parent.layer.getFrameIndex(window.name),
tempName: "",
tempId: ""
};

ZTreeDlg.onClickItem = function (e, treeId, treeNode) {
ZTreeDlg.tempName = ZTreeDlg.instance.getSelectedVal();
ZTreeDlg.tempId = treeNode.id;
};

ZTreeDlg.onDBClickItem = function (e, treeId, treeNode) {
${formName} = ZTreeDlg.instance.getSelectedVal();
${formId} = treeNode.id;
parent.layer.close(ZTreeDlg.index);
};

$("#saveButton").bind("click", function () {
${formName} = ZTreeDlg.tempName;
${formId} = ZTreeDlg.tempId;
parent.layer.close(ZTreeDlg.index);
});

var ztree = new $ZTree("zTree", "${treeUrl}");
ztree.bindOnClick(ZTreeDlg.onClickItem);
ztree.bindOnDblClick(ZTreeDlg.onDBClickItem);
ztree.init();
ZTreeDlg.instance = ztree;
});

</script>

</body>

</html>
@岁月小偷
回帖
  • 消灭零回复