zoukankan      html  css  js  c++  java
  • zTree ------依靠 jQuery 实现的多功能 “树插件”

    首先看一下这是个什么东西,这是我自己用到的一个模型。

    想多了解下,可以看下官方的文档 http://www.treejs.cn/v3/main.php#_zTreeInfo

    然后我做的操作的业务是一级代理跟二级代理的操作,还涉及到插入新记录的问题,所以这方面很绕,跟同事一块弄了好几天,现在记录下的同时,也希望能给有需要的人有点启示。

    首先这个树状结构是通过查询数据库得来的,具体怎么来的,可以看下别的文章。

    我的任务就是要获取选中的代理的id,然后拼起来,传到后台去解析为数组,然后遍历数组对一级和二级代理分别插入记录。

    下面附上代码

    function zTreeOnCheck(event, treeId, treeNode) {
    var selected = tree.getCheckedNodes(true);
    var parentId="";
    var childId="";
    var parentIdsOneToMany="";
    $.each(selected, function (index, ele) {
    if (myTools.isNotNull(ele.pId)) {
    //二级
    if(childId.indexOf(ele.id)== -1){
    childId += ele.id+ ",";
    parentIdsOneToMany += ele.pId + ",";
    }
    }else if(myTools.isNull(ele.pId)){
    if(parentId.indexOf(ele.id)==-1){
    parentId += ele.id+ ",";
    }
    }
    });
    $("#parentId").val(parentId);
    $("#childId").val(childId);
    $("#parentIdsOneToMany").val(parentIdsOneToMany);
    }`

    循环迭代选中的节点,因为我是需要分别将一级和二级的代理id传到后台,所以我要判断它是一级还是二级的,至于parentIdsOneToMany 是因为它可能对应的关系是一对多(一个一级下面有多个二级),这个问题是得到解决了,但是又提出来一个新需求,就是到选代理树的这一步,用户不操作选中代理,直接点下一步,那将默认选中所有的代理。然后又想了很久,一开始想去数据库中查,感觉麻烦,而且查出来的可能不是有对应关系的,所以只能考虑在页面中去判断并且赋值传到后台。然后我就搜啊搜,感觉网上找的回答的都不是很详细,不是只扔下个方法名就走了,就是只说下思路而且也不知道对不对,所以我才自己整理了一下。
    还是官方文档最管用啊!!!
    查的官方文档

    附上代码
    var treeObj = $.fn.zTree.getZTreeObj("tree");
    var node = treeObj.getNodes();
    var nodes = treeObj.transformToArray(node);
    $(nodes).each(function (index, nodeIds) {
    if(myTools.isNotNull(nodeIds.pId)){
    //二级
    if(childId.indexOf(nodeIds.id)== -1){
    childId += nodeIds.id+ ",";
    parentIdsOneToMany += nodeIds.pId + ",";
    }
    }else if(myTools.isNull(nodeIds.pId)){
    if(parentId.indexOf(nodeIds.id)==-1){
    parentId += nodeIds.id+ ",";
    }
    }

    其实跟上面的有点重复,我只是来说明这个方法的实现,最主要的就是前三行,那个 tree 呢,就是在页面上要显示的树的div的id
    至于方法得出来的是什么,刚才那张图上面有

    接下来说下根据id来进行勾选的方法,在网上查了很久,才找出来那个方法的,但是当时就是没考虑到看官方文档,不过自己也终于给弄出来了,下面附代码:

    <c:forEach items="${listIds}" var="li" varStatus="a">
      tree.checkNode( tree.getNodeByParam( "id","${li}" ), true );
    </c:forEach>
    

    再附一张官方的方法图:

    作者:有梦想的乌龟·
  • 相关阅读:
    Odoo search 搜索视图详解与搜索视图工作原理
    Odoo treeView列表视图详解
    Odoo视图的共有标签
    Odoo中的字段显示方式和行为控制
    Odoo中的env详解
    Odoo中报表PDF样式出错的解决办法
    odoo Botton标签属性详解
    Odoo甘特图
    Odoo field字段标签属性详解
    Odoo form视图详解
  • 原文地址:https://www.cnblogs.com/nlbnick/p/6701709.html
Copyright © 2011-2022 走看看