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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
JS class语法糖的深入剖析
Jul 07 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日期时间函数的高级应用技巧
2009/05/16 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
搭建vue开发环境
2018/07/19 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
python获取糗百图片代码实例
2013/12/18 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
如何理解python中数字列表
2020/05/29 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
如何一键升级Python所有包
2020/11/05 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
公司租房协议书
2014/10/14 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers