<?php include(mvc::$cfg['PATH_TPL'].'public/header.php');?>
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<link href="<?php echo mvc::$cfg['URL_STATIC'];?>css/plugins/jsTree/style.min.css" rel="stylesheet">
<div class="list_pager" style="margin:10px">
	<div class="row">
		<div class="col-md-3">
			<div>
				<input type="text" value="" style="box-shadow:inset 0 0 4px #eee; width:120px; margin:0; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;" id="tree_query_<?php echo $_REQUEST['element']?>" placeholder="查找" autocomplete="off" />
			</div>
			<div id="jstree_<?php echo $_REQUEST['element']?>"></div>
		</div>
		<div class="col-md-9">
		</div>
	</div>
</div>
<div style="display:none">
	<div id="value"></div>
	<div id="fullvalue"></div>
	<div id="text"></div>
	<div id="fulltext"></div>
</div>
<script src="<?php echo mvc::$cfg['URL_STATIC'];?>js/plugins/jsTree/jstree.js"></script>
<script type="text/javascript">
var element = "<?php echo $_REQUEST['element']?>";
var level = "<?php echo $_REQUEST['level']?>";
var noid = "<?php echo $_REQUEST['noid']?>";
var selectedClose = "<?php echo $_REQUEST['selectedClose']?>";
var parentId      = "<?php echo $_REQUEST['parentId']?>";
var treeDom = '#jstree_'+element;
var queryDom = '#tree_query_'+element;
$(document).ready(function () {
	$(queryDom).focus(); //初始焦点
	var to = false;
	$(queryDom).keyup(function () {
		if(to) { clearTimeout(to); }
		to = setTimeout(function () {
			var v = $(queryDom).val();
			if(v!=''){
				$(treeDom).jstree(true).search(v);
			}else{
				$.each($('li[role="treeitem"]'),function(i,e){
					$(e).show();
				});
			}
		}, 300);
	});
	$(treeDom).jstree({ 
		'core' : {
			"animation" : 0,
			"check_callback" : true,
			'force_text' : true,
			"themes" : { "stripes" : true },
			'data' : {
				'url' : HOST+'jsTree/getNode',
				'dataType':'json',
				'data' : function (node) {
					return { "element":element, "level":level, "parentId":parentId, "noid":noid, "key" : node.id };
				}
			},
		},
		"types" : {
			"root" : {
				"icon" : "<?php echo mvc::$cfg['URL_STATIC'];?>css/plugins/jsTree/tree_icon.png",
			},
			"default" : {
				"icon" : "glyphicon glyphicon-file",
			},
			"folder" : {
				"icon" : "",
			},
			"file" : {
				"icon" : "glyphicon glyphicon-file",
			},
		},
		"plugins" : ["types", "state", "search" ], //contextmenu:右键菜单, dnd:移动
		"search": {
			'show_only_matches': true, //是否隐藏不符合条件的节点
			'ajax': {
				'url': HOST+'jsTree/searchNode?element='+element+'&level='+level+'&parentId='+parentId,
				'dataType': 'json',
				'type': 'GET',
				'data': function(str) {
					return { "element":element, "level":level, "str" : str };
				},
				"success" : function(data){
					$.each($('li[role="treeitem"]'),function(i,e){
						if($.inArray($(e).attr('id'),data)!=-1)
							$(e).show();
						else if($(e).attr('id')!='#')
							$(e).hide();
					});
				}
			}
		}
	})
	.on('changed.jstree', function (e, data) {
		var parentId = $(treeDom).jstree(true).get_parent(data.node);
		var fulltext = data.node.text || '';
		if(parentId>0){
			var parentText = $(treeDom).jstree(true).get_node(parentId).text;
			fulltext = parentText+'/'+data.node.text;
		}
		$('#value').text(data.node.id);
		$('#text').html(data.node.text);
		$('#fullvalue').html(parentId+','+data.node.id);
		$('#fulltext').html(fulltext);
		if(selectedClose)
			parent.$('.layui-layer-btn0').click();//执行确定按钮
	})
	.on("loaded.jstree", function(event, data) {
		data.instance.clear_state(); //清除jstree保存的选中状态
		data.instance.open_all();//展开所有节点
	});
});

/**方法************************/
</script>
<?php include(mvc::$cfg['PATH_TPL'].'public/footer.php')?>