一，效果图。

二，源代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Build CRUD DataGrid with jQuery EasyUI - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
</head>
<body>
<h2>CRUD DataGrid</h2>
<p>Double click the row to begin editing.</p>

<table id="dg" title="My Users" style="width:700px;height:250px"
toolbar="#toolbar" pagination="true" idField="id"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<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>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
<script type="text/javascript">
$(function(){
$('#dg').edatagrid({
url: 'http://www.jeasyui.com/demo/main/get_users.php',
saveUrl: 'http://www.jeasyui.com/demo/main/save_user.php',
updateUrl: 'http://www.jeasyui.com/demo/main/update_user.php',
destroyUrl: 'http://www.jeasyui.com/demo/main/destroy_user.php'
});
});
</script>

</body>
</html>

application(CURD)--easyui的更多相关文章

  1. EasyUI第一章Application之Basic CRUD(增删改查)

    先看效果图: 增加: 修改: 删除: 具体实现: html与js代码: @{ Layout = null; } <!DOCTYPE html> <html> <head& ...

  2. Application（basic）----Easyui

    一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...

  3. [html][easyui]DataGrid 绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. C# Unity游戏开发——Excel中的数据是如何到游戏中的 （二）

    本帖是延续的:C# Unity游戏开发——Excel中的数据是如何到游戏中的 (一) 上个帖子主要是讲了如何读取Excel,本帖主要是讲述读取的Excel数据是如何序列化成二进制的,考虑到现在在手游中 ...

  5. C# Unity游戏开发——Excel中的数据是如何到游戏中的 （一）

    引言 现在做游戏开发的没有几个不用Excel的,用的最多的就是策划.尤其是数值策划,Excel为用户提供强大的工具,各种快捷键,各种插件,各种函数.但是作为程序来说其实关注的不是Excel而是它最终形 ...

  6. abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十一)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  7. abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十二)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  8. abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十四)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  9. ABP 初探 之基于EasyUI的CURD

    结束了天天加班的项目,项目虽然结束,但还是有点小问题,只能在后期优化当中完成了,本次做项目采用了,MVC.Webapi.Entityframework,在园了里看到了有关ABP的介绍,同样ABP也是最 ...

随机推荐

  1. javascriptDOM编程艺术_学习笔记_知识点 DOM

    第三章   getElementById    返回一个与那个有着给定id属性值的元素节点对应的对象. document.getElementById(id) 下面一个例子: document.get ...

  2. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

  3. poj 2773 Happy 2006 容斥原理+二分

    题目链接 容斥原理求第k个与n互质的数. #include <iostream> #include <vector> #include <cstdio> #incl ...

  4. Linux串口编程详解（转）

    串口本身,标准和硬件 † 串口是计算机上的串行通讯的物理接口.计算机历史上,串口曾经被广泛用于连接计算机和终端设备和各种外部设备.虽然以太网接口和USB接口也是以一个串行流进行数据传送的,但是串口连接 ...

  5. LED板上芯片(COB)封装流程

    LED 板上芯片(Chip On Board,COB)封装流程是,首先在基底表面用导热环氧树脂(一般用掺银颗粒的环氧树脂)覆盖硅片安放点, 然后将硅片 间接安放正在基底表面,热处理至硅片牢固地固定正在 ...

  6. android 同时发送几条通知

     android 同时发送几条通知 ======= 下面是转载的文章.  同时发送几条通知把ID添加,接收的时候找到这个id就可以出来多条了. 还是不太明白或者编码实现不了的可以加我QQ. 博客很少上 ...

  7. USACO 2001 OPEN

    第1题 绿组. 奶牛接力赛[relay] 题目描述 农夫约翰已经为一次赛跑选出了K(2≤K≤40)头牛组成了一支接力队．赛跑在农夫约翰所拥有的农场上进行,农场的编号为1到Ⅳf4≤Ⅳ< 800), ...

  8. C++访问权限的问题

    以前一直认为对于类中的private数据成员,只有调用该方法的对象才能更能访问自身的私有成员,其他的类在该成员函数(公共接口)中也无法调用自身的私有成员,今天看到<c++ prime plus& ...

  9. Mysql5.6.24 zip解压缩版配置及修改默认编码方法

    win64位下载地址: http://dev.mysql.com/downloads/file.php?id=456319 下载完毕后解压 配置环境变量 在Path后加上mysql解压后bin文件夹所 ...

  10. 为什么webview.loadUrl("javascript:function() ")不执行？

    这几天搞webview 但是常常有时候会出现webview.loadurl 没有反映的情况对现在的分析如下: 情况一:webview.loadurl 的加载是在另一个线程中执行必须要在webview加 ...