zoukankan      html  css  js  c++  java
  • jQuery.treetable使用及异步加载

    Usage

    1 GitHub 地址 https://github.com/ludo/jquery-treetable/

    2 API 地址 http://ludo.cubicphuse.nl/jquery-treetable/

    3 jQuery 官网链接 http://plugins.jquery.com/treetable/

    引入代码:

    <link href="path/to/jquery.treetable.css" rel="stylesheet" type="text/css" /> <script src="path/to/jquery.treetable.js"></script> <script> $("#your_table_id").treetable(); </script>

    注意事项:

    1  在表格中展示树,每个tr 须拥有 data-tt-id 属性,且属性值必须唯一

    When you pasted the above code and adjusted it to reflect your situation, you enabled the possibility of displaying a tree in your table. To make the tree actually display as a tree you have to add data-tt-id and data-tt-parent-id attributes to your table rows (tr).

    2  每个子节点必须有一个 data-tt-parent-id  属性,data-tt-parent-id 的值必须等于 父节点的data-tt-id 值 
    3  表格中行的展示必须按照树的展开顺序来,即传递过来的List必须是有序的,且与树展开后的顺序一致

    Please note that the plugin expects the rows in the HTML table to be in the same order in which they should be displayed in the tree. For example, suppose you have three nodes: A, B (child of node A) and C (child of node B). If you create rows for these nodes in your HTML table in the following order A - C - B, then the tree will not display correctly. You have to make sure that the rows are in the order A - B - C.

    表格HTML代码示例:

    <table>   <tr data-tt-id="1">     <td>Parent</td>   </tr>   <tr data-tt-id="2" data-tt-parent-id="1">     <td>Child</td>   </tr> </table>

    Configuration

    Settings

    Setting

    Type

    Default

    Description

    branchAttr

    string

    "ttBranch"

    可选,强制打开节点的展开图标,允许将一个没有儿子节点的节点定义为分支节点,在HTML里面以data-tt-branch 属性形式展现.

    clickableNodeNames

    bool

    false

    默认false,点击展开图标打开子节点。设置为true时,点击节点名称也打开子节点.

    column

    int

    0

    表中要展示为树的列数。

    columnElType

    string

    "td"

    展示为树的单元格的类别(th,td or both).

    expandable

    bool

    false

    树是否可以展开,可以展开的树包含展开/折叠按钮。

    expanderTemplate

    string

    <a href="#">&nbsp;</a>

    展开按钮的html 片段。

    indent

    int

    19

    每个分支缩进的像素数。

    indenterTemplate

    string

    <span class="indenter"></span>

    折叠按钮的HTML片段

    initialState

    string

    "collapsed"

    初始状态,可选值: "expanded" or "collapsed".

    nodeIdAttr

    string

    "ttId"

    用来识别节点的数据属性的名称。在HTML里面以 data-tt-id  体现。

    parentIdAttr

    string

    "ttParentId"

    用了设置父节点的数据属性的名称. 在HTML里面以data-tt-parent-id 体现。

    stringCollapse

    string

    "Collapse"

    折叠按钮的title,国际化使用。

    stringExpand

    string

    "Expand"

    展开按钮的title,国际化使用。

    Events

    Setting

    Type

    Default

    Description

    onInitialized

    function

    null

    树初始化完毕后的回调函数.

    onNodeCollapse

    function

    null

    节点折叠时的回调函数.

    onNodeExpand

    function

    null

    节点展开时的回调函数.

    onNodeInitialized

    function

    null

    节点初始化完毕后的回调函数

    Public API

    Plugin Function

    treetable()

    treetable() 方法可以传入下面的参数:

    options(optional) : 一个描述配置的JS对象。

    force(optional):参数为true时强制重新初始化树。

    Additional Functions

    对树操作的一些方法,附加方法必须通过treetable()方法调用。Eg:折叠id=42的节点, $("#tree").treetable("collapseNode", "42").

    collapseAll():折叠所有节点

    collapseNode(id):Collapse a single node, identified by id.

    expandAll():Expand all nodes at once.

    expandNode(id):Expand a single node, identified by id.

    loadBranch(node, rows):向树中插入新行(<tr>s), 传入参数 node 为父节点,rows为待插入的行. 如果父节点node为null ,新行被作为父节点插入

    move(nodeId, destinationId):Move node nodeId to new parent with destinationId.

    node(id):Select a node from the tree. Returns a TreeTable.Node object.

    removeNode(id):从树中移除某个节点及其所有子节点

    reveal(id):展示树中的某个节点

    sortBranch(node)

    sortBranch(node, columnOrFunction):根据字母顺序对node 节点的所有子节点排序。Defaults to sorting on the values in the configured tree column (see settings). Pass an optional column number or sorting function as the second argument columnOrFunction. See the tests for examples of custom sorting functions. Does not recursively sort children of children.

    unloadBranch(node):Remove nodes/rows (HTML <tr>s) from the tree, with parent node. Note that the parent (node) will not be removed.

    Classes

    HTML tr class:

    expanded:标识节点被展开

    collapsed:标识节点被折叠

    branch:分支节点,有子节点或者拥有 branchAttr 属性

    leaf:叶子节点,无子节点

    Examples

    Basic Static Tree :

    $("#example-basic-static").treetable();

    Basic Expandable Tree

    $("#example-basic-expandable").treetable({ expandable: true });

    Complex Tree With Drag and Drop

    $("#example-advanced").treetable({ expandable: true });  // Highlight selected row $("#example-advanced tbody").on("mousedown", "tr", function() {   $(".selected").not(this).removeClass("selected");   $(this).toggleClass("selected"); });  // Drag & Drop Example Code $("#example-advanced .file, #example-advanced .folder").draggable({   helper: "clone",   opacity: .75,   refreshPositions: true,   revert: "invalid",   revertDuration: 300,   scroll: true });  $("#example-advanced .folder").each(function() {   $(this).parents("#example-advanced tr").droppable({     accept: ".file, .folder",     drop: function(e, ui) {       var droppedEl = ui.draggable.parents("tr");       $("#example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));     },     hoverClass: "accept",     over: function(e, ui) {       var droppedEl = ui.draggable.parents("tr");       if(this != droppedEl[0] && !$(this).is(".expanded")) {         $("#example-advanced").treetable("expandNode", $(this).data("ttId"));       }     }   }); });

     异步加载:

    $("#treetable").treetable({ 	expandable: true,// 展示 	initialState :"expanded",//默认打开所有节点 	stringCollapse:'关闭', 	stringExpand:'展开', 	onNodeExpand: function() {// 分支展开后的回调函数 		var node = this; 		//判断当前节点是否已经拥有子节点 		var childSize = $("#treetable").find("[data-tt-parent-id='" + node.id + "']").length; 		if (childSize > 0) {  			 return;  		} 		var data = "pageId=" + node.id; 		// Render loader/spinner while loading 加载时渲染 		$.ajax({ 			loading : false, 			sync: false,// Must be false, otherwise loadBranch happens after showChildren? 			url : context + "/document/loadChild.json", 			data: data, 			success:function(result) { 				if(0 == result.code ){	 					if(!com.isNull(result.body)){ 						if(0 == eval(result.body['chilPages']).length){//不存在子节点 							var $tr = $("#treetable").find("[data-tt-id='" + node.id + "']"); 							$tr.attr("data-tt-branch","false");// data-tt-branch 标记当前节点是否是分支节点,在树被初始化的时候生效 							$tr.find("span.indenter").html("");// 移除展开图标 							return; 						} 						 						var rows = this.getnereateHtml(result.body['chilPages']); 						$("#treetable").treetable("loadBranch", node, rows);// 插入子节点 						$("#treetable").treetable("expandNode", node.id);// 展开子节点 					} 				}else{ 					alert(result.tip); 				}	 			} 		}); 	  } });	

    Using treetable with PersistJS

    https://github.com/jughead/jquery-treetable-ajax-persist/blob/master/example/index.html

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../src/javascripts/jquery.treetable-ajax-persist.js"></script> <script type="text/javascript" src="../src/javascripts/jquery.treetable-3.0.0.js"></script> <script type="text/javascript" src="../src/javascripts/persist-min.js"></script> <link href="../src/stylesheets/jquery.treetable.css" media="all" rel="stylesheet" type="text/css" /> $("#treetable").agikiTreeTable({// treetable & persistJs  	persist: true, // 使用客户端缓存 	/* 	* 客户端缓存文件名称:采用正则表达式:/^[a-z][a-z0-9_ -]+$/i 进行过滤, 	* 名称错误时直接throw new Error("Invalid name"); 	*/ 	persistStoreName: "docFiles", 	// 其他属性同treetable }); 
  • 相关阅读:
    Android高斯模糊技术,实现毛玻璃效果(转)
    设计模式笔记之六:生产消费者模式
    设计模式笔记之五:观察者模式
    设计模式笔记之四:MVP+Retrofit+RxJava组合使用
    设计模式笔记之三:Android DataBinding库(MVVM设计模式)
    Eclipse Code Recommenders 自动补全(联想)神器
    java根据freeMark模板生成内容
    通过java反射机制,获取对象的属性和值(包括所有继承的父类)
    win7下自动更新svn目录
    jdk11 eclipse下开启ZGC
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7434526.html
Copyright © 2011-2022 走看看