[原] JsTree.js

写自用软件系统时查找到的树列表控件过于庸余,样式难调,故自写一套完整的简易js_TreeTable控件,使用时简单的添加自定义的样式效果即可,特此发布第一个版本。

源码如下:

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

以上为源码和样式,调用示例如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HuashanlinJsTree树控件使用Demo</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js"></script>
    <link href="HuashanlinJsTree/HuashanlinJsTree.css" rel="stylesheet" />
    <script src="HuashanlinJsTree/HuashanlinJsTree.js"></script>
    <script type="text/javascript">
        //用法示例
        jQuery(document).ready(function () {

            //可从数据库读取到的数据
            var GetJsonDataFromDB = [
                { "SortID": 1, "SortName": "新闻", "ParentID": null, "Remark": "这是新闻频道", "CreateDate": "2015-08-21" },
                { "SortID": 2, "SortName": "视频", "ParentID": 0, "Remark": "这是视频频道", "CreateDate": "2015-08-22" },
                { "SortID": 3, "SortName": "国内新闻", "ParentID": 1, "Remark": "这是国内新闻频道", "CreateDate": "2015-08-23" },
                { "SortID": 4, "SortName": "国际新闻", "ParentID": 1, "Remark": "这是国际新闻频道", "CreateDate": "2015-08-24" },
                { "SortID": 5, "SortName": "直播", "ParentID": 2, "Remark": "这是直播频道", "CreateDate": "2015-08-25" },
                { "SortID": 6, "SortName": "社会新闻", "ParentID": 3, "Remark": "这是社会新闻频道", "CreateDate": "2015-08-26" },
                { "SortID": 7, "SortName": "奥运2016", "ParentID": 5, "Remark": "这是奥运2016频道", "CreateDate": "2015-08-27" },
                { "SortID": 8, "SortName": "田径", "ParentID": 7, "Remark": "这是田径频道", "CreateDate": "2015-08-28" },
                { "SortID": 9, "SortName": "游泳", "ParentID": 7, "Remark": "这是游泳频道", "CreateDate": "2015-08-29" },
                { "SortID": 10, "SortName": "自行车公路赛", "ParentID": 7, "Remark": "这是自行车公路赛频道", "CreateDate": "2015-08-30" },
                { "SortID": 11, "SortName": "体育新闻", "ParentID": 3, "Remark": "这是体育新闻频道", "CreateDate": "2015-08-31" },
            ];

            HuashanlinJsTree.ConfigParame.LocationDivID = "newTree";
            HuashanlinJsTree.ConfigParame.KeyFieldName = "SortID";
            HuashanlinJsTree.ConfigParame.ValueFieldName = "SortName";
            HuashanlinJsTree.ConfigParame.ParentKeyFieldName = "ParentID";
            HuashanlinJsTree.ConfigParame.TreeTableTitle = "网站目录";
            HuashanlinJsTree.ConfigParame.OnSelectFuncionSignature = function () {
                var CurrentRowData = HuashanlinJsTree.GetSelected();
                if (CurrentRowData != null) {
                    alert(CurrentRowData.Remark);
                }
            };
            HuashanlinJsTree.ConfigParame.ExtendValueFieldName = "Remark,CreateDate";
            HuashanlinJsTree.DataSource = GetJsonDataFromDB;
            HuashanlinJsTree.DataBind();

        });
    </script>
</head>
<body>
    <div id="newTree" ></div>
</body>
</html>

效果如下: