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最好以分功能的标识符开头来命名。

如：

• 分功能视图Edit.cshtml下的ButtonSubmit控件命名为editButtonSubmit或editBtnSubmint；
  
• 分功能视图Add.cshtml下的ButtonSubmit控件命名为addButtonSubmit或addBtnSubmint.