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通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vue在线动态切换主题色方案
Mar 26 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简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python使用gensim计算文档相似性
2016/04/10 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
网络专业学生个人的自我评价
2013/12/16 职场文书
教师申诉制度
2014/01/29 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android