使用zTree在form表单中提交和修改回显

最新推荐文章于 2023-12-22 17:18:44 发布

李哈ha

最新推荐文章于 2023-12-22 17:18:44 发布

阅读量1.1k

点赞数 1

分类专栏：前端学习文章标签： zTree权限修改回显

本文链接：https://blog.csdn.net/qq_43049310/article/details/84786320

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ 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>

李哈ha

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用zTree在form表单中提交和修改回显

&amp;lt;%@ page contentType=“text/html;charset=UTF-8” language=“java” %&amp;gt;&amp;lt;%@taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %&amp;gt; Title /从后台穿过来的List集合，使用拼接...
复制链接

扫一扫

专栏目录