一 tree初始化方式
1. html方式初始化
<ul id="tt1" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> </ul> </li> <li> <span>File 2</span> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span>File21</span> </li> </ul>
2. 本地加载json
<ul id="tt1"> </ul>
<script type="text/javascript"> $(function () { var data = [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' }, { text: 'Item12' }] }, { text: 'Item2' }]; $('#tt1').tree(); //首先初始化树结构 $('#tt1').tree('loadData', data); }); </script>
3. 异步加载树结构
<ul id="tt"> </ul>
<script type="text/javascript"> $(function () { $('#tt').tree({ lines: true, //显示格式控制 url: '/Ajax/Parameter/AA40.ashx?Method=InitTree', /*************每次打开所有节点*************************/ onLoadSuccess: function (node, data) { var t = $(this); if (data) { $(data).each(function (index, d) { if (this.state == 'closed') { t.tree('expandAll'); } }); } /***********选中指定id的节点****************/ var node = $('#tt').tree('find', 410); $('#tt').tree('select', node.target); }, /**************点击节点展开或关闭树形结构***************/ onClick: function (node) { if (node.state == 'closed') { $(this).tree('expand', node.target); console.info(node.target); } else { $(this).tree('collapse', node.target); } }, onDblClick: function (node) { var g = $(this).tree('getParent', node.target); //获取选中节点的父节点 } }); }); </script>View Code
/// <summary> /// 初始化树结构 /// </summary> public void InitTree() { com.zhonghui.bll.sys bll = new bll.sys(); DataSet ds = bll.GetList(""); if (ds.Tables[0].Rows.Count > 0) { string strWhere = string.IsNullOrEmpty(Request["id"]) == true ? " sysPID IS NULL" : " sysPID='" + Request["id"] + "'"; string s = GetTreeJson(ds.Tables[0], "sysID", "sysName", "sysPID", strWhere); Response.Write(s); } } /// <summary> /// 根据DataTable生成Json树结构 【异步加载树结构】 /// </summary> /// <param name="tabel">table列表</param> /// <param name="nodeID">节点id</param> /// <param name="nodeName">节点名称</param> /// <param name="pNodeID">父节点ID</param> /// <param name="strWhere">条件</param> /// <returns></returns> public string GetTreeJson(DataTable tabel, string nodeID, string nodeName, string pNodeID, string strWhere) { StringBuilder strJson = new StringBuilder(); strJson.Append("["); DataRow[] rows = tabel.Select(strWhere); if (rows.Length > 0) { foreach (DataRow row in rows) { strJson.Append("{"id":"" + row[nodeID] + "","text":"" + row[nodeName]); if (tabel.Select(string.Format("{0}='{1}'", pNodeID, row[nodeID])).Length > 0) { strJson.Append("","state":"closed""); } else { strJson.Append("","state":"open""); } strJson.Append("},"); } strJson = strJson.Remove(strJson.Length - 1, 1); } strJson.Append("]"); return strJson.ToString(); }