spfm-market
/
spfm-market-front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
							<!DOCTYPE html>
<html>

<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/css/zTreeStyle.css" type="text/css" />
	<link charset="utf-8" rel="stylesheet" href="/static/css/layui.css?v=1.0.0">
	<link rel="stylesheet" href="/static/css/temp.css" media="all">
	<script src="/static/js/jquery-1.8.2.min.js?v=1.0.0"></script>
	<script src="/static/js/layui.all.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/js/layui.js?v=1.0.0"></script>
	<script src="/static/js/common.js?v=1.0.0"></script>
	<script src="/static/js/api.config.js"></script>
	<script src="/static/js/util.js?v=1.0.0"></script>
	<script src="/static/js/customform.js?v=1.0.0"></script>
	<script src="/static/js/url.js?v=1.0.0"></script>
	<script src="/static/js/lay/lay-config.js?v=1.0.0"></script>
	<script type="text/javascript" src="/static/js/jquery.ztree.all.min.js"></script>
	<script type="text/javascript" src="/static/js/jquery.ztree.exhide-3.5.js"></script>
</head>
<style>


</style>

<body class="bg-info">

	<div class="layui-card  border-info">

		<div class="layui-card-header   layui-card-header-bb-2"
			style="height: 55px;line-height: 20px; padding-left: 0;padding-right: 8px;padding-top: 15px;">
			<div class="layui-input-inline" style="padding-left: 30px;">
				<input class="layui-input  " id="searchInput" value="" placeholder="输入查询内容...">
			</div>
			<div class="layui-input-inline">
				<button class="layui-btn layui-btn-normal" id="search_btn">查询</button>
			</div>


		</div>

		<div class="layui-card-body">

			<div class="layui-row">

				<ul id="tree" class="ztree" style="overflow-y: auto;"></ul>

			</div>

		</div>

		<div class="layui-card-footer">

			<button class=" layui-btn layui-btn-sm layui-btn-normal  ztreeSave">
				<i class="layui-icon layui-icon-ok-circle "></i>
				<span class="btn-span-middle">确定</span>
			</button>
			<button class=" layui-btn layui-btn-sm layui-btn-normal  parentClear ">
				<i class="layui-icon layui-icon-fonts-clear "></i>
				<span class="btn-span-middle">清空选择</span>
			</button>
			<button class="ag-btn-cancel layui-btn layui-btn-sm layui-btn-normal">
				<i class="layui-icon layui-icon-close "></i>
				<span class="btn-span-middle">取消</span>
			</button>
		</div>

	</div>

	<input type="hidden" name='roleCode' />

	<input type="hidden" name="roleName" />

</body>

<script>


	layui.use(['element', 'form'], function () {

		var layer = layui.layer;

		var zTreeObj,
			setting = {
				check: {
					enable: true,
					chkboxType: {
						"Y": "ps",
						"N": "s"
					},
					chkStyle: "radio"

				},
				async: {
					enable: true,
					contentType: "application/json",
					url: "",
					dataType: "JSON",
					autoParam: [],
					headers: { "agileauthtoken": util.getToken() },
					type: "post",

					dataFilter: function filter(treeId, parentNode, childNodes) {

						if (!childNodes) return null;

						return childNodes;
					}
				},

				view: {
					dblClickExpand: true, //双击节点时，是否自动展开父节点的标识
					showLine: false, //设置 zTree 是否显示节点之间的连线。
					selectedMulti: false, //设置是否允许同时选中多个节点。
					autoCancelSelected: false, //禁止按住ctrl多选
					showTitle: true, //设置显示提示信息
					txtSelectedEnable: true //设置可以选择节点名称
				},
				data: {
					key: {
						name: ""
					},
					simpleData: {
						enable: true,
						idKey: "",
						pIdKey: "",
						rootPId: "0"
					}
				},
				callback: {
					//点击节点开始时执行
					beforeClick: function (treeId, treeNode) {


						zTreeObj.reAsyncChildNodes(treeNode, "refresh");

						return false;

					},
					onCheck: function (event, treeId, treeNode) {

						if (treeNode.checked) {

							zTreeObj.reAsyncChildNodes(treeNode, "refresh");

						}
					},
					beforeAsync: function (treeId, treeNode) {


						if (!treeNode) {

							return true;

						}

						if (!treeNode.isParent) {

							return false;

						}


					},
					onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {


						if (XMLHttpRequest && XMLHttpRequest.responseText) {

							util.error($.parseJSON(XMLHttpRequest.responseText).message);
						}

						if (treeNode) {

							treeNode.isParent = false;

							zTreeObj.removeChildNodes(treeNode);
						}


					},
					onAsyncSuccess: function (event, treeId, treeNode, msg) {

					}
				}

			};


		var parentOpt = {
			"id": "",
			"ag-tree-key": "",
			"ag-tree-parent-key": "",
			"ag-tree-return-parent-key": "parentCode",
			"ag-tree-return-key": "optCode",
			"ag-tree-return-name": "optName",
			"ag-tree-name": "",
			"ag-tree-url": "",
			"ag-tree-type": "radio",
			"ag-data-ctx": "sysmgr",
			"ag-tree-data": []
		}

		function initSetting() {

			setting.data.key.name = parentOpt["ag-tree-return-name"];

			setting.data.simpleData.idKey = parentOpt["ag-tree-return-key"];

			setting.data.simpleData.pIdKey = parentOpt["ag-tree-return-parent-key"];

			setting.check.chkStyle = parentOpt["ag-tree-type"];

			if (parentOpt["ag-tree-type"] == "radio") {

				setting.check.radioType = "all";

			}


			setting.async.url = ctx + "/" + parentOpt["ag-data-ctx"] + parentOpt["ag-tree-url"];

			var autoArr = [];

			autoArr.push(parentOpt["ag-tree-return-key"] + "=" + parentOpt["ag-tree-parent-key"]);

			//autoArr.push(parentOpt["ag-tree-return-name"]+"="+parentOpt["ag-tree-name"]);

			//autoArr.push(parentOpt["ag-tree-return-parent-key"]+"="+parentOpt["ag-tree-parent-key"]);

			setting.async.autoParam = autoArr;

		}

		function initOpt() {

			var param = util.getUrlParam();

			id = param.id;

			var errorMsg = "";

			var parentObj = parent.$("#" + id);

			if (parentObj.length == 0) {

				util.error("id不存在！");

				return false;
			}

			for (var key in parentOpt) {

				var val = parentObj.attr(key);

				if (!util.isNull(val)) {

					parentOpt[key] = val;
				}


				if (key == "ag-tree-data") {

					val = parent.$("[name=" + parentOpt["ag-tree-key"] + "]").data(key);

					if (!util.isNull(val)) {

						parentOpt[key] = val;
					}

					continue;
				}

				if (util.isNull(parentOpt[key])) {


					errorMsg += "[" + key + "]属性未配置,"
				}

			}

			if (!util.isNull(errorMsg)) {

				util.error(errorMsg);

				return false;

			}

			return true;
		}


		$(document).ready(function () {


			$("#tree").height($(window).height() - 159);

			if (!initOpt()) {

				return;
			}

			initSetting();

			zTreeObj = $.fn.zTree.init($("#tree"), setting);


			$(".ztreeSave").click(function () {

				save();
			});

			$("#search_btn").click(function () {

				check();
			});

			$(".parentClear").click(function () {

				parentClear();

			});


		});
		//初始化节点树

		function trimtest(str) {
			//   用正则表达式将前后空格
			//   用空字符串替代。
			return str.replace(/(^\s*)|(\s*$)/g, "");
		}
		//将所有隐藏的节点显示出来。
		function refreashNodes() {
			nodes = zTreeObj.getNodesByParam("isHidden", true);
			zTreeObj.showNodes(nodes);
		}

		function parentClear() {


			parent.$("[name=" + parentOpt["ag-tree-key"] + "]").val("");

			parent.$("[name=" + parentOpt["ag-tree-name"] + "]").val("");

			parent.util.closeAll();
		}

		function save() {

			refreashNodes();

			var nodes = zTreeObj.getCheckedNodes(true);

			if (nodes.length == 0) {

				util.error("请选中渠道！");

				return;
			}

			var keyVal = "";

			var nameVal = "";

			if (parentOpt["ag-tree-type"] == "checkbox") {

				util.error("待开发...");

				return;

			} else if (parentOpt["ag-tree-type"] == "radio") {


				if (nodes[0].isAjaxing == true) {

					util.error("正在加载子节点，请稍后！");

					return;
				}

				keyVal = nodes[0][parentOpt["ag-tree-return-key"]];

				nameVal = nodes[0][parentOpt["ag-tree-return-name"]];

			} else {

				util.error("类型配置不正确:" + parentOpt["ag-tree-type"]);

				return;
			}

			parent.$("[name=" + parentOpt["ag-tree-key"] + "]").val(keyVal);

			parent.$("[name=" + parentOpt["ag-tree-name"] + "]").val(nameVal);

			parent.util.closeAll();

		}

		function check() {

			util.load('检索中请稍后!');

			showSelected();


			util.disLoad();
		}

		function showSelected() {

			var searchStr = $('#searchInput').val(); //通过id获取页面输入的值
			if (searchStr == '') {
				refreashNodes();
				return;
			}

			var allNodes = zTreeObj.transformToArray(zTreeObj.getNodes());

			zTreeObj.hideNodes(allNodes); //隐藏所有节点
			// var nodes = zTreeObj.getNodesByFilter(filter); // 查找节点集合 两种方式

			var nodes = zTreeObj.getNodesByParamFuzzy(setting.data.key.name, searchStr);

			if (nodes.length == 0) {
				return;
			}

			var resultNodes = new Array();
			$.each(nodes, function (i, n) {
				var tempNode = n;
				for (var i = 0; i < n.level; i++) {
					tempNode = tempNode.getParentNode(); //获取当前被选中的节点的父节点
					if (tempNode != null && tempNode != "") {
						resultNodes.push(tempNode);
					}
				}
			});
			resultNodes = resultNodes.concat(nodes); //concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
			zTreeObj.showNodes(resultNodes);
			zTreeObj.expandAll(true);

		}

		function showValNode(obj) {
			var val = $(obj).val();
			val = trimtest(val);
			if (val == "") {
				refreashNodes();
			}
		}

	});


</script>

</html>