1.创建树
$('#树Id').tree({url:'json数据'});
*{}里面可以填tree相关属性，事件,相当一个object对象
属性: $('#树Id').tree({checkbox: true});//复选框设置
ines: true//显示虚线
animate: true//收缩有动画效果
事件:$('#树Id').tree({
//双击进入修改状态
onDblClick: function (node) {
alert("双击");
}});//设置双击树事件
*办法:办法不属于{}的对象
$('#tt').tree('办法名');//比如:$('#tt').tree('getChecked');//获取选中的节点
2.树的双击操作
第一步:给树设置双击事件onDblClick
$('#树Id').tree({
//双击进入修改状态
onDblClick: function (node) {
var editTrue = $(this).tree('beginEdit', node.target);//双击进入编辑状态
}
});//设置双击树事件
第二步:修改完成时触发onAfterEdit做post数据修改，需要结合第一步来用
onAfterEdit: function (node) {
var datas = "permissionID=" + node.id + "&pName=" + node.text;
$.post(pathStr + "YXTCP/DeviceNameTree/OptionDetree.ashx?type=updatePermissionName", datas, null, "json");
}
3.树的拖动
onDrop: function (target, source, point) {
var isLeaf = $('#permissionTree').tree('isLeaf', target);//
//获取目标节点ID
var targetID = $('#permissionTree').tree('getNode', target).id;
var sourceID = source.id;//拖动的id
var datas = "targetID=" + targetID + "&sourceID=" + sourceID;
if (point == "append") {
$.post(pathStr + "YXTCP/DeviceNameTree/OptionDetree.ashx?type=ondropAppend", datas, null, "json");
} else if (point == "top") {
$.post(pathStr + "YXTCP/DeviceNameTree/OptionDetree.ashx?type=ondropTop", datas, null, "json");
}
else {
$.post(pathStr + "YXTCP/DeviceNameTree/OptionDetree.ashx?type=ondropBottom", datas, null, "json");
}
}
4.树的右键菜单
第一步：定义onContextMenu事件
onContextMenu: function (e, node) {
e.preventDefault();
// 查找节点
$('#permissionTree').tree('select', node.target);
// 显示快捷菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
第二步:div菜单
<div id="mm" class="easyui-menu" style="120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">添加设备</div>
<div onclick="removeAllTarget()" data-options="iconCls:'icon-remove'">删除设备</div>
<div onclick="update()" data-options="iconCls:'icon-remove'">修改基本信息</div>
<div onclick="ShowMoenyTimeupdate()" data-options="iconCls:'icon-remove'">计费设置</div>
</div>
5.根据树的父子Id生成树的Json数据生成树(ashx)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
namespace YXTCP.DeviceNameTree
{
using YX_LIMS.Model;
using YX_LIMS.BLL;
using System.Text;
/// <summary>
/// DTrees 的摘要说明
/// </summary>
public class DTrees : IHttpHandler
{
DeviceNameBLL permissionBll = new DeviceNameBLL();
StringBuilder result = new StringBuilder();
StringBuilder sb = new StringBuilder();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string parentID = context.Request.QueryString["parentID"];
//DataTable dt =
DataTable permissionTable = permissionBll.GetList(" ").Tables[0];
string permissionJson = GetTreeJsonByTable(permissionTable, "PerssionID", "Name", "PID", "0");
context.Response.Write(permissionJson);
context.Response.End();
}
#region 根据DataTable生成EasyUI Tree Json树结构 + string GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string url, string rela, object pId)
/// <summary>
/// 根据DataTable生成EasyUI Tree Json树结构
/// </summary>
/// <param name="tabel"></param>
/// <param name="idCol">ID列</param>
/// <param name="txtCol">Text列</param>
/// <param name="url">节点Url</param>
/// <param name="rela">关系字段</param>
/// <param name="pId">父ID</param>
/// <returns></returns>
private string GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string rela, object pId)
{
result.Append(sb.ToString());
sb.Clear();
if (tabel.Rows.Count > 0)
{
sb.Append("[");
string filer = string.Format("{0}='{1}'", rela, pId);
DataRow[] rows = tabel.Select(filer);
if (rows.Length > 0)
{
foreach (DataRow row in rows)
{
sb.Append("{"id":"" + row["ID"] + "","text":"" + row[txtCol] + "","attributes":"","state":"open"");
if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0)
{
sb.Append(","children":");
GetTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol]);
result.Append(sb.ToString());
sb.Clear();
}
result.Append(sb.ToString());
sb.Clear();
sb.Append("},");
}
sb = sb.Remove(sb.Length - 1, 1);
}
sb.Append("]");
result.Append(sb.ToString());
sb.Clear();
}
return result.ToString();
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}
}
6.根据树的字段生成树
protected StringBuilder htmlString = new StringBuilder();//树的生成
#region 7.0.1 加载一级权限树数据 + void LoadPermissionTree()
/// <summary>
/// 加载一级权限树数据
/// </summary>
private void LoadPermissionTree()
{
var userList = debll.GetListGroupByUnitStop();
htmlString.AppendLine("<ul class="easyui-tree" id="indextree" data-options="">");
foreach (Deparments item in userList)
{
var unitmodel = debll.GetModelList(" DepartmentName='" +item.DepartmentName + "'");
htmlString.AppendLine(" <li data-options="attributes:{src:'" + pathStr + "YXTCP/UsersIndex/Units.aspx?unit=" + unitmodel[0].ID + "'}">");
htmlString.AppendLine("<span>" + item.DepartmentName + "</span>");
InitSubMenus(unitmodel[0].ID);
htmlString.AppendLine("</li>");
}
htmlString.AppendLine("</ul>");
}
#endregion
#region 7.0 加载权限树二级的子菜单 + void InitSubMenus(int parentMid)
/// <summary>
/// 加载权限树的子菜单
/// </summary>
/// <param name="parentMid"></param>
private void InitSubMenus(string unit)
{
//var unitmodel = debll.GetModelList(" DepartmentName='"+unit+"'");
var deparmentsList = debll.GetListGroupByDeparmentsStop(unit);
if (deparmentsList.Count > 0)
{
htmlString.AppendLine("<ul>");
foreach (Deparments item in deparmentsList)
{
var demodel = debll.GetModelList(" PID='" + unit + "' and DepartmentName='" + item.DepartmentName + "' ");
htmlString.AppendLine(" <li data-options="attributes:{src:'" + pathStr + "YXTCP/UsersIndex/Users.aspx?unit=" + unit + "&departments=" + demodel[0].ID + "'}">");
htmlString.AppendLine("<span>" + item.DepartmentName + "</span>");
InitThreeMenus(unit, demodel[0].ID);
htmlString.AppendLine("</li>");
}
htmlString.AppendLine("</ul>");
}
}
#endregion
#region 7.加载三级子菜单
/// <summary>
/// 加载三级子菜单
/// </summary>
/// <param name="parentMid"></param>
///
private void InitThreeMenus(string unit, string deparment)
{
//var departmentmodel = debll.GetModelList(" DepartmentName='" + deparment + "'");
var userInfoList = userBll.GetModelList(" Departments=(select ID from Deparments where ID='" + deparment + "' and PID='" + unit + "') and Status=1 ");
if (userInfoList.Count > 0)
{
htmlString.AppendLine("<ul>");
foreach (UserInfo item in userInfoList)
{
htmlString.AppendLine(" <li data-options="attributes:{src:'" + pathStr + "YXTCP/AddSN.aspx?id=" + item.ID + "'}">" + item.NickName + "</li>");
}
htmlString.AppendLine("</ul>");
}
}
#endregion
7.逐级加载
url: pathStr + 'PersonnelManagement/UnitManagement/UnitAndDepartmentsJson.ashx',//默 认是加载父Id为空的第一级
onBeforeExpand: function (node, param) {
$('#unitAndDepartment').tree('options').url = pathStr + 'PersonnelManagement/UnitManagement/UnitAndDepartmentsJson.ashx?id=' + node.id;
//点击展开时获取父Id生成子Id
}
ashx:
if (id == "" || string.IsNullOrEmpty(id))
{
DeparmentsTable = departBll.GetList(" IsDel='false' and PID is null order by DepartmentName asc").Tables[0];
DeparmentsJson = GetTreeJsonByTable(DeparmentsTable, "ID", "DepartmentName", "PID", null, "closed");
}
else
{
id = id.Split(',')[0];
DeparmentsTable = departBll.GetList(" IsDel='false' and PID='" + id + "' order by DepartmentName asc").Tables[0];
DeparmentsJson = GetTreeJsonByTable(DeparmentsTable, "ID", "DepartmentName", "PID", id,"open");
}