初识jquery easyui看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。写了一些基本的增删改查功能，算是对该控件的基本入门。后续有时间继续深入学习。
在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php
先看一下运行后的页面
1、列表展示
2、新增页面
3、修改页面
把jquery easyui下载好之后，一般引用下页几个文件
复制代码 代码如下:
type="text/css" />
//页面图标样式
<script src="http://www.cnblogs.com/Resources/easyui/js/jquery-1.7.2.min.js" type="text/javascript"></script>
//jquery easyui主要的js
<script src="http://www.cnblogs.com/Resources/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>
首先是列表展示数据
复制代码 代码如下:
|
编号 |
卡名 |
密码 |
创建时间 |
创建人 |
|---|
jquery easyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。pagination是否显示分页，rownumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：自适应列宽；singleselected:单选。
工具条代码
复制代码 代码如下:
数据源格式
数据源添加弹出框
复制代码 代码如下:
closed="true" buttons="#dlg-buttons">
信息编辑
信息编辑
?
注：class为弹出框类型；closed:当前显示状态为隐藏；buttons:弹出框的功能按钮；
对弹出的添加页面添加样式
复制代码 代码如下:
?
js实现对数据的添加修改删除
复制代码 代码如下:
<script type="text/javascript"><br> var url;<br> var type;<br> function newuser() {<br> $("#dlg").dialog("open").dialog('setTitle', 'New User'); ;<br> $("#fm").form("clear");<br> url = "UserManage.aspx";<br> document.getElementById("hidtype").value="submit";<br> }<br> function edituser() {<br> var row = $("#dg").datagrid("getSelected");<br> if (row) {<br> $("#dlg").dialog("open").dialog('setTitle', 'Edit User');<br> $("#fm").form("load", row);<br> url = "UserManage.aspx?id=" + row.ID;<br> }<br> }<br> function saveuser() {<br> $("#fm").form("submit", {<br> url: url,<br> onsubmit: function () {<br> return $(this).form("validate");<br> },<br> success: function (result) {<br> if (result == "1") {<br> $.messager.alert("提示信息", "操作成功");<br> $("#dlg").dialog("close");<br> $("#dg").datagrid("load");<br> }<br> else {<br> $.messager.alert("提示信息", "操作失败");<br> }<br> }<br> });<br> }<br> function destroyUser() {<br> var row = $('#dg').datagrid('getSelected');<br> if (row) {<br> $.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {<br> if (r) {<br> $.post('destroy_user.php', { id: row.id }, function (result) {<br> if (result.success) {<br> $('#dg').datagrid('reload'); // reload the user data <br> } else {<br> $.messager.show({ // show error message <br> title: 'Error',<br> msg: result.errorMsg<br> });<br> }<br> }, 'json');<br> }<br> });<br> }<br> } <br> </script>
