master

分支 (1)

管理

管理

master

layui_demo_3
/
tree.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test1"></div>
		  <script src="../src/layui.js"></script>
		  <script>
		  layui.use(['tree','jquery','form'], function(){
		    var tree = layui.tree;
				var $ = layui.jquery;
				var form = layui.form;

				$.post(
					'http://stuapi.ysd3g.com/api/GetAllModuleLayUI',
					{
						token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
					},function(res){
						//渲染
						var inst1 = tree.render({
						  elem: '#test1'  //绑定元素
							,edit:['add', 'update', 'del']
							,operate: function(obj){
							    var type = obj.type; //得到操作类型：add、edit、del
							    var data = obj.data; //得到当前节点的数据
							    var elem = obj.elem; //得到当前节点元素

							    //Ajax 操作
							    var id = data.id; //得到节点索引
							    if(type === 'add'){ //增加节点
										$('#parentId').val(id);
										layer.open({
											type: 1,
											title: '添加模块',
											area: ['500px', '500px'],
											content: $('#addModule') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
										});
										//监听提交
										form.on('submit(add)', function(data) {
											$.post(
												'http://stuapi.ysd3g.com/api/CreateModule',
												data.field,
												function(res){
													//layer.msg(''+res.success);
													location.reload();
												},'json'
											);
											return false; //阻止表单提交
										});
							      //返回 key 值
							      return 123;
							    } else if(type === 'update'){ //修改节点
							      //console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
										//查询修改节点的parentId
										$.post(
											'http://stuapi.ysd3g.com/api/GetModuleById',
											{
												id:id,
												token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
											},function(res){
												//console.log(JSON.parse(res.message).parentId);
												$("#parentId2").val(JSON.parse(res.message).parentId);
											},'json'
										);
										$('#mId').val(id);
										form.val('ff2', {
											'name':data.title,//模块名称(节点标题)
										}); //表单回显
										layer.open({
											type: 1,
											title: '编辑模块',
											area: ['500px', '500px'],
											content: $('#editModule') //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
										});
										//监听提交
										form.on('submit(edit)', function(data) {
											$.post(
												'http://stuapi.ysd3g.com/api/UpdateModule',
												data.field,
												function(res){
													//layer.msg(''+res.success);
													location.reload();
												},'json'
											);
											return false; //阻止表单提交
										});
							    } else if(type === 'del'){ //删除节点
							      $.post(
											'http://stuapi.ysd3g.com/api/DeleteModule',
											{
												mId:id,
												token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
											}
										);
							    };
							  }
						  ,data: res
						});
					},'json'
				);

		  });
		  </script>
	</body>
	<div id="addModule" style="display: none;">
		<form id="ff" class="layui-form" action="" lay-filter="ff">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<input type="hidden" id="parentId" name="parentId"  />
			<div class="layui-form-item">
				<label class="layui-form-label">模块名称</label>
				<div class="layui-input-inline">
					<input type="text" id="name" name="name"  placeholder="请输入模块名称"
					 autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块路径</label>
				<div class="layui-input-inline">
					<input type="text" id="path" name="path"  placeholder="请输入模块路径"
					 autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重</label>
				<div class="layui-input-inline">
					<input type="text" id="weight" name="weight"  placeholder="请输入权重"
					 autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<div id="editModule" style="display: none;">
		<form id="ff2" class="layui-form" action="" lay-filter="ff2">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<input type="hidden" id="mId" name="mId"  />
			<input type="hidden" id="parentId2" name="parentId"  />
			<div class="layui-form-item">
				<label class="layui-form-label">模块名称</label>
				<div class="layui-input-inline">
					<input type="text" id="name" name="name"  placeholder="请输入模块名称"
					 autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">模块路径</label>
				<div class="layui-input-inline">
					<input type="text" id="path" name="path"  placeholder="请输入模块路径"
					 autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重</label>
				<div class="layui-input-inline">
					<input type="text" id="weight" name="weight"  placeholder="请输入权重"
					 autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</html>