EasyUI 实战

EasyUI是什么？

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

有什么优点？
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

之前我们是怎么设计前台页面的？
在新闻发布系统里面，前台的界面都时自己写的html 以及css 样式，用的控件也都是vs 自带的控件，这样设计出来界面需要我们自己写很多的html代码和css 样式设计，这样对于前端不是很熟练的开发人员来说，不是很容易进行。

怎么使用EasyUI 设计前台页面？

1在网上下载EasyUI库文件，加载到项目中

2.在页面显示层（MVC框架是在view中）引入必要的easyui的文件

<!--引用easyui 的js -->    <script src="~/easyui/jquery.min.js"></script>    <script src="~/easyui/jquery.easyui.min.js"></script>   <!--引用样式-->   <link href="~/easyui/themes/default/easyui.css" rel="stylesheet" />    <link href="~/easyui/themes/icon.css" rel="stylesheet" />    <link href="~/easyui/demo/demo.css" rel="stylesheet" />

3.创建组件,创建EasyUI组件有两种方法
(1)直接在HTML中声明组件
直接使用class=”easyui-组件名”就可以，这样使用的就是EasyUI样式

 <table class="easyui-datagrid" title="我的申请" style="width: 750px; height: 250px"data-options="              singleSelect:true,     @*设置为 true，则只允许选中一行。*@              collapsible:true,              rownumbers:true,      @*设置为 true，则显示带有行号的列。*@              autoRowHeight:false,              pagination:true,      @*设置为 true，则在数据网格（datagrid）底部显示分页工具栏。*@              pageSize:20"> <thead>          <tr>     <th data-options="field:'ItemNo',halign:'center'">物品编号</th>     <th data-options="field:'ItemName',halign:'center'">商品名称</th>     <th data-options="field:'CategoryID',halign:'center'">商品类别</th>             </tr> </thead> </table>

(2)编写JavaScript代码来创建组件

<table id="dg"></table>

$('#dg').datagrid({        //类型为get，是要查询数据，从数据库获取数据        type: "GET",        //获取数据的地址，此地址为对应的controller,去执行对应的controller,MVC里的controller相当于三层中的U层        url: "/MyApplication/ShowAllApplication",        //返回的数据类型为json类型        dataType: "json",     //数据网格列数组对象         columns:[[             { field: 'ItemNo', title: '商品编号', editor: 'text' },                    { field: 'ItemName', title: '商品名称', editor: 'text' },             { field: 'CategoryID', title: '商品类别', editor: 'text' },             ]]   

这两种方式都需要做的工作是：
在项目所在的资源管理器中打开easyui文件夹中的demo,找到自己需要的组件，看是不是自己需要的，如果是的话就找到自己需要的代码部分，把自己需要的代码复制到需要的view里或者js里。

总结：
EasyUI 是一个轻量级，快捷的界面设计组件，在这里就是是总结一下怎么学习：
1.思想：学习任何东西都是一种思想，像EasyUI就是一种封装的思想，使得开发快速便捷，就像学习三层分层思想，以及MVC框架，还有angular框架，我认为他们的思想也都是一样的，使得项目工程化，模块化。

2.方法：学习任何内容，首先需要系统学习，最快速的办法就是看文档，然后再结合项目，在项目中运用，不会的地方可以先看别人怎么写的，然后再回来看文档，这样反复思考，会让我们对只是掌握的更牢固。

3.程度：学习一个内容要学到极致，有了问题就去查，一定要明白为什么，原理，是什么，这样当我们再接触新的内容的时候才会很容易和之前的内容产生联系和共鸣，这样学习起来很容易接受和理解。