图片 2

但是不知为什么这个插件没有自带双击事件,实现上述数据需要维护的数组和对象

数组对象templates包含:

实现功能四(维护template数据)

1.正在编辑的editingTemplate
2.当前层级选中的所有selectedNodeId
3.展示需要的字符串数组selectedNodeName
3.存储字符串数组selectedAreaId对应数据库中的areaId
4.将上面的三个数组存入template,并将template push进入templates

逻辑

1.获取到所有的被选中的元素
2.遍历所有的元素
判断当前节点是否有nodes(即子元素),如果有则直接操作,并改变index,将其子元素全部跳过,将节点名称保存进areaNames,如”安徽”
3.遍历所有的元素
如果没有子元素,取出父级元素如”北京(“,将node元素添加至后面,如”北京(昌平区”,判断下一个元素的父节点是否发生改变,如果发生改变则结束维护字符串为”北京(昌平区)”,并将其添加至areaNames,继续遍历下一个节点
4.其他三个数组在遍历的同时维护


您可能感兴趣的文章:

  • jquery ui bootstrap 实现自定义风格
  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基…

target

编辑过程中维护的数据

开发条件:

安装bootstrap-treeview插件,具体操作见:
bootstrap-treeview

bootstrap-treeview自定义双击事件实现方法,bootstraptreeview

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter
Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。但是不知为什么这个插件没有自带双击事件。
经过多次测试,使用方法$(‘#tree’).dblclick( function ()
{})和方法$(‘#tree’).on(‘dblclick’,function(){})都不起作用!百思不得其解。最后救助大神,问题解决了,但是好像不太优雅但最终还是可以交差了。
这个解决方案中使用到了bootstrap-treeview自带的两个事件”nodeSelected”和”nodeUnselected”.如果在treeview的节点上双击一定会触发选中事件和取消选中事件,计算这两个时间的时间间隔就可以模拟出双击事件的效果了。双击事件每次点击鼠标左键的间隔,人为操作300毫秒足够。
具体代码如下:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
  </head>

  <body>
    <div id="tree" style="width: 400px;height: 1000px;margin-left: auto;margin-right: auto;"></div>
    <div id="testDate"></div>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-treeview.js"></script>
    <script type="text/javascript">
      //获取树形结构列表数据
      function getTree() {
        var tree = [{
          text: "Parent 1",
          nodes: [{
            text: "Child 1",
            nodes: [{
              text: "Grandchild 1"
            }, {
              text: "Grandchild 2"
            }]
          }, {
            text: "Child 2"
          }]
        }, {
          text: "Parent 2"
        }, {
          text: "Parent 3"
        }, {
          text: "Parent 4"
        }, {
          text: "Parent 5"
        }];
        return tree;
      }

      //初始化树形结构列表
      $('#tree').treeview({
        data: getTree()
      });

      //最后一次触发节点Id
      var lastSelectedNodeId = null;
      //最后一次触发时间
      var lastSelectTime = null;

      //自定义业务方法
      function customBusiness(data){
        alert("双击获得节点名字: "+data.text);
      }

      function clickNode(event, data) {
        if (lastSelectedNodeId && lastSelectTime) {
          var time = new Date().getTime();
          var t = time - lastSelectTime;
          if (lastSelectedNodeId == data.nodeId && t < 300) {
            customBusiness(data);
          }
        }
        lastSelectedNodeId = data.nodeId;
        lastSelectTime = new Date().getTime();
      }

      //自定义双击事件
      function customDblClickFun(){
        //节点选中时触发
        $('#tree').on('nodeSelected', function(event, data) {
          clickNode(event, data)
        });
        //节点取消选中时触发
        $('#tree').on('nodeUnselected', function(event, data) {
          clickNode(event, data)
        });
      }
      $('#tree').dblclick( function () { alert("Hello World!"); });
      $(document).ready(function() {
        //customDblClickFun();
      });
    </script>
  </body>

</html>

粗滤讲解:

最主要的全局变量:lastSelectedNodeId,lastSelectedNodeId

最主要的方法:clickNode()

上面这个方法主要用来判断选中事件和取消选中事件操作的目标是否是一个且时间间隔是否足够小。符合这两个条件客户就是想触发双击事件。可以再函数customBusiness中自定义业务逻辑。

以上就是本文的详细内容,希望对大家的学习有所帮助。

target

实现功能:

实现功能一

一个模板指定多个子模板
主要是维护templates[]数组 push进入多个template即可
下面会详细讲解如何维护template


array

4.其他三个数组在遍历的同时维护实现结果展示:

实现结果展示:

1.主页面展示:

图片 1

主页面.png

2.tree展示:

图片 2

选择地区.png


小结

本文提供简单的实现方案思路,具体的代码根据业务实现,不足之处不能动态处理数据源,优点bootstrap开放的api接口较多,可自定义实现。

method

可以封装为一个方法selectAllChildren()

实现功能:

1.一个模板可指定子模板(包含多个地区、价格等)
2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的地区默认选中)
3.tree选择时,父级和子集的联动(如父级选中子集全部选中,取消一个子集的时候,父级也取消)
4.维护子模板数据(展示选中的地区格式 如(安徽、北京(昌平 回龙观))
存储选中节点)

其他说明

数据源格式:[{text:’展示名称1′,nodes:[{text:’子级’}]},{text:’展示名称2′}]
bootstrap-trview会动态的为数据源添加nodeId,parentId这两个属性(很重要的属性),可自定义添加其他属性用来标记当前节点


编辑过程中维护的数据

数组对象templates包含:
1.模板的名称
2.每个子模板对应的 价格 件数 排序
3.子模板的地区Id、节点id、展示名称

实现上述数据需要维护的数组和对象

var templates = []; //保存最终储存的数据
var selectedNodeId = []; //用来存储单个模板选择的nodeId 用于展示
var editingTemplate = null; //用于标记正在处理的是第几个地区模板
var selectedAreaId = []; //保存当前选择的地区
var selectedAreaName = []; //保存当前选中的地区名称用于展示
var defaultData = [];//数据源


target

取消选中的方法$.treeview(‘uncheckNode’, [ nodeId, { silent: true } ]);

实现功能二(动态修改tree)

原理:通过维护的templates和editingTemplate
拿到当前编辑的子模板数据和其他子模板数据,将当前模板的node默认选中,其他的数据置为disabled

编辑子模板

uncheckAll方法:$('#tree').treeview('uncheckAll', { silent: true });
disAbled方法:$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);
默认选中的方法$('#tree').treeview('checkNode', [ template.nodeIds[i], { silent: true } ]);


expandTo

2.遍历所有的元素
判断当前节点是否有nodes,如果有则直接操作,并改变index,将其子元素全部跳过,将节点名称保存进areaNames,如”安徽”


onDrop

判断父节点中的子节点是否全部选中如果全部选中则将父节点选中

实现功能三:父级和子级的联动(主要操作在点击选中和取消选中上面 来分析两种情况)

第一种 选中

1.选择父节点 将子节点全部选中
根据父节点返回的nodes得到所有的子节点 并且将子节点全部选中
选中的方法$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);
可以封装为一个方法selectAllChildren()

2.如果选中的为子节点
判断父节点中的子节点是否全部选中如果全部选中则将父节点选中

第二种 取消

1.选中的为父节点,将所有的子节点取消选中
取消选中的方法$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);

2选中的为子节点,判断父节点中的子节点是否选中 如果选中 则取消选中

判断是否选中的方法

$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);
根据获取到元素获取是否选中


名称

1.选择父节点 将子节点全部选中

展开所有的节点们。

原理:通过维护的templates和editingTemplate
拿到当前编辑的子模板数据和其他子模板数据,将当前模板的node默认选中,其他的数据置为disabled

update

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter
Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。

onAfterEdit

1.一个模板可指定子模板

当数据加载成功时触发。

var templates = []; //保存最终储存的数据var selectedNodeId = []; //用来存储单个模板选择的nodeId 用于展示var editingTemplate = null; //用于标记正在处理的是第几个地区模板var selectedAreaId = []; //保存当前选择的地区var selectedAreaName = []; //保存当前选中的地区名称用于展示var defaultData = [];//数据源

定义是否启用拖放。

第一种 选中

false

默认选中的方法$.treeview(‘checkNode’, [ template.nodeIds[i], {
silent: true } ]);

id

4.维护子模板数据(展示选中的地区格式 如 存储选中节点)

boolean

本文提供简单的实现方案思路,具体的代码根据业务实现,不足之处不能动态处理数据源,优点bootstrap开放的api接口较多,可自定义实现。

onSelect

bootstrap-treeview

getChecked

bootstrap-trview会动态的为数据源添加nodeId,parentId这两个属性,可自定义添加其他属性用来标记当前节点

nodeEl

数据源格式:[{text:’展示名称1′,nodes:[{text:’子级’}]},{text:’展示名称2′}]

onDblClick

2.如果选中的为子节点

跟心指定的节点, param
参数有下列特性:target、id、text、iconCls、checked、等等。

3.tree选择时,父级和子集的联动(如父级选中子集全部选中,取消一个子集的时候,父级也取消)

启用拖放功能。

$.treeview('selectNode', [ nodeId, { silent: true } ]);

事件

4.将上面的三个数组存入template,并将template push进入templates

data

实现上述数据需要维护的数组和对象

名称

实现功能二

当用户双击一个节点时触发。

uncheckAll方法:$.treeview(‘uncheckAll’, { silent: true });

获取指定的节点对象。

2选中的为子节点,判断父节点中的子节点是否选中 如果选中 则取消选中

boolean

disAbled方法:$.treeview(‘disableNode’, [ nodeId, { silent: true } ]);

target

2.当前层级选中的所有selectedNodeId

重新加载树的数据。

其他说明

元素里定义,此标记可以定义为叶节点和子节点。下面是一个示例: 复制代码 代码如下:

2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的地区默认选中)

collapseAll

安装bootstrap-treeview插件,具体操作见:

nodeEl

1.正在编辑的editingTemplate

nodeEl

根据获取到元素获取是否选中

node

实现功能三:父级和子级的联动(主要操作在点击选中和取消选中上面
来分析两种情况)

target

3.展示需要的字符串数组selectedNodeName

加载树的数据。

一个模板指定多个子模板

onClick

1.获取到所有的被选中的元素

onlyLeafCheck

开发条件:

把指定节点设置为未勾选。

选中的方法$.treeview(‘checkNode’, [ nodeId, { silent: true } ]);

node

小结

boolean

2.每个子模板对应的 价格 件数 排序

当加载数据的请求发出前触发,返回 false 就取消加载动作。

1.选中的为父节点,将所有的子节点取消选中

说明

根据父节点返回的nodes得到所有的子节点 并且将子节点全部选中

node

3.存储字符串数组selectedAreaId对应数据库中的areaId

target

以上所述是小编给大家介绍的使用BootStrap
TreeView插件实现灵活配置快递模板,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

getNode

实现功能一

获取数据的 http method 。

第二种 取消

enableDnd

3.子模板的地区Id、节点id、展示名称

cancelEdit

3.遍历所有的元素
如果没有子元素,取出父级元素如”北京(“,将node元素添加至后面,如”北京(昌平区”,判断下一个元素的父节点是否发生改变,如果发生改变则结束维护字符串为”北京”,并将其添加至areaNames,继续遍历下一个节点

boolean

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章