Jquery EasyUI入门

一.入门

1.官网:http://www.jeasyui.net/

2.下载:http://www.jeasyui.com/download/index.php，下载自己喜欢的版本

   3.EasyUI 例子:http://www.jeasyui.net/demo/380.html，这里面有很多个例子，可以参考

   4.EasyUI API:http://www.jeasyui.net/plugins/，可以参考里面提供的方法和属性

二.常用的方法及属性

1.表格：

1)表格的html代码:

<!--class="easyui-datagrid":这个是easyUI自己内部定义的样式,我们不用动它的title="Emp Operation":表格的标题style="width:700px;height:250px":表格的样式data-options="":这个属性很重要,我们在api中要使用的属性可以以json的方式写在该里面,我这里就简单的介绍这些属性的意思singleSelect:如果为true,则只允许选择一行,否则选择多行.collapsible:创建出来的表可以收缩,展开url:表示后台请求的springMVC路径或者Struts2的Action路径rownumbers:将表的第一列作为行标识符method:请求json的方式,POST,GET这些键值对我们也可以写在js代码中比如:$("<表的jQuery对象>").datagrid({键:值,键:值,.....})th中的属性data-options="field:'employeeid"这个键值则代表field指定是实体类中的属性,如果没对好,则不显示数据 --><table id="empTab" class="easyui-datagrid" title="Emp Operation" style="width:700px;height:250px"data-options="singleSelect:true,collapsible:true,url:'${pageContext.request.contextPath}/ajaxQuery',rownumbers:true,method:'get'"><thead><tr><th data-options="field:'employeeid',width:80,align:'center'">雇员id</th><th data-options="field:'employeename',width:100,align:'center'">雇员姓名</th><th data-options="field:'employeepost',width:80,align:'center'">雇员职位</th><th data-options="field:'employeehiredate',width:206,align:'center'">雇员入职时间</th><th data-options="field:'employeemonthlysalary',width:100,align:'center'">雇员月薪</th><th data-options="field:'departmentid',width:100,align:'center'">部门编号</th></tr></thead></table>

2).添加分页插件:

在data-options中或者js代码中添加键值对:pagination:true，自动会给我们添加分页插件，需要注意的是pagination将发送两个参数到服务器：page:页码，起始值rows:每页显示的行，还有一个代表就是返回的数据也是rows。可以参考：http://www.jeasyui.net/tutorial/21.html

3).添加工具栏:

通过js代码来添加，比如:

$('<表的jQuery对象>').datagrid({//指定键值对toolbar:[{//图标,通过在icon.css文件中查找iconCls: 'icon-add',//点击工具按键的时候触发的事件handler: function(){//点击增加的弹出一个窗口$('#win').window('open');},//工具按键的显示文字text: '增加'},{},{}]})

4).增加搜索框:

<script type="text/javascript">//这个函数是代表当我点击查询或者按下回车键,调用的函数    function qq(value,name){    alert(value+":"+name)    }</script><!--这个input代表的是搜索框 --><input id="ss" class="easyui-searchbox" style="width:300px"    data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'"></input><!--这个div代码有两种方式来搜索--><div id="mm" style="width:120px">    <div data-options="name:'all',iconCls:'icon-ok'">All News</div>    <div data-options="name:'sports'">Sports News</div></div>

1.具体可以参考http://www.jeasyui.net/plugins/156.html

5).窗口:

<!--创建窗口--><div id="win" class="easyui-window" title="Login" style="width:300px;height:180px;"><!--窗口中添加form表单--><form style="padding:10px 20px 10px 40px;"><p>Name: <input type="text"></p><p>Pass: <input type="password"></p><!--关闭按钮,提交按钮--><div style="padding:5px;text-align:center;"><a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a><a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a></div></form></div>

1.具体参考http://www.jeasyui.net/tutorial/47.html

6).如果这么说了你还不会下载，那你就下载我的吧！

http://download.csdn.net/my/uploads