投诉举报项目中树形结构的应用

   树形结构，大家在资源管理器中都是常使用的。项目中单位的数据存储结构是树形的，上级单位包含很多下级单位，下级单位也同样包含多个下下级单位，当让用户选择时以树形页面呈现显然更方便。

效果图：

实现思路：

   使用了zTree-JQuery树插件。关于zTree树的学习只要在百度中输入zTree，它的一系列资料都出现了。使用zTree的核心就是会使用zTree（setting,[zTreeNodes]）这个函数，它的返回值就是zTreePlugin. 这个函数接受一个 JSON 格式的数据对象 setting 和 一个 JSON 格式的数据对象 zTreeNodes，从而建立 Tree。我们实现树形就是通过后台查询出数据库中的单位数据，然后转为Json格式作为参数传入该函数，返回zTreePlugin显示到页面相应的区域中。当然zTree很多属性可以做出不同风格的Tree，有兴趣的可以去官网学习。zTree学习网

核心代码：

页面代码：

@*引入zTree的js文件,可下载得到*@
<link href="../../Content/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/zTree/jquery.ztree.core-3.5.js" type="text/javascript"></script>
<script src="../../Scripts/zTree/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>
@*引入实现本功能的js文件*@
<script src="../../Scripts/zTree/unitTree.js" type="text/javascript"></script>

<h2>Tree</h2>
<div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width: 400px;
    height: 200px; padding: 10px" data-options="
                iconCls: 'icon-save',
                buttons: [{
                    text:'Ok',
                    iconCls:'icon-ok',
                    handler:dialog_OK
                },{
                    text:'Cancel',
                    handler:dialog_Cancel
                }]
            ">
    <table border="0" height="100px" align="left">
        <tr>
            <td width="60px" align="left" valign="top" style="border-right: #999999 0px dashed">
                <ul <span style="color:#ffffff;background-color: rgb(255, 0, 0);">id="tree"</span> class="ztree" style="width: 160px; overflow: auto;">
                </ul>
            </td>
            <td >
                <select id="comboPeople" multiple="multiple" style="width:100px;height:100px">
                    
                </select>
            </td>
        </tr>
    </table>
</div>

UnitTree.js文件：

var tree = {

    /**
    * 所有的初始化的操作
    */
    pFunction: {
        zTree: '',
        setting:
        {
            callback: {
		        onClick: zTreeOnClick
	        },
            check: {
                enable: true,
                chkboxType: { "Y": "", "N": "" }
            },
            data:
            {
                key:
                {
                    name: "UnitName"
                },
                simpleData: 
                {
					enable: true,
                    idKey:"UnitID",
                    pIdKey: "pid",
                    rootPId:"0"
				}
			}

        },

       
        //加载单位
        loadTree: function () {
            $.post("/Test/getAllUnit", null, function (unitInfo) {
                $.fn.zTree.init(<span style="background-color: rgb(255, 102, 102);"><span style="color:#ffffff;">$("#tree")</span></span>, tree.pFunction.setting, unitInfo);
            });
        }

    }
};

$().ready(function () {
    tree.pFunction.loadTree();
    //tree.init.initEvent();
});

Controller里面的代码：

       public ActionResult getAllUnit()
        {
            UserEntity e = CacheHelper.Get("User") as UserEntity;
            Collections.AnJianLuRu.UnitEntityCollection units = unitmanager.LoadAll(); 
            for (int enNum = 0; enNum < units.Count; ++enNum)
            {
                units[enNum].UserEntities = null;
                //caseHandleCollection[enNum].CaseInputInfoEntity= null;
            }

            var ltUnit = units.Select
                 (
                 p => new
                 {
                    p.ID,
                    p.FlowID,
                    p.Level,
                    p.pid,
                    p.UnitID,
                    p.UnitName,
                    p.UserEntities,

                    Timestamp = p.Timestamp.ToString("yyyy-mm-dd"),
                 }
                 ).ToList();
            var unitInfo = this.JsonFormat(   //将查询到的数据转为Json格式
                ltUnit
                );
            return unitInfo;
        }

代码中两次地方以红色标出，说明了生成的树显示在view中的响应位置。

总结：

    很多东西我们都要学会站在巨人的肩膀上。这是一种思想应该变为一种潜意识。开始时听说要加一棵树上去，我自己就想着这得多难啊。殊不知别人已经帮你做好了，去学去用就好了。