动态treeTable jquery插件使用

最新推荐文章于 2024-09-14 08:24:01 发布

song_de

最新推荐文章于 2024-09-14 08:24:01 发布

阅读量1.1w

点赞数

分类专栏： js知识文章标签： jquery treeTable 浏览器 jquery插件

本文链接：https://blog.csdn.net/song_de/article/details/38224549

版权

js知识专栏收录该内容

36 篇文章 0 订阅

订阅专栏

先把 jQuery treetable 的官方API地址贴上: http://ludo.cubicphuse.nl/jquery-treetable/

有用到这个插件的可以去看看,但是它提供的treetable是一个静态的,增加,删除,修改等操作都是直接对DOM对象进行操

作,如果这个treeTable很大,静态的显然就不能满足这个需求了.所以我把它做成了动态的,父子关系,节点内容都存在了数

据库.我用json进行前后台数据传递,具体格式如下:

[
    {
        "dId": "2",
        "pId": "1",
        "content":"这是第一行的内容"
    },
    {
        "dId": "3",
        "pId": "2",
        "content":"这是第二行的内容"
        
    },
    {
        "dId": "4",
        "pId": "3",
        "content":"这是第三行的内容"
    },
    {
        "dId": "5",
        "pId": "1",
        "content":"这是第二行的内容"
        
    }
]

实现的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>测试tabletree</title>
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/common.js"></script>
</head>
<body>
<table id="table">
<tr data-tt-id="1">

<td>Parent</td><td></td>
</tr>
</table>
<script>
var dataLength=0;
$(document).ready(function(){
$.get("data/nodeId.json",function(data){
var html;
dataLength=data.length;
for(var i=0;i<data.length;i++){
var a=data[i].dId;
var b=data[i].pId;
var content=data[i].content;
</tr>';
html +='<tr data-tt-id='+a+' data-tt-parent-id='+b+'><td>' + content + '</td></tr>';
}
$('#table').append(html);
loadResource();
});
});

//这里需要特别注意一下,因为这个table的每一个tr是动态append上去的,当你append完了之后css和jqueryUI已经加载完了,所以不会对这些动态拼上去的tr进行渲染,这里要让css和jqueryUI在append之后在加载,浏览器一边发了http请求去请求css和js一边继续解析js代码,所以这时候马上使用js文件中的方法就会报错,所以要将后续方法的调用放在文件加载完毕.
function loadResource(){
loadjscssfile("../css/jquery.treetable.css","css");
loadjscssfile("../css/jquery.treetable.theme.default.css","css");
loadjscssfile("../js/jquery.treetable.js","js");
loadjscssfile("../js/jquery-ui.js","js");
}

function test(){
var dataId=nodeId.attr("data-tt-id");
console.log(dataId);
console.log(nodeId);
}
</script>
</body>
</html>

common.js的里面代码如下:

// JavaScript Document
var i=0;
function loadjscssfile(filename,filetype){

if(filetype == "js"){
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src",filename);
}else if(filetype == "css"){
var fileref = document.createElement('link');
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
}
if(typeof fileref != "undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
fileref.οnlοad=fileref.onreadystatechange=function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
i++;

//这里标志着css文件和js文件加载完毕了
if(i==dataLength){
$("#table").treetable({ expandable: true });
$("#table tbody").on("mousedown", "tr", function() {
$(".selected").not(this).removeClass("selected");
$(this).toggleClass("selected");
});
}
}
fileref.οnlοad=fileref.onreadystatechange=null;
};
}
}