对文本输入框的新增和删除

1、第一个应用是对上传文件的新增或者删除

     这个主要是采用的是struts2的框架。

   

  <s:form action="upload" theme="simple" enctype="multipart/form-data">
     <table align="center" border="1" width="50%">
     <tbody id="one">
      <tr>
     <td>  username</td><td> <s:textfield name="username"  label="username"></s:textfield></td>
      </tr>
      <tr>
        <td>password</td><td><s:password name="password" label="password"></s:password></td>
      </tr>
      <tr>
        <td>file</td><td><s:file name="file" label="file"></s:file><input type="button" onclick="add();"    value="新增上传文件"></td>
      </tr>
      </tbody>
     </table>

这里已经有一个可以上传文件、这里通过js可以上传多个文件

 

<script type="text/javascript">
function add()
{
  var tbodyEle = document.getElementById("one");
 
  var trEle = document.createElement("tr");
  var tdEle = document.createElement("td");
  var textEle = document.createTextNode("file");
 
  tdEle.appendChild(textEle);
  trEle.appendChild(tdEle);
 
  tdEle=document.createElement("td");
  var inputEle=document.createElement("input");
  inputEle.name="file";
  inputEle.type="file";
  tdEle.appendChild(inputEle);
 
  var inputEle = document.createElement("input");
  inputEle.value="删除";
  inputEle.type="button"
  inputEle.onclick=function()
  {
  tbodyEle.removeChild(trEle);
  }
  tdEle.appendChild(inputEle);
 
  trEle.appendChild(tdEle);
  tbodyEle.appendChild(trEle);
}

</script>

   

这里在后台的action中可以通过    private List<File> file;//这里是定义可以上传多个文件

 

2、第二个应用是订单和明细的应用

  <body>
    <table align="center" border="1" width="600">
       <tr align="center">
         <td>订单名称</td><td><input name="info.ordername" /></td>
       </tr>
       <tr align="center">
         <td>订单数量</td><td><input name="num"  onclick="addnum();"/></td>
       </tr>
       <tr align="center">
         <td>总价格</td><td><input name="totalje" onclick="addtotal();"/></td>
       </tr>
       <tr align="center">
         <td>订单日期</td><td> <input name="info.orderdate" /></td>
       </tr>
    </table>
    <p align="center">订单明细(<input type="button" value="添加明细" onclick="addmx();">)</p>
     <div id="container">
     <div>
       <table align="center" width="600" border="1" style="display:inline;">
          <tr align="center">
            <td>产品名称</td><td><input name="items[0].mxname"  size=8></td>
            <td >数量</td><td><input name="items[0].mxnum" size=8 id="num0" ></td>
            <td>单价</td><td><input name="items[0].mxprice" size=8 id="price0"></td>
          </tr>
       </table><input type=button value="删除" onclick="this.parentNode.outerHTML='';i--;alert(i);"/>
       </div>
      </div>  
  </body>

  js代码为:

<script type="text/javascript">
     var i=1;
       function addmx()
       {
         var container = document.getElementById("container");
         var module="<div>"+
                      "<table width=600 border=1 align=center style=\"display:inline;\">"+
                      "<tr align=center>"+
                         "<td>产品名称</td><td><input name=\"items["+i+"].mxname\" size=8 ></td>"+
                         "<td>数量</td><td><input name=\"items["+i+"].mxnum\" size=8 id=num"+i+"></td>"+
                         "<td>单价</td><td><input name=\"items["+i+"].mxprice\" size=8 id=price"+i+"></td>"
                      +"</tr>"
                     +"</table><input type=button value=\"删除\" onclick=\"this.parentNode.outerHTML='';i--;alert(i);\">"
                     +"<div>";
                   
            container.insertAdjacentHTML("beforeEnd",module);
        i++;
       }
     //订单数量
    function addnum(){
      var num = document.getElementById("num");
     
      var t=0;
      for(var p=0;p<i;p++){
       var n = document.getElementById("num"+p).value;
       if(n!=""){
         t=t+parseInt(n);
         }
       }
       num.value=t;
     }
     //总金额
     function addtotal()
      {
        var totalje=0;
        for(var j=0;j<i;j++)
        {
          var numValue=document.all("num"+j).value;
          var priceValue=document.all("price"+j).value;
          if(numValue!=""&&priceValue!="")
             totalje=totalje+parseInt(numValue)*parseFloat(priceValue);;
        } 
        document.all("totalje").value=totalje;
      }
    </script>

 

   在后台action可以用list得到(这个是在struts2的应用)

 

<think>好的,用户想实现树形菜单的修改新增功能。点击修改时,选中的菜单变成输入框,点击新增则在下方添加输入框。我需要结合之前的引用内容来思考解决方案。 首先,引用3提到ztree的配置,里面有编辑相关的设置,比如enable编辑、显示删除重命名按钮。这可能涉及到节点编辑的事件处理。引用4是Java后端实现增删改查的代码,但用户的问题更偏向前端实现。引用5展示了右键菜单的处理,包括获取节点信息、位置,以及触发新增编辑删除的方法。这可能对前端交互有帮助。用户的需求是点击修改让当前节点变为输入框,点击新增在下方添加输入框。可能需要动态修改节点的显示内容,比如将文本替换为输入框,并保存修改后的值。对于新增,可能需要插入新的节点作为子节点或兄弟节点。首先,树形控件需要支持动态编辑。比如ztree或antd的Tree组件。根据引用5,用户可能在使用类似antd的Tree组件,因为代码中有onSelectonRightClick事件,以及处理节点位置的方法。实现步骤可能包括: 1.为每个节点添加修改新增按钮,或者通过右键菜单触发操作。 2.点击修改时,获取当前节点的DOM元素,替换为输入框,并保存修改后的值到数据模型。 3.点击新增时,在当前节点下插入新的节点数据,触发树形组件的重新渲染。4.需要处理数据绑定,确保前端操作能更新到后端,比如通过API调用保存到数据库。对于修改功能,可能需要使用树形组件的编辑功能。例如,ztree的editName属性或自定义render方法。当用户点击修改时,切换节点的显示模式为输入框,并监听输入完成事件(如失焦或回车)来更新数据。对于新增功能,需要在当前节点的children数组中添加新节点,并可能设置其为编辑状态,直接显示输入框。或者插入一个临时节点,待用户输入后保存。引用5中的onRightClick方法可以获取节点信息,包括ID父节点ID,这可能用于确定新增节点的位置。例如,新增时,新节点的parentOrgId就是当前节点的ID,从而作为子节点添加。另外,样式方面,需要定位输入框到正确的位置,引用5中的tmpStyle可能用于右键菜单的定位,但新增输入框可能需要动态插入到DOM中,或者利用树组件本身的节点渲染方法。 数据更新后,需要调用后端的接口,如引用4中的insertupdate方法,来持久化数据。前端在用户确认修改或新增后,发送API请求到后端,确保数据同步。 可能遇到的问题包括节点状态的维护(编辑状态、新增状态)、输入框的焦点管理,以及数据更新后的树形重新渲染。需要确保组件能够响应数据变化,比如使用Vue的响应式数据或React的状态管理。总结步骤:1.树形组件的节点渲染自定义,添加操作按钮。2.处理修改事件,切换节点为输入框,保存数据。 3.处理新增事件,插入新节点并可能进入编辑状态。 4.与后端API交互,保存更改。</think>### 树形菜单编辑新增功能实现步骤 #### 一、前端交互设计 1. **节点渲染自定义** 使用树形控件(如ztree或antd Tree)的自定义渲染功能,在节点右侧添加操作按钮: ```javascript // 以ztree为例,扩展节点DOM结构 function addEditButtons(treeId, treeNode) { const $li = $("#" + treeNode.tId + "_a"); $li.append(`<span class="edit-btn" onclick="editNode('${treeNode.id}')">修改</span>`); $li.append(`<span class="add-btn" onclick="addNode('${treeNode.id}')">新增</span>`); } ``` 2. **修改功能实现** - 点击修改按钮时,将文本替换为输入框: ```javascript function editNode(nodeId) { const $node = $("#" + nodeId + "_span"); // 获取文本元素 const originalText = $node.text(); $node.replaceWith(`<input id="edit-${nodeId}" value="${originalText}" onblur="saveEdit('${nodeId}')">`); document.getElementById(`edit-${nodeId}`).focus(); } ``` - 输入框失焦时保存数据并更新树节点: ```javascript function saveEdit(nodeId) { const newValue = document.getElementById(`edit-${nodeId}`).value; const node = zTreeObj.getNodeByParam("id", nodeId); node.name = newValue; zTreeObj.updateNode(node); // 更新节点显示 // 调用后端接口保存数据(引用4中的update方法) fetch(`/api/menu/${nodeId}`, { method: 'PUT', body: JSON.stringify({ name: newValue }) }); } ``` 3. **新增功能实现** - 点击新增按钮时插入临时节点并进入编辑状态: ```javascript function addNode(parentId) { const newNode = { id: "temp_" + Date.now(), name: "新节点", parentId: parentId, isNew: true }; const parentNode = zTreeObj.getNodeByParam("id", parentId); zTreeObj.addNodes(parentNode, newNode); // 插入到当前节点下方 editNode(newNode.id); // 直接进入编辑状态 } ``` #### 二、后端数据同步(引用4实现) 1. **修改接口** 使用Java服务类处理更新请求: ```java @Override public TMenu update(TMenu tMenu) { this.tMenuMapper.update(tMenu); return this.queryById(tMenu.getId()); } ``` 2. **新增接口** 处理带parentId的新节点插入: ```java @Override public TMenu insert(TMenu tMenu) { if (tMenu.getParentId() == null) { tMenu.setParentId(0); // 默认根节点 } this.tMenuMapper.insert(tMenu); return tMenu; } ``` #### 三、关键实现细节 1. **节点定位与层级关系** - 通过`parentOrgId`确定父子关系(引用5中的`parentOrgId`属性) - 使用ztree的`getNodeByParam`方法快速定位节点 2. **临时节点处理** - 新增时生成临时ID(如`temp_时间戳`),提交后替换为真实ID - 提交失败时自动回滚节点 3. **防抖与异步处理** ```javascript // 输入框保存时添加防抖 let saveTimer; function saveEdit(nodeId) { clearTimeout(saveTimer); saveTimer = setTimeout(() => { // 异步保存逻辑 }, 500); } ``` #### 四、效果优化建议 1. **右键菜单集成**(引用5实现) ```javascript onRightClick({ event, node }) { showContextMenu(event.clientX, event.clientY, [ { label: '修改', action: () => editNode(node.id) }, { label: '新增子菜单', action: () => addNode(node.id) } ]); } ``` 2. **节点拖拽排序** 启用ztree的拖拽配置(引用3中的`drag`配置): ```javascript var setting = { edit: { enable: true, drag: { isMove: true } } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值