master

分支 (1)

管理

管理

master

layui_demo_4
/
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>
  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'  //绑定元素
				  ,data: res
					,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'){ //增加节点
					      //返回 key 值
					      //return 123;
								//layer.msg('添加');
								$("#parentId").val(id);
								layer.open({
								  type: 1,
									area: ['600px', '500px'],
									title:'添加模块',
								  content: $('#ff') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
								});
					    } 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);
										//JSON.stringify();//将objet型的json转换string型json
									},'json'
								);
								//给表单赋值
								form.val("ff2", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
								  "mId": id // "name": "value"
								  ,"name": data.title
								  ,"parentId": JSON.parse(res.message).parentId
								  ,"path": data.href
								  ,"weight": 1
								});

								//获取表单区域所有值
								var data1 = form.val("formTest");

								layer.open({
								  type: 1,
									area: ['600px', '500px'],
									title:'修改模块',
								  content: $('#ff2') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
								});
					    } else if(type === 'del'){ //删除节点
					      $.post(
									'http://stuapi.ysd3g.com/api/DeleteModule',
									{
										mId:id,
										token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
									},function(res){
										layer.msg(''+res.success);
									},'json'
								);
					    };
					  }
				});
			},'json'
		);

  });
  </script>
	</body>
	<!-- 添加模块 -->
	<form id="ff" class="layui-form" lay-filter="ff" action="" style="display: none;">
		<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
		<input type="hidden" id="parentId" name="parentId" value="" />
	  <div class="layui-form-item">
	    <label class="layui-form-label">模块名称</label>
	    <div class="layui-input-inline">
	      <input type="text" 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" 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" 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>

	<!-- 修改模块 -->
	<form id="ff2" class="layui-form" lay-filter="ff2" action="" style="display: none;">
		<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
		<input type="hidden" id="parentId2" name="parentId" value="" />
		<input type="hidden" id="mId" name="mId" value="" />
	  <div class="layui-form-item">
	    <label class="layui-form-label">模块名称</label>
	    <div class="layui-input-inline">
	      <input type="text" 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" 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" 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>
	<script>
	//Demo
	layui.use(['form','jquery'], function(){
	  var form = layui.form;
		var $ = layui.jquery;
	  //监听提交
	  form.on('submit(add)', function(data){
	    //layer.msg(JSON.stringify(data.field));
		  $.post(
				'http://stuapi.ysd3g.com/api/CreateModule',
				data.field,
				function(res){
					layer.msg(''+res.success);
					location.reload();//刷新页面
				},'json'
			);
	    return false;
	  });

		//监听提交
		form.on('submit(edit)', function(data){
		  //layer.msg(JSON.stringify(data.field));
		  $.post(
				'http://stuapi.ysd3g.com/api/UpdateModule',
				data.field,
				function(res){
					layer.msg(''+res.success);
					location.reload();//刷新页面
				},'json'
			);
		  return false;
		});
	});
	</script>
</html>