[原] JsTree.js

/*
 * HuashanlinJsTree 1.0.1
 *
 * Copyright (c) 2015 Huashanlin (huashanlin.cnblogs.com)
 * 
 * GPL (GPL-LICENSE.txt) licenses.
 *
 * ￥Date: 2015-08-28 15:14:29 -0400 (Fri, 28 Aug 2015)￥
 * 
 * 本TreeTable控件基于jQuery1.4.2以上版本,兼容IE10.0.18、Chrome41.0.2272.118
 *
 * 转载请注明出处
 */
var HuashanlinJsTree = {
    ConfigParame: {
        LocationDivID: "",/*Tree生成页面位置的Div的ID【必填】*/
        KeyFieldName: "",/*树节点值的字段名称(主键,与ParentKeyFieldName数据对应)【必填】*/
        ValueFieldName: "",/*树节点名称的字段【必填】*/
        ParentKeyFieldName: "",/*父节点值字段名称【必填】*/
        ExtendValueFieldName: "",/*除树节点名称字段外扩展显示的字段,即可显示多个字段,格式如"Cu1,Cu2,Re1"【可选】*/
        OnSelectFuncionSignature: "",/*选中树节点事件【可选】*/
        TreeTableTitle: "",/*树表格的标题,为空则不显示标题【可选】*/
        SpaceMark: "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp",/*区分不同层级的树节点的间隔符【必填】*/
        TagMark: "|--",/*树表格节点头部字符或图片<img src=''>【可选】*/
        IsFirstLevelHaveTagMark: false,/*树第一级节点名称是否显示TagMark*/
    },
    DataSource: [],/*树的数据源 Json格式*/
    SelectedKeyFieldValue: "",/*选中行节点的值*/
    _GetHtml: "",/*自用参数*/
    _ID: "",/*自用参数*/
    DataBind: function () {
        document.write
        if (this.ConfigParame.LocationDivID.length == 0) { alert("LocationDivID属性不能为空!表示树所在的Div的位置!"); return; }
        if (this.ConfigParame.KeyFieldName.length == 0) { alert("KeyFieldName属性不能为空!表示树的节点值所用的字段名!"); return; }
        if (this.ConfigParame.ValueFieldName.length == 0) { alert("ValueFieldName属性不能为空!表述树的节点名称所用的字段名!"); return; }
        if (this.ConfigParame.ParentKeyFieldName.length == 0) { alert("ParentKeyFieldName属性不能为空!表示树的父节点值所用的字段名!"); return; }
        var _date = new Date();
        var _HeadChar = "";
        this._ID = "HuashanlinJsTree" + String(_date.getFullYear()) + String(_date.getMonth()) + String(_date.getDate())
            + String(_date.getHours()) + String(_date.getMinutes()) + String(_date.getSeconds());
        this._GetHtml += "<table id=\"" + this._ID + "\"  class=\"HLJsTree\">";
        var FiledNum = 1;
        var ExtendArray = new Array();
        if (this.ConfigParame.ExtendValueFieldName.length > 0) {
            ExtendArray = this.ConfigParame.ExtendValueFieldName.split(',');
            FiledNum = FiledNum + ExtendArray.length;
        }
        if (this.ConfigParame.TreeTableTitle.length > 0) {
            this._GetHtml += "<tr class=\"HLJsTreeTableTitle\"><td colspan=\"" + FiledNum + "\">" + this.ConfigParame.TreeTableTitle + "</td></tr>";
        }
        for (var i = 0; i < this.DataSource.length; i++) {
            if (this.DataSource[i].ParentID == 0 || this.DataSource[i].ParentID == null) {
                if (this.ConfigParame.IsFirstLevelHaveTagMark) {
                    _HeadChar = this.ConfigParame.TagMark;
                }
                var ExtendField = "";
                for (var m = 0; m < ExtendArray.length; m++) {
                    ExtendField += "<td class=\"HLJsTreeExtendField\">" + eval("this.DataSource[i]." + ExtendArray[m]) + "</td>";
                }
                this._GetHtml += "<tr onclick=\"return HuashanlinJsTree._SV(this); \" "+
                "data-key='" + eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName) + "'>" +
                "<td>" + _HeadChar + eval("this.DataSource[i]." + this.ConfigParame.ValueFieldName) + "</td>" + ExtendField + "</tr>";

                this._RCS(eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName), "");
            }
        }
        this._GetHtml += "</table>";
        $("#" + this.ConfigParame.LocationDivID).html(this._GetHtml);
    },
    _RCS: function (KeyFieldValue, HeadChar) {
        var IsHaveChild = false;
        var TempHeadChar = "";
        var ExtendArray = new Array();
        if (this.ConfigParame.ExtendValueFieldName.length > 0) {
            ExtendArray = this.ConfigParame.ExtendValueFieldName.split(',');
        }
        for (var i = 0; i < this.DataSource.length; i++) {
            if (eval("this.DataSource[i]." + this.ConfigParame.ParentKeyFieldName) == KeyFieldValue) {
                if (!IsHaveChild) {
                    IsHaveChild = true;
                    TempHeadChar = HeadChar + this.ConfigParame.SpaceMark + this.ConfigParame.TagMark;
                }
                var ExtendField = "";
                for (var m = 0; m < ExtendArray.length; m++) {
                    ExtendField += "<td class=\"HLJsTreeExtendField\">" + eval("this.DataSource[i]." + ExtendArray[m]) + "</td>";
                }
                this._GetHtml += "<tr onclick=\"return HuashanlinJsTree._SV(this); \" " +
                    "data-key='" + eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName) + "' >" +
                    "<td>" + TempHeadChar + eval("this.DataSource[i]." + this.ConfigParame.ValueFieldName) + "</td>" + ExtendField + "</tr>";

                this._RCS(eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName), HeadChar + this.ConfigParame.SpaceMark);
            }
        }
    },
    IsHaveChild: function (CurentKeyValue) {
        var IsHave = false;
        for (var i = 0; i < this.DataSource.length; i++) {
            if (eval("this.DataSource[i]." + this.ParentKeyName) == CurentKeyValue) {
                IsHave = true;
                break;
            }
        }
        return IsHave;
    },
    _SV: function (arg) {
        this.SelectedKeyFieldValue = $(arg).attr("data-key");

        $("#" + this._ID).find("tr").each(function () {
            $(this).removeClass("HLJsTreeRowSelected");
        });
        $(arg).addClass("HLJsTreeRowSelected");

        if (this.ConfigParame.OnSelectFuncionSignature != null) {
            if ((typeof (this.ConfigParame.OnSelectFuncionSignature) == "function")) {
                this.ConfigParame.OnSelectFuncionSignature();
            }
        };
    },
    GetSelectedKeyFieldValue: function () {
        return this.SelectedKeyFieldValue;
    },
    GetSelected: function () {
        for (var i = 0; i < this.DataSource.length; i++) {
            if (eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName) == this.SelectedKeyFieldValue)
                return this.DataSource[i];
        }
    }
};

.HLJsTree {
    width: 100%;
    table-layout:fixed;
    font-family:Verdana;
    font-size:12px;
}
    .HLJsTree tr {
        cursor: pointer;
    }
        .HLJsTree tr:hover {
            background-color: lightgray;/*鼠标滑过背景色,自定义*/
        }
    .HLJsTree td {
        border-bottom: 1px solid;
        width:200px;
    }
.HLJsTreeRowSelected {
    background-color: lightgray;/*选中行背景色,自定义*/
}
.HLJsTreeExtendField {
    border-left: 1px solid;
}
.HLJsTreeTableTitle {
    background-color:#0528fa;
    font-size:14px;
    font-weight:bold;
    color:white;
    padding-left:10px;
}