基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用_javascript技巧
我们知道，一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面我们来逐一进行介绍。
1、单行文本框
使用easyui的控件，单行文本可以使用easyui-validatebox样式即可，类型为text的控件。
界面代码如下所示：
代码如下:
或者
代码如下:
赋值给界面控件代码如下：
代码如下:
$("#Name").val(info.Name);
获取界面控件的值代码如下：
代码如下:
var name = $("#Name").val();
如果是标签Lable控件，这需要把val 使用text替代即可，如下代码所示：
代码如下:
$("#Name").text(info.Name);
对于easyui-validatebox样式的控件，一般来说，有几个常见属性可以设置他们的。
2、多行文本框
easyui的界面样式，可以使用easyui-validatebox，或者默认的textarea即可。
界面代码如下所示：
代码如下:
或者
代码如下:
赋值给界面控件代码如下：
代码如下:
$("#type_Remark").val(json.Remark);
获取界面控件的值代码如下：
代码如下:
var text = $("#type_Remark").val();
3、密码文本框
密码文本框和常规的文本框一样，只是输入字符的时候，系统做了屏蔽显示而已，把它作为一个来独立说明，也是因为它也是常见输入的一种。
界面代码如下所示：
代码如下:
赋值给界面控件代码如下：
代码如下:
var password = '123';
$("#Password").val(password)
获取界面控件的值代码如下：
4、下拉列表Combobox
常见的EasyUI的ComboBox是可以输入，也可以从列表选择的内容的输入控件。
界面代码如下所示：
代码如下:
绑定下拉列表的数据源代码如下：
设置控件的选择的内容代码如下：
代码如下:
$("#type_PID1").combobox('setValue', json.PID);
获取界面控件的值代码如下：
代码如下:
var systemType= $("#txtSystemType_ID").combobox('getValue');
而利用标准的Select控件虽然可以实现从列表选择，不过不够ComboBox控件那么灵活方便，Select控件的界面代码如下：
代码如下:
5、日期输入控件
easyui使用class=‘easyui-datebox'来标识日期控件，从弹出的层中选择正确的日期，是一种非常常见的界面输入控件，可以替代My97DatePicker日期输入控件。
弹出窗体界面效果如下。
它的界面代码如下所示：
代码如下:
赋值给界面控件代码如下：
代码如下:
$("#LastUpdated").datebox('setValue', info.LastUpdated);
获取界面控件的值代码如下：
代码如下:
var lastupate = $("#txtLastUpdated").datebox('getValue');
6、数值输入控件
easyui使用样式easyui-numberbox标识为数值类型，其表现为文本框，但只能输入数值。
界面代码如下所示：
代码如下:
或者使用‘easyui-numberspinner'样式来标识，可以上下调节数值。
代码如下:
赋值给界面控件代码如下：
代码如下:
$('#nn').numberbox('setValue', 206.12);
或者
代码如下:
$('#ss').numberspinner('setValue', 8234725);
获取界面控件的值代码如下：
代码如下:
var v = $('#nn').numberbox('getValue');
或者
代码如下:
var v = $('#ss').numberspinner('getValue');
7、单项选择Radio控件
单项选择Radio控件，是在多项内容里面选择一个选项进行保存或者显示。
界面代码如下所示：
赋值给界面控件代码如下：
代码如下:
$('input:radio[name="SplitType"][value="Split"]').prop('checked', true);
获取界面控件的值代码如下：
代码如下:
$("input[name='SplitType']:checked").val()
或者使用Comobo控件作为单项选择的控件也是可以的，界面效果如下所示。
其界面代码如下所示：
赋值给界面控件代码如下：
代码如下:
$("#Visible1").prop('checked', info.Visible);
获取界面控件的值代码如下：
代码如下:
var visible = $("#txtVisible").val();
9、表格控件DataGrid
easyui的列表控件，可以通过指定table的class属性为easyui-datagrid即可实现表格的定义，界面代码如下所示：
不过为了避免使用脚本定义datagrid导致多次初始化的问题，我们一般只需要指定一个table代码即可，界面如下所示
而表格控件的数据加载，我们使用javascript进行初始化，初始化后的表格界面显示效果如下所示。
Javascript代码如下所示，其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。
对于查询按钮触发的数据后台查询及数据绑定操作，javascript代码如下所示：
通过构造一些查询参数并传递相应的值，后台根据这些参数，从对应控制器的分页方法 FindWithPager 获取相应的分页数据，并绑定到grid控件中。
另外，如果需要在grid里面增加一些图片或者链接什么的，应该如何操作呢？
如下界面所示的效果：
首先需要在初始化代码里面增加列的formatter回调函数，如下所示。
在formatter回调函数里面添加逻辑代码，判断是否可见，其实就是增加两个图片按钮，但是图片按钮的样式设置，必须在加载数据完毕后才能操作，因此需要在函数里面处理。
如果显示的图片不完整，设置行的自动调整高度属性为true即可。
autoRowHeight: true
10、树形控件
虽然easyui也有Tree控件，不过我较喜欢使用zTree这个树形控件，这个是一个免费的Jquery树控件。
引用代码如下所示：