[原] JsTree.js

時間 2019-11-12

原文原文鏈接

寫自用軟件系統時查找到的樹列表控件過於庸餘,樣式難調,故自寫一套完整的簡易js_TreeTable控件,使用時簡單的添加自定義的樣式效果便可,特此發佈第一個版本。javascript

源碼以下:css

/*
 * 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.1八、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];
        }
    }
};

View Code

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

View Code

以上爲源碼和樣式,調用示例以下:html

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

效果以下:
java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。