动态treeTable jquery插件使用

先把 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":"这是第二行的内容"
        
    }
]

实现的代码如下:

   
   
   


   
     
   
   
 

Parent

   

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;
};
   }
}

最后就是上图的效果,每个节点和节点的内容都是动态的,对整个treeTable的操作也就变成了对后台数据的操作.

我想把jquery TreeTable用到的css和js文件上传上来,但是没有找到在哪里上传,想要就去文章开头的官方API自己下

载,如果你有更好的方法欢迎交流讨论.