位置: 编程技术 - 正文

轻松学习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:session_decode()的用法_Session函数
  • 所得税时间性差异与永久性有关吗
  • 房屋租金应缴纳多少
  • 购货返利
  • vue项目打包后还能修改吗
  • php die exit
  • py转换成exe后打开没用
  • thinkphp钩子场景
  • 弃置费用预计负债的摊余成本
  • 织梦产品详情页相关产品推荐调用代码
  • 金税三期个人所得税申报
  • 旅游门票费用可以用来报销吗?
  • 制造费用结转本年利润吗
  • 营业总成本包括投资收益吗
  • 企业所得税的征税对象和纳税人分别负有的纳税义务
  • 季度企业所得税资产总额怎么填
  • 同时安装vs2005团队开发版和sql 2005企业版的方法(downmoon原作)
  • 出纳需要填写会计凭证吗
  • 广告发票能抵扣吗
  • 多交个税收到退回怎么办
  • 餐饮行业购入农产品
  • 旅行社差额征收税率多少
  • 外地预缴税款流程
  • 融资租赁财产保全金额是多少
  • 现金日记账根据记账凭证填写吗
  • 收不回来的应收账款
  • 企业出售产品
  • 工程施工企业的会计科目如何设置
  • 出口货物索赔如何确认收入
  • 小规模纳税人开专票需要交税吗
  • 长期待摊费用怎么记账
  • msng.exe病毒
  • win7系统无法修复怎么办
  • win7系统点击桌面图标没反应
  • linux误删除数据
  • linux纯文本浏览器
  • win7系统添加右键菜单在哪里设置
  • linux启动的基本步骤
  • win7系统删除ie浏览器
  • win7命令提示符在哪
  • uibutton设置圆角
  • opengl详解
  • 收藏了很久的句子
  • 基于python的设计
  • perl ne
  • js的继承方式
  • nodejs怎么使用
  • js中倒计时器怎么实现
  • Unity GameObject.activeSelf, GameObject.activeInHierarchy,GameObject.SetActive和SetActiveRecursively
  • js实现表格动态合并单元格
  • jquery使用方法
  • ipadpro关税多少
  • 一般纳税人服务费是几个点
  • 耕地占用税是土地增值税开发成本吗
  • 上海市税务局的电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设