EasyUI
是一个基于JQuery的框架,集成了各种用户界面插件.
该框架提供了创建网友所需要的一切东西,轻松建立站点.
在使用easyUI之前要先声明UI控件.
1.直接在HTML声明控件.
<div class = "easyui-dialog" style="width: 400px; height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div>
2.编写Javascript代码来创建组件.
<input id="cc" style="width:200px"/>
$('#cc').combobox({
url:...,
required:true,
valueField:'id',
textField: 'text'
});
然后就可以创建easyui提供的各种便捷的应用.
数据收集并妥善管理数据是网络应用共同的必要.CRUD增删查改
JQuery EasyUI框架实现了一个CRUD DataGrid
将使用以下的插件:
- datagrid: 向用户展示列表数据.
- dialog:创建或编辑一条单一的用户信息.
- form:用于提交表单数据
- messager: 显示一些操作信息.
准备数据库
INSERT INTO USERS VALUES(1,"daadadI","ZHIdsada",22222222,"[email protected]");
SELECT * FROM users;
2创建DataGrid来显示用户信息
<table id="dg" title= "My Users" class="easyui-datagrid"
style="width:550px;height:250px"
url="get_users.php"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true" >
<thead>
<tr>
<th field="fisrtname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
<thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>