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 相关文章推荐
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
js中文逗号转英文实现
Feb 11 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
webpack external模块的具体使用
2018/03/10 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python网络编程 Python套接字编程
2017/09/13 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
师范生自荐信
2013/10/27 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
异地年检委托书范本
2014/09/24 职场文书
医院见习总结
2015/06/24 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python