帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery可视化树结构视图插件,支持JSON或XML数据

帝国模板之家 2020-11-13 网页特效 评论

这是一款基于jQuery实现的树视图插件,可定制,易于使用,适用于可视化分层树结构中,支持JSON或XML数据类型。

使用方法:

1.创建一个容器来保存树。

<div id="tree"></div>

2.在HTML页面中加载数据树插件的文件。

<link rel="stylesheet" href="data-tree.css" />
<script src="jquery.min.js"></script>
<script src="data-tree.js"></script>

3.初始化数据树并指定JSON或XML数据源的路径。

// XML
new DataTree({
    fpath: 'xml.xml',
    container: '#tree'
});

// JSON
new DataTree({
    fpath: 'xml.xml',
    container: '#tree'
    json: true
});

// fetch data from a web service
new DataTree({
    fpath: 'web_service.php?level=root',
    container: '#tree'
});

4. 自定义树的完整配置。

new DataTree({
    // how attributes should behave in the resultant
    // 'show', 'hide', or 'ignore'
    attrs: 'show',

    // pass true to apply this to all attributes,
    // or an array of attribute names.
    attrsAsClasses: true,

    // identical to attrsAsClasses, except attributes will become jQuery data 
    // i.e. accessible via .data())on the element rather than classes.
    attrsAsData: true,

    // whether to allow caching on the root-level data request
    cache: true,

    // container to hold the tree
    container: '',

    // path to the JSON or XML data
    fpathL: '',

    // whether or not to show the names of nodes in the tree
    hideNodeNames: false,

    // a boolean, if you're loading data over a web service (via fpath), which tells DataTree to conver the JSON response to XML before output
    // or a literal JSON string of JavaScript object from which to generate the tree - the JSON equivalent to xml
    json: '',

    // pass XML string here
    xml: '',

    // pass true if you are loading your XML over JSON-P rather than locally
    jsonp: false,

    // if true, sub-tree request responses will be cached and not re-fetched from the server should the same sub-tree request be triggered again later
    noSubTreeCache: false,

    // if true, the steps taken navigating the tree will not be logged in the URL hash.
    // this means the tree returns to its original state on page refresh
    noURLTracking: false,

    // open the tree at a specific node
    openAtPath: '',

    // whether the tree should be fully expanded when the page loads
    startExpanded: false,

    // load more data when expanded
    subTreeBranches: '',

    // invoked when a user clicks the plus/minus link next to a node, i.e. expands or collapses it. Your callback function will automatically be passed 4 arguments:
    // event (event object) - a jQuery click event object.
    // li (jQuery object) - a jQuery reference to the node LI
    // li (jQuery object) - a string, either 'open' or 'close', depending on whether the corresponding node LI's children are currently visible or hidden
    // XPath (string) - the XPath of the node LI.
    plusMinCallback: function(event, li, li, XPath){},

    // click callback
    // it receives the same data as above, except the 4th argument.
    clickCallback: function(event, li, li){},

    // it is automatically passed a jQuery reference to the tree ul as its only argument.
    renderCallback: function(event){},

    // invoked when a sub-tree branch (see subTreeBranches) is expanded
    // return the URL to the XML to load into it
    // it is automatically passed a jQuery reference to the clicked LI as its only argument.
    subTreeRequest: function(){},

    // useful if you want to tweak the XML before tree output starts to be generated.
    XMLCallback: function(event){},

});

5. 获取与选择器相关的XML node/JS对象。

instance.getNode(selector);

6. 跳转到树的特定分支。

instance.jumpTo(selector, closeOthers);

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言