EasyUI学习笔记记录

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>