位置: 编程技术 - 正文

轻松学习jQuery插件EasyUI EasyUI创建CRUD应用(如何使用jquery插件)

编辑:rootadmin

推荐整理分享轻松学习jQuery插件EasyUI EasyUI创建CRUD应用(如何使用jquery插件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:简单的jquery插件实例,简单的jquery插件实例,jquery 插件写法,jquery插件大全,jquery插件大全,jquery插件怎么写,jquery插件怎么用到自己的网站,jquery插件使用教程,内容如对您有帮助,希望把文章链接给更多的朋友!

数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表,并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。我们将使用下面的插件:datagrid:向用户展示列表数据。dialog:创建或编辑一条单一的用户信息。form:用于提交表单数据。messager:显示一些操作信息。

一、EasyUI创建CRUD应用步骤 1:准备数据库

我们将使用 MySql 数据库来存储用户信息。创建数据库和 'users' 表。

步骤 2:创建 DataGrid 来显示用户信息

创建没有 javascript 代码的 DataGrid。

我们不需要写任何的 javascript 代码,就能向用户显示列表,如下图所示:

DataGrid 使用 'url' 属性,并赋值为 'get_users.php',用来从服务器检索数据。get_users.php 文件的代码

步骤 3:创建表单对话框

我们使用相同的对话框来创建或编辑用户。

这个对话框已经创建,也没有任何的 javascript 代码。

步骤 4:实现创建和编辑用户

当创建用户时,打开一个对话框并清空表单数据。

轻松学习jQuery插件EasyUI EasyUI创建CRUD应用(如何使用jquery插件)

当编辑用户时,打开一个对话框并从 datagrid 选择的行中加载表单数据。

'url' 存储着当保存用户数据时表单回传的 URL 地址。步骤 5:保存用户数据

我们使用下面的代码保存用户数据:

提交表单之前,'onSubmit' 函数将被调用,该函数用来验证表单字段值。当表单字段值提交成功,关闭对话框并重新加载 datagrid 数据。步骤 6:删除一个用户

我们使用下面的代码来移除一个用户:

移除一行之前,我们将显示一个确认对话框让用户决定是否真的移除该行数据。当移除数据成功之后,调用 'reload' 方法来刷新 datagrid 数据。步骤 7:运行代码

开启 MySQL,在浏览器运行代码。

二、EasyUI创建展开行明细编辑表单的CRUD 应用

当切换数据网格视图(datagrid view)到 'detailview',用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout)。在本教程中,我们使用数据网格(datagrid)组件来减小编辑表单(form)所占据空间。

步骤 1:在 HTML 标签中定义数据网格(DataGrid)

步骤 2:为数据网格(DataGrid)应用明细视图

为了为数据网格(DataGrid)应用明细视图,在 html 页面头部引入 'datagrid-detailview.js' 文件。我们使用 'detailFormatter' 函数来生成行明细内容。 在这种情况下,我们返回一个用于放置编辑表单(form)的空的 <div>。 当用户点击行展开按钮('+')时,'onExpandRow' 事件将被触发,我们将通过 ajax 加载编辑表单(form)。 调用 'getRowDetail' 方法来得到行明细容器,所以我们能查找到行明细面板(panel)。 在行明细中创建面板(panel),加载从 'show_form.php' 返回的编辑表单(form)。步骤 3:创建编辑表单(Form)

编辑表单(form)是从服务器加载的。show_form.php

步骤 4:保存或取消编辑

调用 'saveItem' 函数来保存一个用户或者调用 'cancelItem' 函数来取消编辑。

决定要回传哪一个 URL,然后查找表单(form)对象,并调用 'submit' 方法来提交表单(form)数据。当保存数据成功时,折叠并更新行数据。

当取消编辑动作时,如果该行是新行而且还没有保存,直接删除该行,否则折叠该行。

标签: 如何使用jquery插件

本文链接地址:https://www.jiuchutong.com/biancheng/373863.html 转载请保留说明!

上一篇:jQuery插件EasyUI校验规则 validatebox验证框(jquery easyui 教程)

下一篇:轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作(jquery插件是干什么的)

  • PHP获取数组表示的路径方法分析【数组转字符串】 原创(php中如何获取数组的长度)

    PHP获取数组表示的路径方法分析【数组转字符串】 原创(php中如何获取数组的长度)

  • PHP获取访问页面HTTP状态码的实现代码(php获取访问者信息)

    PHP获取访问页面HTTP状态码的实现代码(php获取访问者信息)

  • 详解SQL Server的聚焦过滤索引(sql server基本知识)

    SQL Server对创建索引大小有限制,最大是字节,上述直接写的VARCHAR(MAX),所以会出错,切记,切记。

    此时我们在主键上创建非聚集索引,我们在主键RowID上创建一个过滤索引且SomeValue = 'JeffckyWang" class="img-responsive" alt="详解SQL Server的聚焦过滤索引(sql server基本知识)">

    详解SQL Server的聚焦过滤索引(sql server基本知识)

  • Windows Server 2003几个实用小技巧

    Windows Server 2003几个实用小技巧

  • node.js中实现同步操作的3种实现方法

    node.js中实现同步操作的3种实现方法

  • Android webview中打印DomTree和RenderTree的方法(android中的webview)

    Android webview中打印DomTree和RenderTree的方法(android中的webview)

  • jQuery中的ready函数与window.onload谁先执行(ready jquery)

    jQuery中的ready函数与window.onload谁先执行(ready jquery)

  • 增值税纳税申报表模板
  • 公司收到待报解预算收入会计分录
  • 上个月发票忘记开了怎么办
  • 小规模能开劳务费吗
  • 企业资金运动包括哪几个环节
  • 委托收款税务认可吗
  • 食堂收支情况
  • 顾客抽奖代扣个税账务处理
  • 哪些燃料油不征消费税了
  • 购买毛巾的费用是多少
  • 出口押汇与打包押汇区别
  • 代扣代缴增值税是什么意思
  • 企业营改增对企业税负影响分析
  • 住宿费专用发票会计分录
  • 关于增值税发票开具的最新规定
  • 关于财产保险公司的论文
  • 税务代理有哪些岗位
  • 当期损益包括哪些费用
  • 会计明细账簿包括哪些
  • 预付账款讲解
  • 普通发票单张限额
  • 房产企业可计入开发成本的利息如何确定?
  • 合并报表的编制主体
  • 自建房屋没有发票如何入账
  • 全年平均职工人数按季度平均公式
  • 生育津贴还扣税吗
  • 工信部推出一键解绑怎么用
  • 员工出差时法律规定
  • 电脑显示器模糊不清晰是什么原因
  • 理财计算收益公式
  • el-cascader数据渲染时不出现文字
  • 企业财务会计
  • 收回贷款本息是包含本金吗
  • 商品入库进项税额怎么算
  • 增值税加计扣除最新政策
  • 捆绑销售如何进行账务处理?
  • list集合过滤
  • 语义分割用途
  • vue前端项目实战
  • ps怎么把人p掉背景还原
  • 税控盘费和服务费都可以减免吗
  • 股东向公司借款超过一年不还
  • sql中order by 1
  • sql跨服务器查询语句
  • linux中备份
  • 增值税申报表填写顺序
  • 内部往来划账通知单
  • 会计账簿有哪些作用
  • 以红字冲回
  • 资本公积的账务处理例题
  • 电子承兑 背书
  • 企业注销清算报告模板
  • 未付货款尾款会计分录
  • 监控 固定资产
  • 广告收入计入哪个科目
  • 融资租入固定资产的账务处理
  • 承兑汇票怎么拿钱
  • 红冲发票金额大于原发票金额
  • 销售边角废料取名怎么取
  • 什么叫社保差额调整
  • 企业的固定资产由于技术进步等原因
  • bios中英文对照表图新版
  • win10系统玩游戏卡
  • 系统更新win10
  • RadioSvr.EXE - RadioSvr是什么进程 有什么用
  • 虚拟机安装centos7.9
  • iptables入门
  • js中使用组件
  • 编写批处理
  • js函数调用常用字符串
  • jquery可以实现哪些效果
  • android自定义listview
  • 动态生成类对象
  • js如何禁用按钮
  • js link global
  • Javascript中Array.prototype.map()详解
  • 新形势下税务工作
  • 企业取得了哪些成绩
  • 广东省电子税务局电话
  • 厨房申购单怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设