位置: 编程技术 - 正文

轻松学习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插件是干什么的)

  • 应付税费重分类如何做会计分录?
  • 收购农副产品怎么做账
  • 开票和收到的款金额不一样怎么办?
  • 供应商属于应收账款吗
  • 有社保的工资计提和发放
  • 收到发票未付款怎么处理
  • 房产经纪公司成本费用
  • 人力资源服务发票
  • 售后回购涉税处理
  • 收到运费发票的会计分录
  • 银行贷款利息支出汇算清缴需要调整吗
  • 土地流转承包费拖欠
  • 送现金券活动方案
  • 计算完工产品成本和月末在产品成本
  • 高速公路通行费专用发票可以抵扣吗
  • 个体工商户上月开发票超额了 ,定额改查账征收了
  • 企业所得税本季度可以弥补上季度亏损吗?
  • 红字信息表没有编号
  • 进料加工分配率是什么意思
  • 企业去银行办理贷款需要什么
  • 专设销售机构的各项经费应列支什么科目
  • 华为mate50pro怎么读
  • realtek自动安装
  • 汇算清缴无形资产摊销填哪里
  • PHP:xml_parser_get_option()的用法_XML解析器函数
  • 写一段简单的自我介绍
  • php ftp上传文件
  • win11怎么创建新用户
  • 用友标准版怎么反结账
  • 对其他公司的建议
  • 挪威 北极熊
  • php取mysql查询单条数据
  • js获取本机ip地址
  • 微信小程序用电脑怎么打开
  • javascript教程
  • php curl_multi_init
  • 利用php抓取蜘蛛网
  • 期初成本和期末成本
  • 企业被吊销后能当被告嘛
  • 帝国cms真的很好用
  • 小规模纳税人免增值税的账务处理
  • 运输发票抵扣进项税额
  • 哪些进项税不允许从销项税额中抵扣
  • 资产负债表和利润表的区别
  • 补交去年工会经费会计分录
  • 个人缴纳职业年金的比例为本人缴费工资的多少
  • 现金日记账一般采用数量金额式
  • 在租赁的土地上建房做固定资产吗
  • 预提费用为什么是负债
  • 物业公司管理费用都有哪些科目
  • 财务费用在贷方,怎么结转到本年利润?
  • 小规模增值税减免申报表怎么填
  • 注册资本和实收资本相等吗
  • 小型企业介绍怎么写
  • mysql太慢
  • windows 10的安装
  • win10手机版下载官方中文版
  • win10虚拟机无法安装
  • 如何手动修改VID与PID
  • 系统恢复 win10
  • windows7磁盘清理命令
  • windows如何禁止访问某ip地址
  • dns win7
  • 微软2021年新系统
  • 使用自带DISM工具修复Windows8.1映像
  • 在Linux命令行中快速删除光标前的快捷键是什么?
  • 浅谈特殊儿童的融合教育论文
  • CCAssert(sm_pSharedApplication, "")导致程序闪退的原因以及解决方案
  • 六个自由
  • Unity符国新:3D技术将渗透到生活的各个方面
  • js隐写
  • python的linux
  • unity3d 画线
  • javascript的简介
  • android study
  • apple开发
  • Excel表格如何导出
  • 陕西省国家税务总局电子税务局
  • 福州税务实名认证
  • 深化财税体制改革完善税收制度心得体会
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设