EasyUI据悉MVC4+EasyUI的Web开发框架经验统计(6)–在页面中运用下拉列表的拍卖

在成千上万Web界面中,大家都可以看来不少下拉列表的要素,有些是一直的,有些是动态的;有些是字典内容,有些是其它表里面的称谓字段;有时候引用的是外键ID,有时候引用的是称呼文本内容;正确快捷利用下拉列表的拍卖,可以增强我们程序界面的赏心悦目性和温馨型,本文重要介绍在自我的Web开发框架以及相关的扩充Web应用中用到的局部代表性下拉列表的处理场景,希望给我们做个参考学习。

1、固定下拉列表的处理

代表性的定势列表有人手性此外拍卖,一般为男、女两种,而且为了有利于,一般用文件直接拔取,如下效果所示。

EasyUI 1

而它们的页面代码也很简短,如下所示。

<select class="easyui-combobox" id="Sex" name="Sex" style="width:120px;">
       <option>男</option>
       <option>女</option>  
 </select>

这种措施是相比较简单,需要多少个选项就增长,不需要十分的JS代码举办绑定处理,也不需要后台代码。然而这种硬编码的措施提议少用,除非不需要扩张,唯有一定几项的动静下。

这种情势,在EasyUI的处理形式中,comboBox的控件绑定代码如下所示。

$("#Sex").combobox('setValue', info.Sex);

而拿到控件的值我们就不再赘述了,一般通过JS代码把它们统一处理就足以了,如下代码所示。

var postData = $("#ffAdd").serializeArray();

 

永恒列表还有一种办法就是显示的是文本,存储的是数值,如0,1这样的形式。如我的微信框架之中,有对用户信息修改界面里面,是否订阅公众号的新闻,它背后存储的值是数值,显示的是文件。

EasyUI 2

界面代码如下所示,这种存储也是永恒列表,但是它们呈现和后台存储的始末见仁见智。

                    <tr>
                        <th>
                            <label for="Subscribe">是否订阅该公众号:</label>
                        </th>
                        <td colspan="3">
                            <select  id="Subscribe" name="Subscribe" class="easyui-combobox" style="width:150px">
                                <option value="1">订阅</option>
                                <option value="0">取消</option>
                            </select>&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>

而对于这么控件,绑定的代码也是和地点一样,只是绑定的始末是数值而已。

$("#Subscribe1").combobox('setValue', info.Subscribe);

而只要我们需要在View视图里面,通过Lable控件举行显示这个数值为文本,那么只需要对它举行简易处理就足以了。

$("#Subscribe2").text(info.Subscribe == "1" ? "订阅": "取消");

 

2、动态下拉列表的处理

刚才说到,固定列表在对于一些常规简单的选项尚可,然而对于需要扭转或者较多拔取的情况下,需要用到动态的下拉列表,动态下拉列表有少数种方法,一种是近似字典的绑定文本模式处理,一种是绑定外键引用的称呼模式等等。

下边我们来介绍一下三个不等的处理情势。

1)字典文本内容的下拉列表

在广大情状下,大家需要采取很多字典内容,多数意况下是引用字典的值(一般情状为文本内容)举办仓储就可以了。字典列表在成千上万场所很有益于,我们得以在后台举行字典项的动态管理,这样可以立时上报到界面元素上,实现列表内容的动态显示了。

比如说我在关系人编写的Web界面里面,需要使用过多字典项的内容,界面效果如下所示。

EasyUI 3

地方黑色框选的都是动态的下拉列表项目,这大家咋样动态绑定它的情节在Web界面上的啊?

率先大家需要在字典视图的控制器上定义一个字典函数,用来回到Json消息给界面使用的,具体后台代码如下所示。

        /// <summary>
        /// 根据字典类型获取对应的字典数据,方便UI控件的绑定
        /// </summary>
        /// <param name="dictTypeName">字典类型名称</param>
        /// <returns></returns>
        public ActionResult GetDictJson(string dictTypeName)
        {
            List<CListItem> treeList = new List<CListItem>();
            CListItem pNode = new CListItem("", "");
            treeList.Insert(0, pNode);

            Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);
            foreach (string key in dict.Keys)
            {
                treeList.Add(new CListItem(key, dict[key]));
            }
            return ToJsonContent(treeList);
        }

地点的CListItem是一个自定义类,包含了Text和Value五个属性。

下面的控制器函数,重回的内容恐怕是下边的类似格式(Json格式)

[
    {
      Text: "",
      Value: ""
    },
    {
      Text: "教授",
      Value: "教授"
    },
    {
      Text: "护士长",
      Value: "护士长"
    }
]

下边表明了控制器的拍卖逻辑和数目格式,那么视图代码里面,如何通过JS代码举行绑定动态列表呢?

由于反复用到了绑定字典列表的操作,大家先定义一个通用的JS函数,用来裁减代码重复,如下所示

        function BindDictItem(control, dictTypeName) {
            $('#' + control).combobox({
                url: '/DictData/GetDictJson?dictTypeName='+ dictTypeName,
                valueField: 'Value',
                textField: 'Text'
            });
        }

下一场在急需起先化界面的字典列表的时候,调用这么些JS函数就可以了,如下代码所示。

        //初始化字典信息
        function InitDictItem() {
            BindDictItem("Titles", "职称");
            BindDictItem("Rank", "职务");
            BindDictItem("Importance", "重要级别");
            BindDictItem("Recognition", "对公司认可程度");
            BindDictItem("InterestDemand", "客户利益诉求");
            BindDictItem("CareFocus", "客户关心重点");
            BindDictItem("ResponseDemand", "负责需求");
            BindDictItem("RelationShip", "与公司关系");
            BindDictItem("Nationality", "民族");
            BindDictItem("Political", "政治面貌");
            BindDictItem("JobType", "职业类型");
            BindDictItem("Eduction", "学历");
            BindDictItem("Animal", "属相");
            BindDictItem("Constellation", "星座");
            BindDictItem("MarriageStatus", "婚姻状况");
            BindDictItem("HealthCondition", "健康状况");
            BindDictItem("BodyType", "体型");
        }

 

2)绑定外键引用名称

看完下边的动态列表处理,也许已经缓解您大多数的问题了,但是有时大家也许有这么的需求,在一个表里面需要引用此外一个表的ID,但是大家需要在界面编辑的时候,直观一些,也就是因而名称来取代ID的展现,后台存储的时候,存储那一个控件的ID值就足以了。例如我在开创客户互换人的时候,我可能需要采用客户,因而需要规划一个功力按钮,弹出一个界面供自己从列表中采取客户,选取好后在主界面中突显客户的名称;如若已经保存过举行编制的,直接展示客户名称就可以了,需求效果如下所示。

EasyUI 4

EasyUI 5

 接纳客户后,效果如下所示。

EasyUI 6

打探了地点的界面效果,具体代码是什么落实的吧?

实际上就是索要定义一个ID的隐藏字段用于存储数据库,一个是显示的只读的文本框用来呈现名称,还有一个按钮就足以了,部分代码如下所示。

  <tr> 
          <th>
             <label for="Customer_ID">客户名称:</label>
           </th>
           <td colspan="3">
              <input class="easyui-validatebox" style="width:300px;background-color:peachpuff" readonly="readonly" type="text" id="Customer_Name" name="Customer_Name" data-options="required:true,validType:'length[1,50]'"/>
               <input type="hidden" style="width:300px" id="Customer_ID" name="Customer_ID" />
               <a href="javascript:void(0)" class="easyui-linkbutton" id="btnSelectCustomer" iconcls="icon-search">选择客户</a>
            </td>
     </tr>

慎选客户的时候,大家由此调用一个窗口举办客户音信的显示,然后客户采纳后,把主界面的情节更新一下就足以,具体JS界面代码如下所示。

        //绑定选择客户按钮的事件
        function BindSelectCustomerEvent() {
            $("#btnSelectCustomer").click(function () {
                $.showWindow({
                    title: '选择客户',
                    useiframe: true,
                    width: 900,
                    height: 700,
                    content: 'url:/Customer/SelectCustomer',
                    data: { id: $('#Customer_ID'), name: $('#Customer_Name') },
                    buttons: [{
                        text: '确认',
                        iconCls: 'icon-ok',
                        handler: 'doOK' //此方法在弹出页面中
                    }, {
                        text: '取消',
                        iconCls: 'icon-cancel',
                        handler: function (win) {
                            win.close();
                        }
                    }],
                    onLoad: function (win, content) {
                        //window打开时调用,初始化form内容
                        if (content) {
                            content.doInit(win);
                        }
                    }
                });
            });
        }

在用户已有数据的情形下一旦打开界面大家把客户的名称转义过来赋值给相应名称的控件就足以了,ID隐藏的控件按正常赋值就可以了,如下所示

                $.getJSON("/Customer/GetCustomerName?id=" + info.Customer_ID, function (result) {
                    $("#Customer_Name").val(result);
                });

 

基于MVC4+EasyUI的Web开发框架的多元作品:

 

依据MVC4+EasyUI的Web开发框架形成之旅–总体介绍

 

据悉MVC4+EasyUI的Web开发框架形成之旅–MVC控制器的宏图

 

按照MVC4+EasyUI的Web开发框架形成之旅–界面控件的行使

 

依据MVC4+EasyUI的Web开发框架形成之旅–附件上传组件uploadify的应用

 

据悉MVC4+EasyUI的Web开发框架形成之旅–框架总体界面介绍

 

依照MVC4+EasyUI的Web开发框架形成之旅–基类控制器CRUD的操作

 

按照MVC4+EasyUI的Web开发框架形成之旅–权限控制

 

基于MVC4+EasyUI的Web开发框架经验总括(1)-利用jQuery Tags Input
插件展现采取记录

 

遵照MVC4+EasyUI的Web开发框架经验总括(2)-
使用EasyUI的树控件构建Web界面

 

依照MVC4+EasyUI的Web开发框架经验统计(3)-
使用Json实体类构建菜单数据

 

据悉MVC4+EasyUI的Web开发框架经验总计(4)–使用图表控件Highcharts

 

遵照MVC4+EasyUI的Web开发框架经验总括(5)–使用HTML编辑控件CKEditor和CKFinder

 

依照MVC4+EasyUI的Web开发框架经验总计(6)–在页面中应用下拉列表的拍卖

 

据悉MVC4+EasyUI的Web开发框架经验总括(7)–实现省份、城市、行政区三者联动

 

基于MVC4+EasyUI的Web开发框架经验统计(8)–实现Office文档的预览

 

按照MVC4+EasyUI的Web开发框架经验总计(9)–在Datagrid里面实现外键字段的转义操作

 

按照MVC4+EasyUI的Web开发框架经验总结(10)–在Web界面上实现数量的导入和导出

 

据悉MVC4+EasyUI的Web开发框架经验总计(11)–使用Bundles处理简化页面代码

 

基于MVC4+EasyUI的Web开发框架经验总计(12)–利用Jquery处理数量交互的三种方法

 

遵照MVC4+EasyUI的Web开发框架经验总计(13)–DataGrid控件实现全自动适应宽带高度

 

遵照MVC4+EasyUI的Web开发框架经验总计(14)–自动生成图标样式文件和图标的接纳操作