jquery插件treetable使用

  • Post author:
  • Post category:其他


一、插件描述:


jQuery-treetable是一个jQuery插件。有了这个插件,你可以在一个HTML表格中显示树,即目录结构或嵌套列表。它使HTML文件干净的,展现出树状表格插件,你只需要添加特定的数据格式。它是跨浏览器、性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单。

二、属性表简介:

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,国际化使用。

三、函数简介:

Setting

Type

Default

Description

onInitialized

function

null

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

onNodeCollapse

function

null

节点折叠时的回调函数.

onNodeExpand

function

null

节点展开时的回调函数.

onNodeInitialized

function

null

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

四、项目应用:

1.数据格式:

第一列为每条数据的id,第二列为该条数据的parentid,第三列是具体的内容

2.页面

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
   <title>巡查项管理</title>
   <meta name="decorator" content="default"/>
   //特别注意,需要引入的js
   <link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
   <script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
         var data = ${fns:toJson(page)}, rootId = "${not empty inspectItemsTempLak.id ? inspectItemsTempLak.id : '0'}";
         addRow("#treeTableList", tpl, data, rootId, true);
         $("#treeTable").treeTable({expandLevel : 4});//默认展开的层级
      });
      function addRow(list, tpl, data, pid, root){
         for (var i=0; i<data.length; i++){
            data[i].name=strsub(data[i].name);
            var row = data[i];
            if ((${fns:jsGetVal('row.parentId')}) == pid){
               $(list).append(Mustache.render(tpl, { pid: (root?0:pid), row: row}) );
               addRow(list, tpl, data, row.id);
            }
         }
      }
      function strsub(str){
         if(str!= null && str.length>25){
            return str.substring(0,25)+"...";
         }else{
            return str;
         }
      }
   </script>
</head>
<body>
   <ul class="nav nav-tabs">
      <li class="active"><a href="${ctx}/inspect/items/inspectItemsTempLak/list?     id=${inspectItemsTempLak.id}&parentIds=${inspectItemsTempLak.parentIds}">项列表</a></li>
      <li><a href="${ctx}/inspect/items/inspectItemsTempLak/form?parent.id=0" style="float:left; margin-top:3px; margin-left:5px" class="btn btn-success">添加版本</a></li>
   </ul>
   <sys:message content="${message}"/>
   <table id="treeTable" class="table table-striped table-bordered table-condensed">
      <thead>
         <tr>
            <th>项目</th>
            <th>检查标准</th>
            <th>分数</th>
            <th>操作</th>
         </tr>
      </thead>
      <tbody id="treeTableList">

      </tbody>
   </table>

   <script type="text/template" id="treeTableTpl">
      <tr id="{{row.id}}" pId="{{pid}}">
         <td width="400px"><a href="${ctx}/inspect/items/inspectItemsTempLak/form?id={{row.id}}">{{row.name}}</a></td>
         <td >{{row.checkRules}}</td>
         <td width="40px">{{row.score}}</td>
         <td width="150px">
            <a href="${ctx}/inspect/items/inspectItemsTempLak/form?id={{row.id}}">修改</a>
            <a href="${ctx}/inspect/items/inspectItemsTempLak/delete?id={{row.id}}" onclick="return confirmx('要删除该项目及所有子项目吗?', this.href)">删除</a>
            <a href="${ctx}/inspect/items/inspectItemsTempLak/form?parent.id={{row.id}}&parent.name={{row.name}}">添加下级项目</a>
         </td>
      </tr>
   </script>
</body>
</html>

3.样式展示



注意事项:



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


2、每个子节点必须有一个 data-tt-parent-id  属性,data-tt-parent-id 的值必须等于 父节点的data-tt-id 值


3、 表格中行的展示必须按照树的展开顺序来,即传递过来的List必须是有序的,且与树展开后的顺序一致



版权声明:本文为Java_monkeys原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。