[原]HuashanlinJsTree 1.0.1 发布

  1 /*
  2  * HuashanlinJsTree 1.0.1
  3  *
  4  * Copyright (c) 2015 Huashanlin (huashanlin.cnblogs.com)
  5  * 
  6  * GPL (GPL-LICENSE.txt) licenses.
  7  *
  8  * ￥Date: 2015-08-28 15:14:29 -0400 (Fri, 28 Aug 2015)￥
  9  * 
 10  * 本TreeTable控件基于jQuery1.4.2以上版本,兼容IE10.0.18、Chrome41.0.2272.118
 11  *
 12  * 转载请注明出处
 13  */
 14 var HuashanlinJsTree = {
 15     ConfigParame: {
 16         LocationDivID: "",/*Tree生成页面位置的Div的ID【必填】*/
 17         KeyFieldName: "",/*树节点值的字段名称(主键,与ParentKeyFieldName数据对应)【必填】*/
 18         ValueFieldName: "",/*树节点名称的字段【必填】*/
 19         ParentKeyFieldName: "",/*父节点值字段名称【必填】*/
 20         ExtendValueFieldName: "",/*除树节点名称字段外扩展显示的字段,即可显示多个字段,格式如"Cu1,Cu2,Re1"【可选】*/
 21         OnSelectFuncionSignature: "",/*选中树节点事件【可选】*/
 22         TreeTableTitle: "",/*树表格的标题,为空则不显示标题【可选】*/
 23         SpaceMark: "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp",/*区分不同层级的树节点的间隔符【必填】*/
 24         TagMark: "|--",/*树表格节点头部字符或图片<img src=‘‘>【可选】*/
 25         IsFirstLevelHaveTagMark: false,/*树第一级节点名称是否显示TagMark*/
 26     },
 27     DataSource: [],/*树的数据源 Json格式*/
 28     SelectedKeyFieldValue: "",/*选中行节点的值*/
 29     _GetHtml: "",/*自用参数*/
 30     _ID: "",/*自用参数*/
 31     DataBind: function () {
 32         document.write
 33         if (this.ConfigParame.LocationDivID.length == 0) { alert("LocationDivID属性不能为空!表示树所在的Div的位置!"); return; }
 34         if (this.ConfigParame.KeyFieldName.length == 0) { alert("KeyFieldName属性不能为空!表示树的节点值所用的字段名!"); return; }
 35         if (this.ConfigParame.ValueFieldName.length == 0) { alert("ValueFieldName属性不能为空!表述树的节点名称所用的字段名!"); return; }
 36         if (this.ConfigParame.ParentKeyFieldName.length == 0) { alert("ParentKeyFieldName属性不能为空!表示树的父节点值所用的字段名!"); return; }
 37         var _date = new Date();
 38         var _HeadChar = "";
 39         this._ID = "HuashanlinJsTree" + String(_date.getFullYear()) + String(_date.getMonth()) + String(_date.getDate())
 40             + String(_date.getHours()) + String(_date.getMinutes()) + String(_date.getSeconds());
 41         this._GetHtml += "<table id=\"" + this._ID + "\"  class=\"HLJsTree\">";
 42         var FiledNum = 1;
 43         if (this.ConfigParame.ExtendValueFieldName.length > 0) {
 44             var ExtendArray = this.ConfigParame.ExtendValueFieldName.split(‘,‘);
 45             FiledNum = FiledNum + ExtendArray.length;
 46         }
 47         if (this.ConfigParame.TreeTableTitle.length > 0) {
 48             this._GetHtml += "<tr class=\"HLJsTreeTableTitle\"><td colspan=\"" + FiledNum + "\">" + this.ConfigParame.TreeTableTitle + "</td></tr>";
 49         }
 50         for (var i = 0; i < this.DataSource.length; i++) {
 51             if (this.DataSource[i].ParentID == 0 || this.DataSource[i].ParentID == null) {
 52                 if (this.ConfigParame.IsFirstLevelHaveTagMark) {
 53                     _HeadChar = this.ConfigParame.TagMark;
 54                 }
 55                 var ExtendField = "";
 56                 if (this.ConfigParame.ExtendValueFieldName.length > 0) {
 57                     var ExtendArray = this.ConfigParame.ExtendValueFieldName.split(‘,‘);
 58                     for (var m = 0; m < ExtendArray.length; m++) {
 59                         ExtendField += "<td class=\"HLJsTreeExtendField\">" + eval("this.DataSource[i]." + ExtendArray[m]) + "</td>";
 60                     }
 61                 }
 62                 this._GetHtml += "<tr onclick=\"return HuashanlinJsTree._SV(this); \" "+
 63                 "data-key=‘" + eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName) + "‘>" +
 64                 "<td>" + _HeadChar + eval("this.DataSource[i]." + this.ConfigParame.ValueFieldName) + "</td>" + ExtendField + "</tr>";
 65 
 66                 this._RCS(eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName), "");
 67             }
 68         }
 69         this._GetHtml += "</table>";
 70         $("#" + this.ConfigParame.LocationDivID).html(this._GetHtml);
 71     },
 72     _RCS: function (KeyFieldValue, HeadChar) {
 73         var IsHaveChild = false;
 74         var TempHeadChar = "";
 75         for (var i = 0; i < this.DataSource.length; i++) {
 76             if (eval("this.DataSource[i]." + this.ConfigParame.ParentKeyFieldName) == KeyFieldValue) {
 77                 if (!IsHaveChild) {
 78                     IsHaveChild = true;
 79                     TempHeadChar = HeadChar + this.ConfigParame.SpaceMark + this.ConfigParame.TagMark;
 80                 }
 81                 var ExtendField = "";
 82                 if (this.ConfigParame.ExtendValueFieldName.length > 0) {
 83                     var ExtendArray = this.ConfigParame.ExtendValueFieldName.split(‘,‘);
 84                     for (var m = 0; m < ExtendArray.length; m++) {
 85                         ExtendField += "<td class=\"HLJsTreeExtendField\">" + eval("this.DataSource[i]." + ExtendArray[m]) + "</td>";
 86                     }
 87                 }
 88                 this._GetHtml += "<tr onclick=\"return HuashanlinJsTree._SV(this); \" " +
 89                     "data-key=‘" + eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName) + "‘ >" +
 90                     "<td>" + TempHeadChar + eval("this.DataSource[i]." + this.ConfigParame.ValueFieldName) + "</td>" + ExtendField + "</tr>";
 91 
 92                 this._RCS(eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName), HeadChar + this.ConfigParame.SpaceMark);
 93             }
 94         }
 95     },
 96     IsHaveChild: function (CurentKeyValue) {
 97         var IsHave = false;
 98         for (var i = 0; i < this.DataSource.length; i++) {
 99             if (eval("this.DataSource[i]." + this.ParentKeyName) == CurentKeyValue) {
100                 IsHave = true;
101                 break;
102             }
103         }
104         return IsHave;
105     },
106     _SV: function (arg) {
107         this.SelectedKeyFieldValue = $(arg).attr("data-key");
108 
109         $("#" + this._ID).find("tr").each(function () {
110             $(this).removeClass("HLJsTreeRowSelected");
111         });
112         $(arg).addClass("HLJsTreeRowSelected");
113 
114         if (this.ConfigParame.OnSelectFuncionSignature != null) {
115             if ((typeof (this.ConfigParame.OnSelectFuncionSignature) == "function")) {
116                 this.ConfigParame.OnSelectFuncionSignature();
117             }
118         };
119     },
120     GetSelectedKeyFieldValue: function () {
121         return this.SelectedKeyFieldValue;
122     },
123     GetSelected: function () {
124         for (var i = 0; i < this.DataSource.length; i++) {
125             if (eval("this.DataSource[i]." + this.ConfigParame.KeyFieldName) == this.SelectedKeyFieldValue)
126                 return this.DataSource[i];
127         }
128     }
129 };

 1 .HLJsTree {
 2     width: 100%;
 3     table-layout:fixed;
 4     font-family:Verdana;
 5     font-size:12px;
 6 }
 7     .HLJsTree tr {
 8         cursor: pointer;
 9     }
10         .HLJsTree tr:hover {
11             background-color: lightgray;/*鼠标滑过背景色,自定义*/
12         }
13     .HLJsTree td {
14         border-bottom: 1px solid;
15         width:200px;
16     }
17 .HLJsTreeRowSelected {
18     background-color: lightgray;/*选中行背景色,自定义*/
19 }
20 .HLJsTreeExtendField {
21     border-left: 1px solid;
22 }
23 .HLJsTreeTableTitle {
24     background-color:#0528fa;
25     font-size:14px;
26     font-weight:bold;
27     color:white;
28     padding-left:10px;
29 }

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