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动态添加Table的TR,TD实现方法
Jan 28 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
js实现简单扫雷
Nov 27 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
第九节--绑定
2006/11/16 PHP
MySQL修改密码方法总结
2008/03/25 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
校友会欢迎辞
2014/01/13 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
岗位职责风险防控
2014/02/18 职场文书
项目投资意向书
2014/04/01 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
音乐剧猫观后感
2015/06/04 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js