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

初识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>

(0)

相关推荐

  • jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

    效果图: 图标 (function($){ //初始化清除按钮 function initClear(target){ var jq = $(target); var opts = jq.data('combo').options; var combo = jq.data('combo').combo; var arrow = combo.find('span.combo-arrow'); var clear = arrow.siblings("span.combo-clear");

  • jquery中EasyUI使用技巧小结

    combobox组件 一.禁用combobox里面的输入框 复制代码 代码如下: $("选择器").combo('textbox').attr("readonly", "readonly"); $('选择器').combobox({ editable:false ,     panelheight:300 }); 二.禁用 复制代码 代码如下: $('选择器').combobox('disable'); 三.获取选项文本和值 复制代码 代码如下:

  • EasyUI中combobox默认值注意事项

    在修改数据时,需要先加载数据. 在加载combobox数据的时候,从后台传来的应该int类型的数据. html代码 复制代码 代码如下: <tr>    <td style="text-align: right;">院系:</td>        <input type="hidden" id="belongsvalue" value="${fbook.belongs}" />

  • EasyUI Combobox设置默认值 获取text的方法

    $('#xxx').combobox('setValue',11); $('#epsId_combo').combobox('selectedIndex',0); <pre class="html" name="code"><select id='xxx' class="easyui-combobox" style="width: 180px;"> <option value='1'>第一个

  • JQueryEasyUI框架下的combobox的取值和绑定的方法

    最近做的项目涉及到JQueryEasyUI框架的使用,EasyUI是什么?网上解释说它是来自W3C标准WEB前端专家DHTML精英俱乐部的简单易用功能强大的轻量级WEB前端JavaScript框架!从这句话的理解来说,我认为它是一种JavaScript框架. 对于最近的使用中,给我的感觉就是,借用官网JqueryEasyUI上的一句话,EasyUI是基于jQuery用户界面插件的集合,我把它理解成一种插件,不知道有没有问题.而使用easyui,不需要写很多的javascript代码,只需在定义的

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

    取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 复制代码 代码如下: var p_class = $("p").attr("class"); //获取p元素的class [html] 使用attr()方法来设置p元素的class,JQuery代码如下: [code] 1 $("p").attr("'class", "

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

    初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套前台控件,于是在网上找了一些参考示例.写了一些基本的增删改查功能,算是对该控件的基本入门.后续有时间继续深入学习. 在学习jquery easyui前应该先到官网下载最新版本http://www.jeasyui.com/download/index.php 先看一下运行后的页面 1.列表展示 2.新增页面 3.修改页面 把jquery easyui下载好之后,一般引用下页几

  • layui table表格数据的新增,修改,删除,查询,双击获取行数据方式

    layui table利用参数新增,修改,删除,查询,双击数据行获取本行数据等.模块化使用layui table表格,通过二次封装实现语法上的解耦使用layui table,使用参数就可以以及外部的方法调用即可实现对layui table表格的操作,通过封装,把更多自主权交给页面自定义,layui:v:2.3.0.感谢layui的作者贤心. 演示效果如下: 以上json显示不完整是录屏的原因,请见谅! var Table = function(ops){ this.dataList = [];

  • asp批量添加修改删除操作示例代码

    核心代码: <title>asp批量添加修改删除操作示例</title> <% if request.Form("op")="update" then'表单提交 ids=request.Form("ids") if ids<>"" then response.Write "要删除的数据id集合:"&ids&"<br>"

  • jQuery实现动态添加、删除按钮及input输入框的方法

    本文实例讲述了jQuery实现动态添加.删除按钮及input输入框的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</title> <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> </head>

  • Yii2.0框架模型添加/修改/删除数据操作示例

    本文实例讲述了Yii2.0框架模型添加/修改/删除数据操作.分享给大家供大家参考,具体如下: 添加数据 $user = new User(); $user->name = 'zhang'; $user->age = 28; $data = $user->save();//添加数据 $data = $user->insert();//添加数据 $id = $user->attributes['id'];//获取当前添加数据后的自增id 修改数据 $user = $User::f

  • jQuery实现动态添加和删除input框实例代码

    本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></s

  • jQuery实现动态添加和删除input框代码实例

    本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></s

  • centos7.6批量增加修改删除虚拟网卡操作介绍

    1 确认内核是否有tun模块 modinfo tun modprobe tun lsmod | grep tun 2 安装tunctl软件 yum install tunctl -y vim /etc/yum.repos.d/nux-misc.repo [nux-misc] name=Nux Misc baseurl=http://li.nux.ro/download/nux/misc/el7/x86_64/ enabled=0 gpgcheck=1 gpgkey=http://li.nux.r

  • jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div

随机推荐