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


Posted in Javascript onOctober 11, 2013

初识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>
Javascript 相关文章推荐
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 #Javascript
jQuery下的动画处理总结
Oct 10 #Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 #Javascript
JavaScript 垃圾回收机制分析
Oct 10 #Javascript
jQuery的attr与prop使用介绍
Oct 10 #Javascript
JavaScript 数组详解
Oct 10 #Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 #Javascript
You might like
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
vue实现折线图 可按时间查询
2020/08/21 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python中tell()方法的使用详解
2015/05/24 Python
基于Python的接口测试框架实例
2016/11/04 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
顶撞领导检讨书
2014/01/29 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
诚信承诺书范文
2014/03/27 职场文书
环保倡议书300字
2014/05/15 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
员工考勤管理制度
2015/08/06 职场文书
介绍信应该怎么开?
2019/04/03 职场文书