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.Name = "listBoxContainer";        
                listBoxPane.Size = Unit.Percentage(20);        //定义宽度为20%

                listBoxPane.ShowCollapseBackwardButton = DefaultBoolean.True;    

//是否显示伸缩按钮,这个地方有两个注意点:一、ShowCollapseBackwardButton 是可调节与自动伸缩调节的。二、DefaultBoolean.True有两种方式，如果是{ get; set; }，就用这个方法，另一种可以直接给True；

                ————————————————————————————————————

                listBoxPane.SetContent(() => {        //定义Pane的内容
                    @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 . Width   =   Unit . Percentage ( 100 ) ;  //这是继承下来的,注意后面的写法,Unit是一个自定义类,很多东西
         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文档了;

            control.SetHeight(splitterPane.GetClientHeight());
        }


        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>