EasyUI-在行内进行表格的增删改操作
第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题。
1.首先我们看引用的js和css代码
<link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /><link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" /><link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css"/><script type="text/javascript" src="jquery-easyui-1.3.5/jquery-1.10.2.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.5/easyui/plugins/jquery.edatagrid.js"></script>
这里和上一篇比较而言新增加了一个<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>这个是修改表格时用到的,可是我在下载的源文件中就是找不到这个js文件呢,在里面有个类似的文件D:\Serious\phpdev\easyui \jquery-easyui-1.3.5\plugins/jquery.datagrid.js这个,看上去有点类似,但是少个字母“e”,纳闷了到底是jquery.datagrid.js还是jquery.edatagrid.js呢?你可能已经注意到我这里下载的最新的easyui版本 jquery-easyui-1.3.5,是版本更新么?先不管他,继续往下看了。
2.然后是html代码,先定义一个表格,如下:
<table id="dg" title="My User" style="" style="width:700px;height:250px" toolbar="#toolbar" pagination="true" idField="id" rownumbers="true" fitColumns="true" singleSelect="true"><thead><th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th><th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th><th field="phone" width="50" editor="text">Phone</th><th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th></thead></table>
注意toolbar的命名要和下面定义的工具栏对应,idField="id"这个应该是定义这一行的主键,在做删除操作的时候用到这个主键,在列名的定义中我们可以看到
editor="{type:'validatebox',options:{required:true}}"这 样的一句,字面意义上应该是可编辑的且需要验证的,验证规则是必填的。editor="text"这个就应该是简单的文本信息不需要验证的,不是必填的。 editor="{type:'validatebox',options:{validType:'email'}}" 这个应该也是必填的且验证规则是email验证。
3.下面看工具栏是如何定义的
<div id="toolbar"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="jvascript:$('#dg').edatagrid('addRow')">New</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="jvascript:$('#dg').edatagrid('destroyRow')">Destory</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="jvascript:$('#dg').edatagrid('saveRow')">Save</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" οnclick="jvascript:$('#dg').edatagrid('cancelRow')">Cancel</a></div>
这个就是定义增,删,改的操作的onclick="jvascript:$('#dg').edatagrid('addRow')"这个很很明显就是新增一行,效果如下图1
图1
4.最后我们看看js代码
$(function(){$('#dg').edatagrid({url: 'get_users.php',saveUrl: 'save_user.php',updateUrl: 'update_user.php',destroyUrl: 'destory_user.php'});});</script>
就这么几行,这里只是指定了对应的动作url,估计jquery.edatagrid.js这个js里面会处理对应的操作规则。
最后就是我发现使用本地的jquery-easyui-1.3.5/easyui/plugins/jquery.datagrid.js这个文件是会报错的,各种各样的错误,使用官网上给的那个文件是可以的,就是引用<scripttype="text/javascript"src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>这个文件。不知道各位有没有注意到这个让人蛋疼的问题。还有这里工具栏中没有给出编辑的按钮,而是双击需要编辑的行,对应的行就会变成可编辑状态,然后点击Save按钮就可以正常保存,这个对我们来说有点抓瞎的,如果某一列不需要编辑呢。
via:http://www.cnblogs.com/tylerdonet/p/3516614.html
转载于:https://www.cnblogs.com/dekevin/p/3863852.html
EasyUI-在行内进行表格的增删改操作相关推荐
- 对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...
- python增删改查的框架layui_spring+springMvc+mybatis+layui实现数据表格的增删改查(纯layui实现)...
[实例简介] 项目描述: 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现. 如果你是新手学习layui,那这个绝对会对你有很大的帮助: 如果你之前已经学过甚至 ...
- python对excel增删改查语句_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
- python对excel增删改查_利用python模拟sql语句对员工表格进行增删改查
本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询, ...
- mysql数据库员工表创建_mysql数据库简单练习(创建表格,增删改查数据)
1.创建一个员工表 字段 属性 id 整形(int) name 字符串(varchar)(长度为20) gender 字符串(长度为2) birthday 日期型 ...
- 关于表格的增删改!!我必须泄个恨了!!
我的Java作业 关于表格的增删改!!在七点的最后三分钟交上去了!!那么现在我就要来吐吐槽了!!!! 先贴个代码!! 这个必须的!! package javaapplication3; import ...
- SAP abap内表分类与增删改查操作
SAP abap内表分类与增删改查操作 1.内表的分类 1.1.标准表 (standard table ) 系统为该表每一行生成一个院级索引.填表是可以将数据附加在现有行之后,也可以插入到指定的位置, ...
- mysql数据库创建员工表_mysql数据库简单练习(创建表格,增删改查数据)
1.创建一个员工表 字段 属性 id 整形(int) name 字符串(varchar)(长度为20) gender 字符串(长度为2) birthday 日期型 ...
- 20190602:JDBC的增删改操作实践
实现JDBC的增删改操作 JDBC的增删改操作 测试 JDBC的增删改操作 首先紧接昨天的JDBC的第一个程序,进行简单的修改即可做到增删改操作: public void insert_test() ...
最新文章
- AI战“疫”!人工智能在疫情中的重要作用
- 【今晚7点半】:GVoice 千万在线语音传输的那些事
- yapi 接口文档_1分钟docker部署顶尖 API 文档管理系统
- [游戏开发-学习笔记]菜鸟慢慢飞(12)- Unity3D中LitJson 解析遇到的问题
- 西门子滚筒洗衣机教程_西门子洗衣机怎么样 西门子洗衣机哪款好
- 韩国FSC公布新方案允许分离银行加密业务 以帮助小型交易所继续运营
- 基本完成的重力空间的对任意形状的碰撞子系统
- Android Studio报错:This Gradle plugin requires a newer IDE able to request IDE model level 3
- [Android] 混音线程MixerThread
- Nginx DNS resolver配置实例
- 刘铁猛挨踢人感言:做一个高情商的程序员
- linux中的代码比对工具meld
- setValue: forKey: 和 setValue: forKeyPath:
- MATLAB期末复习
- 如何查询微博主页地址是什么?
- centos打显卡驱动命令_centos7系统,显卡驱动安装教程
- 二十道面试题成都至少16k
- 联想微型计算机如何设置u盘启动,联想bios设置u盘启动图文教程
- Maven第3篇:详解maven解决依赖问题
- MSP432蓝牙遥控小车
热门文章
- java中访问权限的设置
- python面值组合_算法题 - 拼凑面额 - Python
- python日历下拉框_selenium+Python(Js处理日历控件)
- VI.Multidocument Transactions
- 【渝粤教育】国家开放大学2018年春季 0043-21T计算机文化 参考试题
- [渝粤教育] 中国地质大学 审计学 复习题 (2)
- Qt 学习之路 2(1):序 笔记
- 《Linux设备驱动开发详解(第3版)》(即《Linux设备驱动开发详解:基于最新的Linux 4.0内核》)--宋宝华...
- 【转】 一定要让孩子知道的20个小故事
- react —— diff算法与VDOM