页面树的拖动 异步修改 删除

来源:互联网 发布:windows未能正常启动 编辑:程序博客网 时间:2024/04/28 03:26

<%@page import="com.harvest.smartHotel.common.utils.ConfigUtil"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cpad菜单管理</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<%
 String lan[] = ConfigUtil.getConfigUtil().getLangarage().split(",");
%>
<script type="text/javascript">
 function reload() {
  var node = $('#tt2').tree('getSelected');
  if (node) {
   $('#tt2').tree('reload', node.target);
  } else {
   $('#tt2').tree('reload');
  }
 }
 function getChildren() {
  var node = $('#tt2').tree('getSelected');
  if (node) {
   var children = $('#tt2').tree('getChildren', node.target);
  } else {
   var children = $('#tt2').tree('getChildren');
  }
  var s = '';
  for ( var i = 0; i < children.length; i++) {
   s += children[i].text + ',';
  }
  alert(s);
 }
 function getChecked() {
  var nodes = $('#tt2').tree('getChecked');
  var s = '';
  for ( var i = 0; i < nodes.length; i++) {
   if (s != '')
    s += ',';
   s += nodes[i].text;
  }
  alert(s);
 }
 function getSelected() {
  var node = $('#tt2').tree('getSelected');
  return node;
 }
 function detail() {
  var node = getSelected();
  $('#dg').datagrid({
   url : 'datagrid_data.json',
   columns : [ [ {
    field : 'code',
    title : '会员级别',
    width : 100
   }, {
    field : 'name',
    title : '房间类型',
    width : 100
   } ] ]
  });
  $("#win").window('open');
 }
 function collapse() {
  var node = $('#tt2').tree('getSelected');
  $('#tt2').tree('collapse', node.target);
 }
 function expand() {
  var node = $('#tt2').tree('getSelected');
  $('#tt2').tree('expand', node.target);
 }
 function collapseAll() {
  var node = $('#tt2').tree('getSelected');
  if (node) {
   $('#tt2').tree('collapseAll', node.target);
  } else {
   $('#tt2').tree('collapseAll');
  }
 }
 function expandAll() {
  var node = $('#tt2').tree('getSelected');
  if (node) {
   $('#tt2').tree('expandAll', node.target);
  } else {
   $('#tt2').tree('expandAll');
  }
 }
 function append() {
  var node = $('#tt2').tree('getSelected');
  $("#menuId").val(node.id);
  $('#showGroup').dialog({
   width : 500,
   height : 600,
   modal : true,
   buttons : [ {
    text : 'Save',
    handler : function() {
     Save();
    }
   }, {
    text : 'Close',
    handler : function() {
     $('#cc').combotree('clear');
     $("#saveTextName").val('');
     $('#showGroup').dialog('close');
    }
   } ]
  });
  $.ajax({
   url : '${ctx }/tree/getVipLevelAndRoomType',
   type : 'POST',
   async : false,
   data : {
    'id' : node.id
   },
   success : function(d) {

    var cs = eval('(' + d + ')');
    $('#cc').combotree('loadData', cs);
    $('#cc').combotree('setValue', "请选择要关联的数据");
   }

  });

  $('#showGroup').dialog('open');
 }
 function remove() {
  var node = $('#tt2').tree('getSelected');
  $('#tt2').tree('remove', node.target);
  $.ajax({
   url : '${ctx}/tree/delete',
   type : 'POST',
   async : false,
   data : {
    'id' : node.id
   },
   success : function(data) {

    if (data == 0) {

     window.location.reload();
    } else {
     alert("删除出错");
    }

   }

  });

 }
 function update() {
  var node = $('#tt2').tree('getSelected');
  $("#menuId").val(node.id);
  $('#showGroup').dialog({
   width : 500,
   height : 600,
   modal : true,
   buttons : [ {
    text : 'Update',
    handler : function() {
     Update();
    }
   }, {
    text : 'Close',
    handler : function() {
     $('#cc').combotree('clear');
     $("#saveTextName").val('');
     $('#showGroup').dialog('close');
    }
   } ]
  });
  $.ajax({
   url : '${ctx }/tree/getVipLevelAndRoomType',
   type : 'POST',
   async : false,
   data : {
    'id' : node.id
   },
   success : function(d) {
    var cs = eval('(' + d + ')');

    $('#cc').combotree('loadData', cs);
    //$('#cc').combotree('setValues', "请选择要关联的数据");
   }

  });
  $.ajax({
   url : '${ctx }/tree/getText',
   type : 'POST',
   async : false,
   data : {
    'id' : node.id
   },
   success : function(d) {
    //alert(d);
    var jsonData = eval('(' + d + ')');
    //alert(jsonData);
    // var id = $("#menuId").val();
    //alert(jsonData.menuUrl);
    $("#padType").val(jsonData.type);
    //$("#isVisible").val(jsonData.isVisible);
    $("#isVisible option[text='" + jsonData.isVisible + "']").attr(
      "selected", true);
    //$("#isAuthorized").val(jsonData.);
    $("#isAuthorized option[text='" + jsonData.isAuthorized + "']")
      .attr("selected", true);
    $("#position").val(jsonData.position);
    //("#desc").val(jsonData.);
    $("#defaultResURI").val(jsonData.menuUrl);
    $("#smallResURI").val(jsonData.smallResURI);
    $("#bigResURI").val(jsonData.bigResURI);
    $("#bgDefault").val(jsonData.bgDefault);
    $("#bgPressed").val(jsonData.bgPressed);
    $("#serviceType").val(jsonData.serviceType);
    $("#saveTextName").val(jsonData.name);
    $("#desc").val(jsonData.menuDesc);
    $("#serviceContent").val(jsonData.serviceContent);
    //英
    $("#en_name").val(jsonData.en_name);
    $("#en_desc").val(jsonData.en_menu_desc);
    $("#en_serviceContent").val(jsonData.en_service_content);
    //法
    $("#fr_name").val(jsonData.fr_name);
    $("#fr_desc").val(jsonData.fr_menu_desc);
    $("#fr_serviceContent").val(jsonData.fr_service_content);
    //德
    $("#de_name").val(jsonData.de_name);
    $("#de_desc").val(jsonData.de_menu_desc);
    $("#de_serviceContent").val(jsonData.de_service_content);
    //日
    $("#ja_name").val(jsonData.ja_name);
    $("#ja_desc").val(jsonData.ja_menu_desc);
    $("#ja_serviceContent").val(jsonData.ja_service_content);
    //俄
    $("#ru_name").val(jsonData.ru_name);
    $("#ru_desc").val(jsonData.ru_menu_desc);
    $("#ru_serviceContent").val(jsonData.ru_service_content);

    $("#arg0").val(jsonData.arg0);
    $("#arg1").val(jsonData.arg1);

    $("#shortCutMenu").val(jsonData.shortMenu);
   }

  });
  $('#showGroup').dialog('open');
 }
 function isLeaf() {
  var node = $('#tt2').tree('getSelected');
  var b = $('#tt2').tree('isLeaf', node.target);
  alert(b)
 }
 function Save() {
  //英语
  var en_name = $("#en_name").val();
  var en_desc = $("#en_desc").val();
  var en_serviceContent = $("#en_serviceContent").val();
  //德语
  var de_name = $("#de_name").val();
  var de_desc = $("#de_desc").val();
  var de_serviceContent = $("#de_serviceContent").val();
  //法语
  var fr_name = $("#fr_name").val();
  var fr_desc = $("#fr_desc").val();
  var fr_serviceContent = $("#fr_serviceContent").val();
  //俄语
  var ru_name = $("#ru_name").val();
  var ru_desc = $("#ru_desc").val();
  var ru_serviceContent = $("#ru_serviceContent").val();
  //日语
  var ja_name = $("#ja_name").val();
  var ja_desc = $("#ja_desc").val();
  var ja_serviceContent = $("#ja_serviceContent").val();

  var val = $('#cc').combotree('getValues');
  var id = $("#menuId").val();
  var textName = $("#saveTextName").val();
  var padType = $("#padType").val();
  var isVisible = $("#isVisible").val();
  var isAuthorized = $("#isAuthorized").val();
  var position = $("#position").val();
  var desc = $("#desc").val();
  var defaultResURI = $("#defaultResURI").val();
  var smallResURI = $("#smallResURI").val();
  var bigResURI = $("#bigResURI").val();
  var bgDefault = $("#bgDefault").val();
  var bgPressed = $("#bgPressed").val();
  var serviceType = $("#serviceType").val();
  var serviceContent = $("#serviceContent").val();
  var arg0 = $("#arg0").val();
  var arg1 = $("#arg1").val();
  var shortCutMenu = $("#shortCutMenu").val();
  if (textName == null || '' == textName) {
   alert("");
  }
  var str = '';
  for ( var i = 0, c = val.length; i < c; i++) {
   if (i < c - 1) {
    str += val[i] + ",";
   } else {
    str += val[i];
   }
  }
  $.ajax({
   url : '${ctx}/tree/save',
   type : 'POST',
   async : false,
   data : {
    'id' : id,
    'val' : str,
    'textName' : textName,
    'type' : padType,
    'isVisible' : isVisible,
    'isAuthorized' : isAuthorized,
    'position' : position,
    'description' : desc,
    'defaultResURI' : defaultResURI,
    'smallResURI' : smallResURI,
    'bigResURI' : bigResURI,
    'bgDefault' : bgDefault,
    'bgPressed' : bgPressed,
    'serviceType' : serviceType,
    'serviceContent' : serviceContent,
    'arg0' : arg0,
    'arg1' : arg1,
    'shortCutMenu' : shortCutMenu,
    'en_name' : en_name,
    'en_desc' : en_desc,
    'en_serviceContent' : en_serviceContent,
    'de_name' : de_name,
    'de_desc' : de_desc,
    'de_serviceContent' : de_serviceContent,
    'fr_name' : fr_name,
    'fr_desc' : fr_desc,
    'fr_serviceContent' : fr_serviceContent,
    'ru_name' : ru_name,
    'ru_desc' : ru_desc,
    'ru_serviceContent' : ru_serviceContent,
    'ja_name' : ja_name,
    'ja_desc' : ja_desc,
    'ja_serviceContent' : ja_serviceContent

   },
   success : function(data) {

    if (data == 0) {
     window.location.reload();
     $('#cc').combotree('clear');
    } else {
     alert("添加出错");
    }

   }

  });

  $('#cc').combotree('clear');
  $('#showGroup').dialog('close');
 }
 function Update() {
  //英语
  var en_name = $("#en_name").val();
  var en_desc = $("#en_desc").val();
  var en_serviceContent = $("#en_serviceContent").val();
  //德语
  var de_name = $("#de_name").val();
  var de_desc = $("#de_desc").val();
  var de_serviceContent = $("#de_serviceContent").val();
  //法语
  var fr_name = $("#fr_name").val();
  var fr_desc = $("#fr_desc").val();
  var fr_serviceContent = $("#fr_serviceContent").val();
  //俄语
  var ru_name = $("#ru_name").val();
  var ru_desc = $("#ru_desc").val();
  var ru_serviceContent = $("#ru_serviceContent").val();
  //日语
  var ja_name = $("#ja_name").val();
  var ja_desc = $("#ja_desc").val();
  var ja_serviceContent = $("#ja_serviceContent").val();
  var val = $('#cc').combotree('getValues');
  var id = $("#menuId").val();
  var textValue = $("#saveTextName").val();
  var padType = $("#padType").val();
  var isVisible = $("#isVisible").val();
  var isAuthorized = $("#isAuthorized").val();
  var position = $("#position").val();
  var desc = $("#desc").val();
  var defaultResURI = $("#defaultResURI").val();
  var smallResURI = $("#smallResURI").val();
  var bigResURI = $("#bigResURI").val();
  var bgDefault = $("#bgDefault").val();
  var bgPressed = $("#bgPressed").val();
  var serviceType = $("#serviceType").val();
  var serviceContent = $("#serviceContent").val();
  var arg0 = $("#arg0").val();
  var arg1 = $("#arg1").val();
  var shortCutMenu = $("#shortCutMenu").val();
  if (textValue == null || textValue == '') {
   alert("哎哟,菜单名称不能为空!!");
   return;
  }
  var str = '';
  for ( var i = 0, c = val.length; i < c; i++) {
   if (i < c - 1) {
    str += val[i] + ",";
   } else {
    str += val[i];
   }
  }
  $.ajax({
   url : '${ctx}/tree/update',
   type : 'POST',
   async : false,
   data : {
    'id' : id,
    'textValue' : textValue,
    'val' : str,
    'type' : padType,
    'isVisible' : isVisible,
    'isAuthorized' : isAuthorized,
    'position' : position,
    'description' : desc,
    'defaultResURI' : defaultResURI,
    'smallResURI' : smallResURI,
    'bigResURI' : bigResURI,
    'bgDefault' : bgDefault,
    'bgPressed' : bgPressed,
    'serviceType' : serviceType,
    'serviceContent' : serviceContent,
    'arg0' : arg0,
    'arg1' : arg1,
    'shortCutMenu' : shortCutMenu,
    'en_name' : en_name,
    'en_desc' : en_desc,
    'en_serviceContent' : en_serviceContent,
    'de_name' : de_name,
    'de_desc' : de_desc,
    'de_serviceContent' : de_serviceContent,
    'fr_name' : fr_name,
    'fr_desc' : fr_desc,
    'fr_serviceContent' : fr_serviceContent,
    'ru_name' : ru_name,
    'ru_desc' : ru_desc,
    'ru_serviceContent' : ru_serviceContent,
    'ja_name' : ja_name,
    'ja_desc' : ja_desc,
    'ja_serviceContent' : ja_serviceContent
   },
   success : function(data) {

    if (data == 0) {
     $('#cc').combotree('clear');

    } else {
     alert("更新节点文本信息失败");
    }

   }

  });
  $('#cc').combotree('clear');
  $('#showGroup').dialog('close');
  window.location.reload();
 }
</script>
<script type="text/javascript">
 $(function() {
  var id = parseInt("0");
  $.ajax({
   url : '${ctx}/tree/showEasyUITree',
   type : 'POST',
   async : false,
   data : {
    'id' : id
   },
   success : function(data) {
    var jsonData = eval('(' + data + ')')
    $('#tt2').tree({
     'data' : jsonData,
     //url:'${ctx}/tree/showEasyUITree?id='+id,
     onDrop : function(targetNode, source, point) {
      var targetId = $(this).tree('getNode', targetNode).id;
      $.ajax({
       url : '${ctx}/tree/dropMove',
       type : 'POST',
       async : false,
       data : {
        'target' : targetId,
        'source' : source.id
       },
       success : function(data) {
        if (data == 0) {
         window.location.reload();
        } else {
         alert("更新节点文本信息失败");
        }

       }

      });
     },
     onAfterEdit : function(node) {
      $(this).tree('enableDnd');
      $.ajax({
       url : '${ctx}/tree/updateText',
       type : 'POST',
       async : false,
       data : {
        'id' : node.id,
        'textValue' : node.text
       },
       success : function(data) {
        if (data == 0) {
         window.location.reload();
        } else {
         alert("更新节点文本信息失败");
        }

       }

      });
     },
     onDblClick : function(node) {
      $(this).tree('disableDnd');
      $(this).tree('beginEdit', node.target);

     },
     onBeforeEdit : function(node) {

     }
    });
   }

  });
 });
</script>
</head>
<body>
 <p>Cpad菜单管理</p>
 <input type="hidden" id="menuId">
 <ul id="tt2" class="easyui-tree"
  data-options="checkbox:false,animate:true,dnd:true,
   onClick: function(node){
    $(this).tree('toggle', node.target);
   },
              
              
   onContextMenu: function(e,node){
    e.preventDefault();
    $(this).tree('select',node.target);
    $('#mm').menu('show',{
     left: e.pageX,
     top: e.pageY
    });
   }"></ul>

 <div id="mm" class="easyui-menu" style="width: 120px;">
  <div onclick="append()" data-options="iconCls:'icon-add'">添加节点</div>
  <div onclick="remove()" data-options="iconCls:'icon-remove'">删除节点</div>
  <div onclick="update()" data-options="iconCls:'icon-update'">更新节点</div>
  <div onclick="detail()" data-options="iconCls:'icon-update'">详细信息</div>
  <div class="menu-sep"></div>
  <div onclick="expand()">展开</div>
  <div onclick="collapse()">折叠</div>
 </div>
 <div id="showGroup" class="easyui-dialog"
  data-options="iconCls:'icon-save',modal:true,closed:true">

  <div style="border-top: 10">
   <%
    for (String s : lan) {

     switch (s) {
      case "zh-cn": {
   %>
   中文名称 :<input class="easyui-validatebox" type="text" name="name"
    id="saveTextName" data-options="required:true" /><br> 中文描述:<input
    class="easyui-validatebox" type="text" name="desc" id="desc" /><br>
   中文服务内容:<input class="easyui-validatebox" type="text"
    name="serviceContent" id="serviceContent" /><br>
   <%
    break;
      }
      case "en-us": {
   %>
   英文名称 :<input class="easyui-validatebox" type="text" name="en_name"
    id="en_name" data-options="required:true" /><br> 英文描述:<input
    class="easyui-validatebox" type="text" name="en_desc" id="en_desc" /><br>
   英文服务内容:<input class="easyui-validatebox" type="text"
    name="en_serviceContent" id="en_serviceContent" /><br>

   <%
    break;
      }
      case "de": {
   %>
   德语名称 :<input class="easyui-validatebox" type="text" name="de_name"
    id="de_name" data-options="required:true" /><br> 德语描述:<input
    class="easyui-validatebox" type="text" name="de_desc" id="de_desc" /><br>
   德语服务内容:<input class="easyui-validatebox" type="text"
    name="de_serviceContent" id="de_serviceContent" /><br>

   <%
    break;
      }
      case "ru": {
   %>
   俄语名称 :<input class="easyui-validatebox" type="text" name="ru_name"
    id="ru_name" data-options="required:true" /><br> 俄语描述:<input
    class="easyui-validatebox" type="text" name="ru_desc" id="ru_desc" /><br>
   俄语服务内容:<input class="easyui-validatebox" type="text"
    name="ru_serviceContent" id="ru_serviceContent" /><br>

   <%
    break;
      }
      case "ja": {
   %>
   日语名称 :<input class="easyui-validatebox" type="text" name="ja_name"
    id="ja_name" data-options="required:true" /><br> 日语描述:<input
    class="easyui-validatebox" type="text" name="ja_desc" id="ja_desc" /><br>
   日语服务内容:<input class="easyui-validatebox" type="text"
    name="ja_serviceContent" id="ja_serviceContent" /><br>

   <%
    break;
      }
      case "fr": {
   %>
   法语名称 :<input class="easyui-validatebox" type="text" name="fr_name"
    id="fr_name" data-options="required:true" /><br> 法语描述:<input
    class="easyui-validatebox" type="text" name="fr_desc" id="fr_desc" /><br>
   法语服务内容:<input class="easyui-validatebox" type="text"
    name="fr_serviceContent" id="fr_serviceContent" /><br>

   <%
    break;
      }
     }
    }
   %>
   <!--  <input type="checkbox" checked onclick="$('#cc').combotree({cascadeCheck:$(this).is(':checked')})">  -->
   级别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型<select id="cc"
    class="easyui-combotree" multiple style="width: 200px;"></select><br>
   Type类型 :<input class="easyui-validatebox" type="text" name="padType"
    id="padType" data-options="required:true" /><br> isVisible是否可见<select
    id="isVisible">
    <option value="1" selected="selected">1</option>
    <option value="0">0</option>
   </select><br> isAuthorized是否授权<select id="isAuthorized">
    <option value="1" selected="selected">1</option>
    <option value="0">0</option>
   </select><br> shortCutMenu是否快捷菜单<select id="shortCutMenu">
    <option value="0" selected="selected">0</option>
    <option value="1">1</option>
   </select><br> position位置 :<input class="easyui-validatebox" type="text"
    name="position" id="position" /><br> defaultResURI默认资源 :<input
    class="easyui-validatebox" type="text" name="defaultResURI"
    id="defaultResURI" /><br> smallResURI:<input
    class="easyui-validatebox" type="text" name="smallResURI"
    id="smallResURI" /><br> bigResURI:<input
    class="easyui-validatebox" type="text" name="bigResURI"
    id="bigResURI" /><br> bgDefault默认背景:<input
    class="easyui-validatebox" type="text" name="bgDefault"
    id="bgDefault" /><br> bgPressed按下背景:<input
    class="easyui-validatebox" type="text" name="bgPressed"
    id="bgPressed" /><br> serviceType服务类型:<input
    class="easyui-validatebox" type="text" name="serviceType"
    id="serviceType" /><br> 备用参数1:<input
    class="easyui-validatebox" type="text" name="arg0" id="arg0" /><br>
   备用参数2:<input class="easyui-validatebox" type="text" name="arg1"
    id="arg1" /><br>
  </div>

 </div>
 <div id="win" class="easyui-window" title="详细信息"
  style="width: 200px; height: 400px"
  data-options="modal:true,closed:true,minimizable:false,maximizable:false,collapsible:false">
  <table id="dg"></table>
 </div>
</body>
</html>