WebMVC中EasyUI的ComboBox控件的运用

最新推荐文章于 2022-02-14 11:46:18 发布

原创最新推荐文章于 2022-02-14 11:46:18 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在WebMVC项目中使用EasyUI的ComboBox控件，并提供了从引入脚本到绑定数据源的具体步骤，还列举了常用的属性设置。

WebMVC中EasyUI的ComboBox控件的运用

运用EasyUI+JQuery

一、2个引用（script文件夹）

JS：EasyUIValidator.js
JQuery：jquery.unobtrusive-ajax.js

二、1个控件（View文件夹-cshtml文件）

<input id="ComboxID" class="easyui-combobox" name="comboxName" data-options="valueField:'id',textField:'text'" />
操作数据项

<div id="TableID">
    <table>
        <tr>
            <td>DataID</td>
            <td>DataValue</td>
        </tr>
    </table>
</div>

三、数据源——在Controller中，写查询方法

作为ComboxBox数据的来源，给comboBox传键值对（key \ Value）。key作为一条数据项的标签（索引），value用于显示。

例：

Controller名称：TestController
方法名为：Exercises
key ：hiddenID
value ：showName

四、绑定数据源

$('#ComboxID').combobox({
            url: '/Test/QueryExercises',
            valueField: 'hiddenID',
            textField: 'showName'
        });

五、设置comboBox默认显示值

//获取选中表格行的数据
var selectRow = $('#TableID').datagrid('getSelection');                //支持单选
//var selectRows = $('#TableID').datagrid('getSelections');            //支持多选
//设置默认显示项的key、Value
$('#ComboxID').combobox('setValue', selectRows. propertyID);          
$('#ComboxID').combobox('setText', selectRows. propertyName);

六、其他操作和常用属性：

1）Text属性：获取当前显示的文本

2）SelectedText属性：获得当前选中的文本（控件获得光标且DropDown属性不为DropDownList）

注意：但应注意，所选内容会因用户交互而自动更改。如Button的Click事件中，SelectedIndexChanged 或SelectedValueChanged 事件中，此属性会返回空字符串（参见MSCN：http://msdn.microsoft.com/zh-cn/partners/system.windows.forms.combobox.selectedtext(VS.90).aspx )

3）SelectedValue属性：当前显示项对应的Value值（仅在绑定数据源时，设置了ValueMember时才可以用）

4）SelectedItem属性：控件当前选中项

5）SelectedIndex属性：当前选中项的索引

项目经验总结：

使用分部视图（部分视图），需要着重注意id命名的问题。

原理：分部视图在逻辑上是一个整视图，而在同一个视图cshtml（html）文件中，id是唯一性标识符，不能重复。

分部视图在物理上是分在不同cshtml文件，这给程序检错带来了困难，在编译、运行阶段都不会报出明显的错误，但功能因混乱而可能无法实现。

预防方式：养成良好的编程-命名习惯，分部视图一般是按功能进行划分成不同的‘分功能’视图，最后编译成整一个‘全功能’视图，那id最好以分功能的标识符开头来命名。

如：