DevExpress看明白代码--Splitter.Resizing完整案例解读
DevExpress的组件摸了一段时间了，很多都不太明白，记录下来备查
[Controller]解读
namespace DevExpress.Web.Demos {
public partial class SplitterController: DemoController {public ActionResult Resizing() {
ViewData["Employees"] = NorthwindDataProvider.GetEmployeesList(); //约定:找相关的方法等看颜色
int employeeID = NorthwindDataProvider.GetFirstEmployeeID();
return DemoView("Resizing", NorthwindDataProvider.GetOrders(employeeID));//根据ID拿Orders列表
}
public ActionResult ResizingPartial() {
int employeeID = !string.IsNullOrEmpty(Request.Params["EmployeeID"]) ? int.Parse(Request.Params["EmployeeID"]) : NorthwindDataProvider.GetFirstEmployeeID();
//三元表达式 如果EmployeeID不等于空,把object转为int,否则通过方法拿到ID,目的是为后面返回模型
return PartialView("ResizingPartial", NorthwindDataProvider.GetOrders(employeeID));}
}
}
_____________________________________________
调用数据的方法
public static IEnumerable GetEmployeesList() { //可遍历数据格式组合姓名
return DB.Employees.ToList().Select(e => new { //定义list给前端用
ID = e.EmployeeID,
Name = e.LastName + " " + e.FirstName
});
}
public static int GetFirstEmployeeID() {
return DB.Employees.First().EmployeeID;
}
public static Employee GetEmployee(int employeeId) {
return DB.Employees.Single(e => employeeId == e.EmployeeID); //根据ID获得唯一一条记录,注意黄色地方用法
}
_____________________________________________
@using (Html.BeginForm()){
@Html.DevExpress().Splitter(settings =>
{
settings.Name = "splResizing"; //注意不要重复
settings.Height = 400; //高
settings.Width = Unit.Percentage(100); //宽等于100%
settings.Styles.Pane.Paddings.Padding = 0; //去内边距
settings.Panes.Add(listBoxPane => { //第一个Pane的内容
//添加listBox
—————————这里定义的是Pane的内容———————————————
listBoxPane.Size = Unit.Percentage(20); //定义宽度为20%
listBoxPane.ShowCollapseBackwardButton = DefaultBoolean.True;
//是否显示伸缩按钮,这个地方有两个注意点:一、ShowCollapseBackwardButton 是可调节与自动伸缩调节的。二、DefaultBoolean.True有两种方式，如果是{ get; set; }，就用这个方法，另一种可以直接给True；
————————————————————————————————————
@Html.DevExpress().ListBox( //貌似可以定义所有的东西
listBoxSettings => {
listBoxSettings.Name = "lblEmployees"; //这个名称很有用,是后面JS获取值的依据
listBoxSettings.Height = Unit.Percentage(100);
listBoxSettings.ControlStyle.Border.BorderWidth = 0; //去边框,用Pane的
listBoxSettings.Properties.TextField = "Name"; //显示字段
listBoxSettings.Properties.ValueField = "ID"; //值字段
listBoxSettings.Properties.ValueType = typeof(Int32); //值为数值型的
listBoxSettings.SelectedIndex = 0; //默认选择第一行
listBoxSettings.Properties.ClientSideEvents.ValueChanged = "OnListBoxValueChanged"; //如果选择值改变就调用这个JS
})
.BindList(ViewData["Employees"]) //绑定数据源为ListBox提供数据
.Render(); //实时渲染
});
});
settings.Panes.Add(contentPane => { //第二个pane的内容
contentPane.MinSize = 350; //限制最大值,是指高度
contentPane.Panes.Add(gridPane => { //开始设置Pane内容
gridPane.Name = "gridContainer";
gridPane.Size = Unit.Percentage(60); //这个60%是指宽度,还有20%给滚动条用
gridPane.MinSize = 100; //最小100可以保留列头
gridPane.SetContent(() => {
@Html.RenderPartial("ResizingPartial", Model);
//这个用法要特别注意:实时渲染一个分部视图,并传递一个模型,这个Model是controller传过来的
});});
contentPane.Panes.Add(editorsPane => { //都是重复的内容
editorsPane.Name = "editorsContainer";
editorsPane.MinSize = 100;
editorsPane.ShowCollapseForwardButton = DefaultBoolean.True;
editorsPane.SetContent(() => {
@Html.RenderPartial("ResizingLayoutPartial", Model);
//这个地方很巧妙,没有controller的分部视图。RenderPartial只能直接放在代码块中,不能放在表达式中(返回值是空)。加上model后可以使用强类型，由主视图传入。还有一个重载可以用ViewData传值；
});});
});
settings.ClientSideEvents.PaneResized = "OnSplitterPaneResized"; //Pane重置时调用的JS
settings.PreRender = (sender, e) => { //根据Theme想匹配的Css文件
if(ASPxWebControl.GlobalTheme.Contains("Metropolis")) //大都市
((MVCxSplitter)sender).Styles.Pane.CssClass = "metropolisPane";
else if(ASPxWebControl.GlobalTheme.Contains("Youthful")) //年轻的
((MVCxSplitter)sender).Styles.Pane.CssClass = "youthfulPane";
else
((MVCxSplitter)sender).Styles.Pane.CssClass = string.Empty;
};
}).GetHtml()
}
@Html.DevExpress().GridView(
settings =>{
settings.Name = "gvEmployees"; //特别注意不要重名,重名会出现很多不可预知的问题
settings.CallbackRouteValues = new { Controller = "Splitter", Action = "ResizingPartial" };
//CallbackRouteValues 名字已经说明问题了,只要出现这个一般会跟settings.PreRender一起出现,就是为后者准备数据的
settings.ControlStyle.Border.BorderWidth = 0; //外框,默认会粗一条线出来
settings.KeyFieldName = "OrderID"; //主键
settings.Settings.VerticalScrollBarMode = ScrollBarMode.Auto; //垂直滚动条模式
settings.Settings.VerticalScrollableHeight = 100; //好象没什么效果
settings.SettingsBehavior.AllowFocusedRow = true; //设置动作为可以获得行焦点,为JS提供数据
settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords; //分布模式,显示所有页面
settings.Columns.Add("OrderID"); //以下都是添加列
settings.Columns.Add("ShipName").Width = 200;
settings.Columns.Add("Quantity");
settings.Columns.Add("UnitPrice").PropertiesEdit.DisplayFormatString = "c"; //定义显示货币符号
settings.Columns.Add("ContactName").Visible = false; //不可见,但有用
settings.Columns.Add("CompanyName").Visible = false;
settings.Columns.Add("City").Visible = false;
settings.Columns.Add("Address").Visible = false;
settings.Columns.Add("Phone").Visible = false;
settings.Columns.Add("Fax").Visible = false;
//-------------------------------------定义了三个动作的JS响应
settings.ClientSideEvents.BeginCallback = "OnGridBeginCallback"; //Callback前调用JS
settings.ClientSideEvents.EndCallback = "OnGridEndCallback"; //
settings.ClientSideEvents.FocusedRowChanged = "UpdateEditorsValues";
settings.PreRender = (sender, e) => { //根据赋值渲染初始效果
ASPxGridView grid = (ASPxGridView)sender;
grid.FocusedRowIndex = 0;
};
}).Bind(Model).GetHtml()
//无controller的分部视图
@Html.DevExpress().FormLayout(settings => {
settings.Name = "formLayout";
settings.ControlStyle.CssClass = "custom-form-layout"; //自定义的CSS
settings.Items.AddGroupItem(g => { //分组
g.GroupBoxDecoration = GroupBoxDecoration.None; //不要组名
g.Items.Add(i => { //添加项目
i.Caption = "Customer name:"; //标题
i.NestedExtension().TextBox(tb => { //嵌套组件用法
tb.Name = "tbContactName";
tb.Width = Unit.Parse("100%");
//这个用法要注意,转换字符为100%。Unit里面提供了四个方法：Parse(string s, CultureInfo culture);
Parse(string s);
Percentage(double n);
Pixel(int n);
Point(int n);
});
});
g.Items.Add(i => {
i.Caption = "Company name:";
i.NestedExtension().TextBox(tb => {
tb.Name = "tbCompanyName";
tb.Width = Unit.Parse("100%");
});
});
g.Items.Add(i => {
i.Caption = "Contacts:";
i.CssClass = "custom-group";
i.Height = Unit.Parse("100%"); //定义可变高度
i.NestedExtension().Memo(m => {
m.Name = "mContacts";
m.Width = Unit.Parse("100%");
m.Height = Unit.Parse("100%");
});
});
});
}).GetHtml()
相关的JS代码
<script>
function OnGetRowValues(values) {
tbContactName.SetText(values[0]);
tbCompanyName.SetText(values[1]);
var memoText = '';
if (values[2] != null) memoText += 'City: ' + values[2] + '\n';
if (values[3] != null) memoText += 'Address: ' + values[3] + '\n';
if (values[4] != null) memoText += 'Phone: ' + values[4] + '\n';
if (values[5] != null) memoText += 'Fax: ' + values[5] + '\n';
mContacts.SetText(memoText);
}
function UpdateEditorsValues() {
gvEmployees.GetRowValues(gvEmployees.GetFocusedRowIndex(), 'ContactName;CompanyName;City;Address;Phone;Fax', OnGetRowValues);
//GetFocusedRowIndex是GridVeiw公共方法，要查文档，返回焦点行的索引。
//GetRowValues三个参数的意思：一、拿到数据行的值，二、用分号分隔数据源字段的名称，返回行内的值，三、定义回调方法
}var dataChanged = false; //定义一个全局变量,这个值是给OnGridEndCallback用的
function OnListBoxValueChanged(s, e) {
gvEmployees.Refresh(); //刷新gridView页面,gvEmployees就是settings.Name = "gvEmployees";
dataChanged = true; //改变变量
}
function OnSplitterPaneResized(s, e) {
var name = e.pane.name; // 通过参数e.pane.name拿值 按F12找找会有收获的
if (name == 'listBoxContainer')
ResizeControl(lblEmployees, e.pane); //如果name="",调用方法ResizeControl并传值
else if (name == 'gridContainer')
ResizeControl(gvEmployees, e.pane);
}
function ResizeControl(control, splitterPane) { //根据传过来的值调整pane的宽度与高度达到伸缩的效果
control.SetWidth(splitterPane.GetClientWidth());
//GetClientWidth()这个方法的来历要去查API文档了;
}
function OnGridEndCallback(s, e) { //结束回调时变更相关参数
splResizing.GetPaneByName("gridContainer").RaiseResizedEvent(); //根据Pane的name生成客户端事件
if (dataChanged) {
UpdateEditorsValues();
dataChanged = false;
}
}
function OnGridBeginCallback(s, e) {
e.customArgs["EmployeeID"] = lblEmployees.GetValue(); //获取EmployeeID的值
}
</script>