http://www.jb51.net/article/42016.htm

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

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

先看一下运行后的页面

1、列表展示

2、新增页面

3、修改页面

把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>

数据源格式

数据源添加弹出框

复制代码 代码如下:
<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>

Jquery EasyUI的添加,修改,删除,查询等基本操作介绍的更多相关文章

  1. Xamarin.Android 入门实例(4)之实现对 SQLLite 进行添加/修改/删除/查询操作

    1.Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...

  2. jquery 如何动态添加、删除class样式方法介绍

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  3. jquery 如何动态添加、删除class样式方法介绍_jquery_脚本之家

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class 取与设置样式 获取class和设置class都可以使用attr()方法 ...

  4. JavaWeb_day03_员工信息添加修改删除

    day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...

  5. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  6. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  7. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  8. SpringBoot定时任务升级篇(动态添加修改删除定时任务)

    需求缘起:在发布了<Spring Boot定时任务升级篇>之后得到不少反馈,其中有一个反馈就是如何动态添加修改删除定时任务?那么我们一起看看具体怎么实现,先看下本节大纲: (1)思路说明: ...

  9. 【转】C#添加修改删除文件文件夹大全

    [转]C#添加修改删除文件文件夹大全 C#添加修改删除文件文件夹大全 StreamWriter sw = File.AppendText(Server.MapPath(".")+& ...

随机推荐

  1. C# 无边框窗体边框阴影效果

    通过下面代码在构造函数中调用方法 SetShadow(); 即可实现无边框窗体的阴影效果了 需要添加命名空间 using System.Runtime.InteropServices; private ...

  2. Camera中对焦模式总结

    1,相机对焦模式有以下几种: auto  //自动 infinity //无穷远 macro //微距 continuous-picture //持续对焦 fixed //固定焦距   2,常见对焦模 ...

  3. U3D 动态创建Prefab的多个实例

    情景:我们有一个mytest脚本,一个my_prefab预置体 想在在这个脚本的start()方法中复制多个my_prefab的实例.有3种方法: 1,将预置体my_prefab放于Resouce文件 ...

  4. C#性能优化:延迟初始化Lazy<T>

    1. 概述 我们创建某一个对象需要很大的消耗,而这个对象在运行过程中又不一定用到,为了避免每次运行都创建该对象,这时候延迟初始化(也叫延迟实例化)就出场了. 延迟初始化出现于.NET 4.0,主要用于 ...

  5. WCF4.0 –- RESTful WCF Services (1) (入门)

    WCF 很好的支持了 REST 的开发, 而 RESTful 的服务通常是架构层面上的考虑. 因为它天生就具有很好的跨平台跨语言的集成能力,几乎所有的语言和网络平台都支持 HTTP 请求,无需去实现复 ...

  6. activiti-explorer:使用mysql导入外部bpmn文件后存在乱码的问题

    我已经采取了如下步骤,但是仍然还是乱码 1. 在mysql中创建数据库时指定使用utf8编码: CREATE DATABASE Activiti DEFAULT CHARACTER SET utf8 ...

  7. RESideMenu左右半侧滑的功能实现,主视图会和状态栏(StatusBar)不会随着一起滑动

    具体demo去github下载,这里不详细描述

  8. Unity发送参数给iOSNative并响应

    unity想要给iOS客户端发送通知并相应.语言太苍白直接上代码. unity端创建两个C#文件 1.触发cs这个不用多说,大家估计都懂. using UnityEngine; using Syste ...

  9. 解决The current branch is not configured for pull No value for key branch.master.merge found in confi

    1.在本地工程目录找到config文件(我的是在E:\rocket\rocket\.git): 2.修改config文件内容为: [core] repositoryformatversion = fi ...

  10. Thrift搭建分布式微服务(二)

    第二篇 连接池  连接池配置,请前往Thrift搭建分布式微服务(一)  下面要介绍的其实不是单一的连接池,应该说是连接池集合.因为它要管理多个Tcp Socket连接节点,每个服务节点都有设置了自己 ...