EasyUI的使用

EasyUI包含有很多“UI控件”，实现了网页中常见的（或者是一些模拟桌面的）效果，这样我们就不用“重新造轮子”了，只要掌握了这些控件的用法，就可以容易的在网页上实现这些效果了。

所以，接下来的问题就是，我们要学些、掌握这些控件的用法，有几点首先要明白：

1. EasyUI定义的控件，也是具有“属性”、“方法”和“事件”，用于设置控件的外观和行为。
2. EasyUI是基于HTML和JQuery的，基于HTML的意思是说：EasyUI就是通过为普通的HTML元素定义样式、扩展其属性而使这些元素成为“控件”的；基于JQuery的意思是说，我们可以使用JQuery的语法为普通的元素定义样式和扩展属性（包括修改样式和属性，当然也可直接设置这些样式和属性）；下面的例子演示这两种方法（这两个例子就是EasyUI官网首页的例子）：
   • 使用HTML定义控件（要点是：1.定义了class属性，每个控件都有特定的class属性，如这个例子就是定义了一个dialog；2.使用data-options来定义这些控件的属性、方法和事件）：

   1. <div class="easyui-dialog" style="width:400px;height:200px"
          data-options="title:'My Dialog',iconCls:'icon-ok',onOpen:function(){}">
              dialog content.
      </div>

   • 使用JS代码创建控件（要点是：1.combobox，每个控件都有特定的名称，如这个例子就是一个combobox；2.）：

   1. <input id="cc" style="width:200px" />
      $('#cc').combobox({
          url: ...,
          required: true,
          valueField: 'id',
          textField: 'text'
      });

3. EasyUI的控件是有“层次”关系的，如datagrid控件是基于panel/pagination等控件建立的，那么datagrid除了有自身的属性、方法和事件外，也会“继承”这两个控件的属性、方法和属性。

基本上，这三点是基础，适用于所有控件。所以知道这三点之后，后面的就是学习、掌握各个控件的具体属性、方法和事件了。在官网上，最重要的应该是这个“API”的说明：http://www.jeasyui.com/documentation/index.php，这里说明看不明白的，在看一下Tutorial（http://www.jeasyui.com/tutorial/index.php）中的例子，基本上都能够搞定。

在VS中，EasyUI可通过nuget获取，在页面中使用上述的方法定义控件之前，首先需要引用JQuery和EasyUI的样式文件和脚本，如下：

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

另外，EasyUI也有一些缺点，表现在：

1. EasyUI界面比较漂亮，但为实现漂亮的界面，在网页中添加了大量无语义的标签，这显然不符合Web语义、表现、行为分离的原则，但对于模拟桌面程序界面来讲，这个分离好像也不是特别重要；
2. 样式修改不方便，EasyUI的样式是固定写好的，如果你想自己调整一下，那么需要修改EasyUI的CSS文件，这基本上挺麻烦的。