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.