管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

　　初识Jquery EasyUI看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。写了一些基本的增删改查功能，算是对该控件的基本入门。后续有时间继续深入学习。

　　在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php

　　先看一下运行后的页面

　　1、列表展示

Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

　　2、新增页面

Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

　　3、修改页面

Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

　　把jquery easyui下载好之后，一般引用下页几个文件

　　

复制代码 代码如下:

　　<link href="http://www.cnblogs.com/Resources/easyui/css/default.css" rel="stylesheet" type="text/css" />

　　<link href="http://www.cnblogs.com/Resources/easyui/js/themes/default/easyui.css" rel="stylesheet"

　　type="text/css" />

　　//页面图标样式

　　<link href="http://www.cnblogs.com/Resources/easyui/js/themes/icon.css" rel="stylesheet" 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>

　　首先是列表展示数据

　　

复制代码 代码如下:

　　<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; height: 250px"

　　url="http://www.cnblogs.com/GetJson/CreateJson.aspx" toolbar="#toolbar" pagination="true" rownumbers="true"

　　fitcolumns="true" singleselect="true">

　　<thead>

　　<tr>

　　<th field="AccountCode" width="50">

　　编号

　　</th>

　　<th field="AccountName" width="50">

　　卡名

　　</th>

　　<th field="AccountPwd" width="50">

　　密码

　　</th>

　　<th field="CreateTime" width="50">

　　创建时间

　　</th>

　　<th field="CreateName" width="50">

　　创建人

　　</th>

　　</tr>

　　</thead>

　　</table>

　　jquery easyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。pagination是否显示分页，rownumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：自适应列宽；singleselected:单选。

　　工具条代码

　　

复制代码 代码如下:

　　<div id="toolbar">

　　<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" onclick="newuser()"

　　plain="true">添加</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit"

　　onclick="edituser()" plain="true">修改</a> <a href="javascript:void(0)" class="easyui-linkbutton"

　　iconcls="icon-remove" plain="true">删除</a>

　　</div>

　　数据源格式

Jquery EasyUI的添加，修改，删除，查询等基本操作介绍

　　数据源添加弹出框

　　

复制代码 代码如下:

　　<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;"

　　closed="true" buttons="#dlg-buttons">

　　<div class="ftitle">

　　信息编辑

　　</div>

　　<form id="fm" method="post">

　　<div class="fitem">

　　<label>

　　编号

　　</label>

　　<input name="AccountCode" class="easyui-validatebox" required="true" />

　　</div>

　　<div class="fitem">

　　<label>

　　卡号</label>

　　<input name="AccountName" class="easyui-validatebox" required="true" />

　　</div>

　　<div class="fitem">

　　<label>

　　密码</label>

　　<input name="AccountPwd" class="easyui-validatebox" required="true" />

　　</div>

　　<div class="fitem">

　　<label>

　　创建时间</label>

　　<input name="CreateTime" class="easyui-datebox" required="true" />

　　</div>

　　<div class="fitem">

　　<label>

　　创建人</label>

　　<input name="CreateName" class="easyui-vlidatebox" />

　　</div>

　　<input type="hidden" name="action" id="hidtype" />

　　<input type="hidden" name="ID" id="Nameid" />

　　</form>

　　</div>

　　?<div id="dlg-buttons">

　　<a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveuser()" iconcls="icon-save">保存</a>

　　<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')"

　　iconcls="icon-cancel">取消</a>

　　</div>

　　注：class为弹出框类型；closed:当前显示状态为隐藏；buttons:弹出框的功能按钮；

　　对弹出的添加页面添加样式

　　

复制代码 代码如下:

　　?<style type="text/css">

　　#fm

　　{

　　margin: 0;

　　padding: 10px 30px;

　　}

　　.ftitle

　　{

　　font-size: 14px;

　　font-weight: bold;

　　padding: 5px 0;

　　margin-bottom: 10px;

　　border-bottom: 1px solid #ccc;

　　}

　　.fitem

　　{

　　margin-bottom: 5px;

　　}

　　.fitem label

　　{

　　display: inline-block;

　　width: 80px;

　　}

　　</style>

　　js实现对数据的添加修改删除

　　

复制代码 代码如下:

　　<script type="text/javascript">

　　var url;

　　var type;

　　function newuser() {

　　$("#dlg").dialog("open").dialog('setTitle', 'New User'); ;

　　$("#fm").form("clear");

　　url = "UserManage.aspx";

　　document.getElementById("hidtype").value="submit";

　　}

　　function edituser() {

　　var row = $("#dg").datagrid("getSelected");

　　if (row) {

　　$("#dlg").dialog("open").dialog('setTitle', 'Edit User');

　　$("#fm").form("load", row);

　　url = "UserManage.aspx?id=" + row.ID;

　　}

　　}

　　function saveuser() {

　　$("#fm").form("submit", {

　　url: url,

　　onsubmit: function () {

　　return $(this).form("validate");

　　},

　　success: function (result) {

　　if (result == "1") {

　　$.messager.alert("提示信息", "操作成功");

　　$("#dlg").dialog("close");

　　$("#dg").datagrid("load");

　　}

　　else {

　　$.messager.alert("提示信息", "操作失败");

　　}

　　}

　　});

　　}

　　function destroyUser() {

　　var row = $('#dg').datagrid('getSelected');

　　if (row) {

　　$.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function (r) {

　　if (r) {

　　$.post('destroy_user.php', { id: row.id }, function (result) {

　　if (result.success) {

　　$('#dg').datagrid('reload');    // reload the user data

　　} else {

　　$.messager.show({   // show error message

　　title: 'Error',

　　msg: result.errorMsg

　　});

　　}

　　}, 'json');

　　}

　　});

　　}

　　}

　　</script>

教程首页 更多教程