树形列表Jquery插件

一个仿easyui的树形列表插件，依赖bootstarp和jquery。

1.效果图

2.文档

初始化方式一：

<table class=”treegrid” data-options=” title:'treegrid demo',url:'/demo/treegridData?',toolbar:toolbar,onDblClickRow:callback”/>

初始化方式二：

var tree = $("#treegrid1").treegrid({

         url:'/demo/treegridData?',

         onDblClickRow:function(row){

                   alert(row.name);

         },

         toolbar:[{

                                     text : '新建',

                                     iconCls : 'icon-add',

                                     handler : callback

                            }, {

                                     text : '修改',

                                     iconCls : 'icon-cut',

                                     handler : callback

                            }, {

                                     text : '删除',

                                     iconCls : 'icon-remove',

                                     handler : callback

                            }],

         title:'treegridDemo'

});

方法

方法名	参数	返回值	使用方法
reload	{}	void	Var val = $(“#tt”).treegrid (“reload”,{key:value});
getSelected	void	row	Var row = $(“#tt”).treegrid(“getSelected”);

属性

属性名	默认值	说明
title	“”	标题
toolbar	null	工具栏
url	""	数据请求地址
Param	null	数据请求参数
style	""	Table 样式

事件

事件名	说明
onDblClickRow	双击树形列表时触发

 

3.源代码

!function($){
    
    "use strict";
    
    var TreeGrid = function (element, options) {
        this.options = $.extend({}, $.fn.treegrid.defaults, options);
        this.$element = $(element);
        this.init();
        var that = this;
        $(element).on('click', "i[data-rownum]", function(e){that.fold(e);});
        $(element).on('click', "tr[data-rownum]", function(e){that.setSelected(e);})
                  .on('dblclick', "tr[data-rownum]", function(e){that.onDblClickRow(e);});
        $(element).on('click',"a[data-toolbar]",function(e){that.clickToolbar(e);});
    };
    
    TreeGrid.prototype = {
        init:function () {
            if(!this.options.columns){
                this.options.columns = (function findTableDef(that){
                    var filedArr = "[";
                    jQuery("tr", that).each(function(){
                        filedArr = filedArr + "[";
                        jQuery("th", this).each(function(){
                            var data = $(this).data("options");
                            data && (filedArr = filedArr + "{" + data + "},");
                        });
                        filedArr = filedArr + "],";
                    });
                    filedArr = filedArr + "]";
                    filedArr = filedArr.replace(/\},\]/g, "}]").replace(/\],\]/g, "]]");
                    return (new Function("return " + filedArr))();
                })(this.$element);
            }
            
            this.options.columns.length > 0
                && this.getData()
                && this.creatTable();
            this.$element.addClass(this.options.style);
        },
        reload:function(param){
            param && (this.options.param = param);
            this.init();
        },
        fold:function(e){
            var item = $(e.target)
                ,rowNum = item.data('rownum')
                ,css = item.attr('class')
                ,i = 1
                ,tgrid = this;
                
            !function getRow(data){
                $.each(data,function(){
                    if((i++) == rowNum){
                        tgrid.options.selectedRow = this;
                    }else{
                        this.hasChild == 1 && (getRow(this.childrenList));
                    }
                });
            }(this.options.rows);
            
            var childLeng = 0;
            !function getchildLeng(data){
                if(data.hasChild == 1){
                    childLeng = childLeng + data.childrenList.length;
                    $.each(data.childrenList,function(){
                        getchildLeng(this);
                    });
                }
            }(tgrid.options.selectedRow);
            
            var selector = "tr[data-rownum]:gt("+ (rowNum-1) + "):lt(" + (childLeng) +")";
                
            if(css == "icon-folder-open") {
                item.attr('class','icon-folder-close');
                $(selector , this.$element).hide();
            }else{
                item.attr('class','icon-folder-open');
                $(selector , this.$element).each(function(){
                    $("i",this).attr('class','icon-folder-open');
                    $(this).show();
                });
            }
        },
        getData:function(){
            var tgrid = this;
            $.ajax({
                type: "get",
                url: this.options.url,
                success: function(data, textStatus){
                    tgrid.options.rows = data.rows;
                },
                data:this.options.param,
                dataType:"JSON",
                async:false,
            });
            return true;
        },
        creatTable:function(){
            var columns = []
                ,html = ""
                ,rowNum = 1;
            $.each(this.options.columns,function(){
                $.each(this,function(){
                    this.field&&columns.push(this);
                });
            });
            
            var paddingLeft = 0;
            
            !function creatThead(tgrid){
                var thead = "";
                var tr = "";
                tgrid.options.title && (thead = thead + "<tr><th colspan='0' >" + tgrid.options.title + "</th></tr>");
                if(tgrid.options.toolbar){
                    var tbHTML = "<tr><th colspan='0' >";
                    $.each(tgrid.options.toolbar,function(index,data){
                        tbHTML = tbHTML + "<a href=\"javascript:void(0)\" data-toolbar=\"" + index + "\"><i class=\"" + this.iconCls + "\"></i>" + this.text + "</a>";
                    });
                    tbHTML = tbHTML + "</th></tr>";
                    thead = thead + tbHTML;
                }
                $.each(tgrid.options.columns,function(){
                    thead = thead + "<tr>";
                    tgrid.options.rowNum && (thead = thead + "<th style=\"width:30px;\"></th>");
                    $.each(this,function(){
                        thead = thead + "<th";
                        var thText = "";
                        var thStyle = " style=\"";
                        $.each(this,function(index,data){
                            if(index == 'title'){
                                thText = data; 
                            }
                            else{
                                index == 'width' || index == 'height' 
                                    ? thStyle =thStyle + index + ":" + data + "px;"
                                    :thStyle =thStyle + index + ":" + data + ";";
                            }
                        });
                        thead = thead + thStyle + "\">" + thText + "</th>";
                    });
                    thead = thead + "</tr>";
                });
                html = html + thead;
            }(this);
            
            !function creatTR(data,columns){
                $.each(data,function(index,value){
                    var that = this;
                    html = html + "<tr data-rownum=\""+ rowNum +"\"><td>" + rowNum + "</td>";
                    if(this.hasChild == 1){
                        $.each(columns,function(){
                            this.field == "name"
                                ?(html = html + "<td style=\"padding-left:" + paddingLeft + "px;\"><a href=\"javascript:void(0)\"><i data-rownum=\""+ rowNum +"\" class=\"icon-folder-open\"></i></a>" + that[this.field]+ "</td>")
                                :(html = html + "<td>" + that[this.field]+ "</td>");
                        });
                        html = html + "</tr>";
                        rowNum++;
                        paddingLeft = paddingLeft + 14;
                        html + creatTR(this.childrenList,columns);
                        paddingLeft = paddingLeft - 14;
                    }
                    else{
                        $.each(columns,function(){
                            this.field == "name"
                                ?html = html + "<td style=\"padding-left:" + paddingLeft + "px;\">" + that[this.field]+ "</td>"
                                :html = html + "<td>" + that[this.field]+ "</td>";
                        });
                        rowNum++;
                        html + "</tr>";
                    }
                });
            }(this.options.rows,columns);
            
            this.$element.html(html);
        },
        getSelected:function(){
            return this.options.selectedRow;
        },
        setSelected:function(e){
            var tgrid = this;
            var item = $(e.target).parent()
                ,rowNum = item.data('rownum')
                ,i = 1;
            !function getRow(data){
                $.each(data,function(){
                    if((i++) == rowNum){
                        tgrid.options.selectedRow = this;
                        return false;
                    }else{
                        this.hasChild == 1 && (getRow(this.childrenList));
                        if(tgrid.options.selectedRow){return false;}
                    }
                });
            }(this.options.rows);
        },
        onDblClickRow:function(e){
            var tgrid = this;
            var item = $(e.target).parent()
                ,rowNum = item.data('rownum')
                ,i = 1;
            !function getRow(data){
                $.each(data,function(){
                    if((i++) == rowNum){
                        tgrid.options.selectedRow = this;
                        return false;
                    }else{
                        this.hasChild == 1 && (getRow(this.childrenList));
                        if(tgrid.options.selectedRow){return false;}
                    }
                });
            }(this.options.rows);
            
            if(tgrid.options.onDblClickRow){
                tgrid.options.onDblClickRow(tgrid.options.selectedRow);
            }
        },
        clickToolbar:function(e){
            var toolbar = $(e.target)
                ,index = toolbar.data('toolbar');
            this.options.toolbar[index].handler();
        }
    };
    
    $.fn.treegrid = function (option,param) {
        var result = null;
        var tgrid = this.each(function () {
            var $this = $(this)
                , data = $this.data('treegrid')
                , options = typeof option == 'object' && option;
            if(typeof option == 'string' ){
                result = data[option](param);
            }else{
                $this.data('treegrid', (data = new TreeGrid(this, options)));
            }
        });
        if(typeof option == 'string')return result;
        return tgrid;
    };
    
    $.fn.treegrid.defaults = {
        url:"",
        title:null,
        toolbar:null,
        param:null,
        columns:null,
        rows:[],
        selectedRow:null,
        onDblClickRow:null,
        rowNum:true,
        style:"table table-bordered table-hover"
    };
    
    $(window).on('load', function(){
            $("table[class='treegrid']").each(function () {
            var $tgrid = $(this)
            , data = $tgrid.data('options');
            if(!data) return;
            $tgrid.treegrid((new Function("return {" + data + "}"))());
        });
    });
    
}(window.jQuery);