树表结构界面布局大小自由拖拽实现
效果图
支持左右布局大小自由拖拽，并进行本地缓存，下次进来保持上次拖拽大小
支持左侧树隐藏
支持左侧树还原显示
实现步骤
第一步
在左树右表布局界面中，先确定界面中Column9的列类型是否为Value或Title,如果不是请调整为此值，并设置列宽为10
第二步
拖拽卡片控件放到上树表中间的单元格内，并设置容器布局0边距，1列、7行；
列集合中，列宽设置为10
行集合中
第一行：高度170，是固定列
第二行：高度10，是固定列
第三行：高度20，是固定列
第四行：高度10，是固定列
第五行：高度20，是固定列
第六行：高度10，是固定列
第七行：高度145，是非固定列
第三步
拖拽图像控件放到第二行、第四行和第六行中，并设置按钮图像信息如下：
BtnToLeft按钮启用事件
BtnToRight按钮启用事件
第三步
代码编写
public partial class TreeGridUIFormWebPart
{
#region Custome eventBind
#region 布局相关参数
private int MainUIWidth = 992; // 主画面宽度
private const int TreeBtnWidth = 10; // 树边按钮宽度
private const int MarginWidth = 5; // 边距
private int TreeWidth = 270; // 树宽度
private int TabControlSpaceWidth;
private int TabControlWidth;
private static readonly string _KEY_SCREEN_PARAMS = "__screen_params";
///
/// 枚举值: 树显示模式
///
public enum TreeShowModel
{
// 无动作
None = -1,
// 隐藏
Hidden = 0,
// 修改
Shown = 1,
}
public TreeShowModel CurTreeShowModel
{
get
{
if (this.CurrentState["CurTreeShowModel"] == null)
{
this.CurrentState["CurTreeShowModel"] = TreeShowModel.None;
}
return (TreeShowModel)this.CurrentState["CurTreeShowModel"];
}
set
{
this.CurrentState["CurTreeShowModel"] = value;
}
}
///
/// 页面是否树型展示
/// 可能过url参数传递值 默认显示
///
private bool IsPageTreeDisplay
{
get
{
if (this.NameValues["Tree"] == null)
{
return true;
}
else
{
return bool.Parse(this.NameValues["Tree"].ToString());
}
}
}
#endregion 布局相关参数
public bool BtnToLeft_Click_Extend(object sender, EventArgs e)
{
//BtnToLeft_Click_DefaultImpl(sender, e);
TreeWidth = (Int32)this.TreeControl0.Width.Value;
CurTreeShowModel = TreeShowModel.Hidden;
return true;
}
public bool BtnToRight_Click_Extend(object sender, EventArgs e)
{
//BtnToRight_Click_DefaultImpl(sender, e);
CurTreeShowModel = TreeShowModel.Shown;
return true;
}
#region 自定义数据初始化加载和数据收集
private void false;
Card8.Visible = false;
}
else
{
Card8.Visible = true;
if (null == Page.Request.Form["BomMainUI_TreeContro_Width"])
{
// 注册隐藏域，记录拖拽后左树宽度UFSoft.UBF.UI.AtlasHelper.RegisterAtlasHiddenField((Control)this.TreeControl0, "BomMainUI_TreeContro_Width", "350");
}
}
}
public void AfterEventBind()
{
}
public void BeforeUIModelBinding()
{
}
public void AfterUIModelBinding()
{
// 重画左树
ReDrawTheTree();
}
#endregion
#region 显示隐藏事件处理 重画页面
///
/// 重画页面
///
private void ReDrawTheTree()
{
SetUIWidth();
if (null != Page.Request.Form["BomMainUI_TreeContro_Width"])
{
decimal f;
if (decimal.TryParse(Page.Request.Form["BomMainUI_TreeContro_Width"].ToString(), out f))
{
TreeWidth = (int)f;
}
else
{
TreeWidth = 350;
}
}
else
{
TreeWidth = 350;
}
if (!IsPageTreeDisplay)
{
KillTree();
}
else if (CurTreeShowModel == TreeShowModel.Hidden)
{
TreeWidth = 1;
ShowTree();
}
else
{
ShowTree();
}
}
private void SetUIWidth()
{
string strScreenParams = Page.Session[_KEY_SCREEN_PARAMS] as string;
string[] screenParams = strScreenParams.Split(':');
if (screenParams.Length == 4)
{
if (Int32.Parse(screenParams[0]) > 1024)
{
MainUIWidth = Int32.Parse(screenParams[2]); // 主画面宽度
//TreeWidth = 270; // 树宽度
}
}
}
///
/// 树模式:显示树
///
private void ShowTree()
{
TabControlSpaceWidth = CalcTabControlWidth();
TabControlWidth = TabControlSpaceWidth - MarginWidth;
if (TabControlWidth < 0)
{
TabControlWidth = 0;
}
this.TreeControl0.Width = TreeWidth;
IGridLayout MainLayout = this.Card3.Layout as IGridLayout;
MainLayout.Columns[0].Width = new Unit(TreeWidth);
MainLayout.Columns[1].Width = new Unit(TreeBtnWidth);
MainLayout.Columns[2].Width = new Unit(TabControlSpaceWidth);
}
private int CalcTabControlWidth()
{
int iWidth = MainUIWidth - MarginWidth * 2 - TreeWidth - TreeBtnWidth;
//return MainUIWidth - MarginWidth * 2 - TreeWidth - TreeBtnWidth;
return iWidth >= 0 ? iWidth : 0;
}
#region 简单模式
///
/// 简单模式
///
public void KillTree()
{
TabControlSpaceWidth = MainUIWidth - MarginWidth * 2;
TabControlWidth = TabControlSpaceWidth - MarginWidth * 2;
IGridLayout MainLayout = this.Card3.Layout as IGridLayout;
MainLayout.Columns[0].Width = new Unit(1);
MainLayout.Columns[1].Width = new Unit(1);
MainLayout.Columns[2].Width = new Unit(TabControlSpaceWidth);
this.Card8.Visible = false;
this.TreeControl0.Visible = false;
}
#endregion 简单模式
#endregion
#endregion
}
树表结构界面布局大小自由拖拽实现
本文2024-08-20 16:44:32发表“u9cloud知识”栏目。
本文链接：https://wenku.my7c.com/article/yonyou-u9cloud-1154.html
