[原] JsTree.js

2021-09-01 00:10:08

写自用软件系统时查找到的树列表控件过于庸余,样式难调,故自写一套完整的简易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>

效果如下:

码农公寓

相关文章