使用zTree在form表單中提交和修改回顯
阿新 • • 發佈：2018-12-07
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>Title</title> </head> <body> <form id="add" method="post"> <input type="hidden" name="id" value="${device.id}"><br> <c:set var="deptId" value=""></c:set> <c:forEach items="${deptIds}" var="dd"> <c:set var="deptId" value="${deptId},${dd.deptId}"></c:set> /從後臺穿過來的List集合，使用拼接，保證Controller抓參知道一個deptIds </c:forEach> <input type="text" name="deptIds" value="${deptId!=""?deptId.substring(1):""}"> 裝置名稱:<input type="text" class="easyui-textbox" name="dname" value="${device.dname}"><br/> 裝置型別：<input type="text" class="easyui-combobox" name="typeId" id="typecombobox" value="${device.typeId}"><br/> 裝置庫存：<input type="text" class="easyui-numberbox" name="stock" value="${device.stock}"><br> 裝置價格:<input type="text" class="easyui-numberbox" name="price" value="${device.price}"><br> 裝置分配:<ul id="treeDemo" class="ztree"></ul> </form> <script> var treeObj;//定義了一全域性的值，這個不重要 $("#typecombobox").combobox({ url:'${pageContext.request.contextPath}/type/list', valueField:'id', textField:'typeName' }); // var setting={ async:{//非同步載入模式 enable:true,//開啟非同步載入模式 url:'${pageContext.request.contextPath}/dept/list' }, check:{ enable:true }, data:{ simpleDate:{ enable:true, idKey:'id', pIdKey:'pid', }, key:{ name:'deptName', } }, callback:{ onAsyncSuccess:function(event,treeId,treeNode){//此處修改 的回顯， var arr=$("input[name=deptIds]");//當前是一個Dom物件 var ids = arr[0].value.split(","); console.log(ids) var ztreeObj = $.fn.zTree.getZTreeObj("treeDemo"); for(var i=0;i<ids.length;i++){ var node = ztreeObj.getNodeByParam("id",ids[i]); console.log(node) if (node != null)//判斷弄得不為空的時候選中 ztreeObj.checkNode(node,true,false); } }, onCheck:function(event,treeId,treeNode){//此處新增 var nodes=treeObj.getCheckedNodes(true); var arr=[]; for(var i=0;i<nodes.length;i++){ arr.push(nodes[i].id) } console.log(arr) var did=arr.join(","); $("input[name=deptIds]").val(did); } } }; treeObj= $.fn.zTree.init($("#treeDemo"),setting); $("#add").form({ url:'${pageContext.request.contextPath}/device/add', onSubmit:function(){ return $("#add").form("validate") }, success:function(data){ if(typeof data=='string'){ data=JSON.parse(data) } if(data.status==200){ $.messager.alert("訊息提醒","操作成功") $("#add-dialog").dialog("destroy"); $("#list-btn").datagrid("reload") }else{ $.messager.alert("訊息提醒","操作失敗") } } }) </script> </body> </html>