1 ---恢复内容开始---

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Basic DataGrid - jQuery EasyUI Demo</title>

 <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.2/themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery-easyui-1.4.2/themes/icon.css">

 <!--<link rel="stylesheet" type="text/css" href="../../图片/demo.css">-->

 <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.2/jquery.min.js"></script>

 <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>

 </head>

 <body>

 <h2>Basic DataGrid</h2>

 <p>The DataGrid is created from markup, no JavaScript code needed.</p>

 <div style="margin:20px 0;"></div>

 <table id="tb" class="easyui-datagrid" toolbar="#toolbar" title="Basic DataGrid" style="width:700px;height:250px"

 data-options="rownumbers:true,singleSelect:true,collapsible:true,url:'{:U(return_json)}',method:'get'">

 <thead>

 <tr>

 <th data-options="field:'Item_ID',width:80">Item ID</th>

 <th data-options="field:'Product',width:100">Product</th>

 <th data-options="field:'List_Price',width:80,align:'right'">List Price</th>

 <th data-options="field:'Unit_Cost',width:80,align:'right'">Unit Cost</th>

 <th data-options="field:'Attribute',width:250">Attribute</th>

 <th data-options="field:'Status',width:60,align:'center'">Status </th>

 </tr>

 </thead>

 </table>

 <div id="toolbar">

 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"onclick="newUser()">添加</a>

 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true"onclick="editUser()">修改</a>

 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-save" plain="true"onclick="saveUser()">保存</a>

 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true"onclick="destroyUser()">删除</a>

 </div>

 <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"

 closed="true" buttons="#dlg-buttons">

 <div class="">User Information</div>

 <form id="fm" method="post" novalidate>

 <div class="fitem">

 <label>Product:</label>

 <input name="Product" class="easyui-textbox" type="text" required>

 </div>

 <div class="fitem">

 <label>List Price:</label>

 <input name="List_Price" type="text" class="easyui-textbox">

 </div>

 <div class="fitem">

 <label>Unit Cost:</label>

 <input name="Unit_Cost" type="text" class="easyui-textbox">

 </div>

 <div class="fitem">

 <label>Attribute:</label>

 <input name="Attribute" type="text" class="easyui-textbox" >

 </div>

 <div class="fitem">

 <label>Status:</label>

 <input name="Status" type="text" class="easyui-textbox">

 </div>

 </form>

 </div>

 <div id="dlg-buttons">

 <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>

 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>

 </div>

 <script type="text/javascript">

 var url;

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

 function newUser(){

 $('#dlg').dialog('open').dialog('setTitle','New User');//打开对话框

 $('#fm').form('clear');//清空表单数据

 url = '__URL__/insert';

 }

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

 function editUser(){

 var row = $('#tb').datagrid('getSelected');//获取选中的行

 if (row){

 $('#dlg').dialog('open').dialog('setTitle','Edit User');

 $('#fm').form('load',row);

 url = '__URL__/update?id='+row.Item_ID;//获取tb表的主键，传给后台数据库

 }

 }

 function saveUser(){

 $('#fm').form('submit',{

 url: url,

 onSubmit: function(){

 return $(this).form('validate');

 },

 success: function(result){

 console.log(result);

 if (result.errorMsg){

 $.messager.show({

 title: 'Error',

 msg: result.errorMsg

 });

 } else {

 $('#dlg').dialog('close'); // close the dialog

 $('#tb').datagrid('reload'); // reload the user data

 }

 }

 });

 }

 function destroyUser(){

 var row = $('#tb').datagrid('getSelected');

 if (row){

 $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){

 if (r){

 $.post('__URL__/del',{id:row.Item_ID},function(result){

 if (result==1){

 $('#tb').datagrid('reload'); // reload the user data

 } else {

 $.messager.show({ // show error message

 title: 'Error',

 msg: result.errorMsg

 });

 }

 },'json');

 }

 });

 }

 }

 </script>

 </body>

 </html>

 ---恢复内容结束---

datagrid的基本操作-增删改的更多相关文章

  1. MongoDB的ObjectId和基本操作增删改查（3）

    ObjectId 基本操作增删改查 增: insert 介绍: mongodb存储的是文档,. 文档是json格式的对象. 语法: db.collectionName.insert(document) ...

  2. MongoDB --- 02. 基本操作,增删改查,数据类型,比较符,高级用法,pymongo

    一.基本操作 . mongod 启动服务端 2. mongo 启动客户端 3. show databses 查看本地磁盘的数据库 4. use 库名 切换到要使用的数据库 5. db 查看当前使用的数 ...

  3. web sql 基本操作 - 增删改查

    不喜欢看md原文的 可以访问这个链接:http://note.youdao.com/noteshare?id=6a91e3dea7cdf5195bb0e851d9fcb5a5 # web sql 增删 ...

  4. Windows 10 64位操作系统 下安装、连接测试sqlite3 sql基本操作 增删改

    一.下载sqlite安装包 1:详细下载安装版本可见官网:https://www.sqlite.org/download.html 2:百度盘分享连接:https://pan.baidu.com/s/ ...

  5. MongoDB基本操作(增删改查)

    基本操作      基本的“增删查改“,在DOS环境下输入mongo命令打开shell,其实这个shell就是mongodb的客户端,同时也是一个js的编译器,默认连接的是“test”数据库.  

  6. mangodb的基本操作:增删改差

    MongoDB三元素: 1 数据库: 和关系型数据库中数据库的层次相同,内部可以有多个集合. 2 集合: 相当于关系型数据库中的表,存储若干文档,结构不固定 3 文档: 相当于关系型数据库中的行,是J ...

  7. django数据库基本操作-增删改查（tip）-基本

    补充:django外键保存 #外键保存 form_data = Form_Data() project, is_created = Project_Name.objects.get_or_create ...

  8. MySQL语句基本操作增删改查

    select * from 表名; --------->效率低

  9. c语言实现双链表的基本操作—增删改查

    //初始化 Node*InitList() { Node*head=(Node*)malloc(sizeof(Node)); if(NULL==head) { printf("内存分配失败! ...

随机推荐

  1. PHP防注入转义功能

    PHP addslashes() 函数 $str = addslashes('Shanghai is the "biggest" city in China.'); echo($s ...

  2. Mysql 查询性能优化

    查询优化,索引优化,库表结构优化需要齐头并进,一个不能落. 为什么查询速度会慢 在阐释编写快速的查询之前,需要清楚一点,真正重要的是响应时间.如果把查询看做是一个任务的话,那么它由一系列子任务构成,每 ...

  3. flask开发restful api系列(6)-配置文件

    任何一个好的程序,配置文件必不可少,而且非常重要.配置文件里存储了连接数据库,redis的用户密码,不允许有任何闪失.要有灵活性,用户可以自己配置:生产环境和开发环境要分开,最好能简单的修改一个东西, ...

  4. CentOS安装MySQL问题汇总

    遇到的错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) denied for ...

  5. 深入理解querySelector(All)

          querySelector和querySelectorAll同属于Selectors API Level 1规范,该规范早在2006年就已经开始发展,并在2007年10月形成querySe ...

  6. 第三方账号登录--QQ登录，以及QQ微博账号登录

    在QQ登陆测试的时候,刚申请正常登陆,但是由于app未上线,或许是腾讯升级造成的个别时候QQ登陆无法成功会提示下图代码,功能上没啥问题,已经达到 测试效果了.附上腾讯错误代码图(大家测试QQ登陆的时候 ...

  7. IBM总裁郭士纳总结的四类人

    IBM总裁郭士纳总结的四类人, 您属于哪一种呢-欢迎就此话题发表评论 积极采取行动促使事件发生的人 被动接受所发生事件的人 对事件持旁观者心态的人 什么事都不关心的人

  8. Red Gate - SQL Source Control实现对SQL SERVER 的源代码控制

    原文地址:http://bbs.csdn.net/topics/350165431 SQL Server 一直没有一款很好的源码控制器,之前自己曾尝试自己写一个,将所有的 脚本 自动生成到某一目录下, ...

  9. Codeforces Round #316 (Div. 2) D、E

    Problem D: 题意:给定一棵n个点树,每个点有一个字母,有m个询问,每次询问某个节点x的子树中所有深度为k的点能否组成一个回文串 分析:一堆点能组成回文串当且仅当数量为奇数的字母不多于1个,显 ...

  10. SQL-Employees Earning More Than Their Managers

    思路: 今天复习数据库突然想起来leetcode上数据库的题目,就找来做了 (1)给表取别名 格式见code,这在自身连接的时候是很有必要的 (2)自身连接 from语句后面相当于接了“一张表”,如果 ...