datagrid的基本操作-增删改
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的基本操作-增删改的更多相关文章
- MongoDB的ObjectId和基本操作增删改查（3）
ObjectId 基本操作增删改查 增: insert 介绍: mongodb存储的是文档,. 文档是json格式的对象. 语法: db.collectionName.insert(document) ...
- MongoDB --- 02. 基本操作,增删改查,数据类型,比较符,高级用法,pymongo
一.基本操作 . mongod 启动服务端 2. mongo 启动客户端 3. show databses 查看本地磁盘的数据库 4. use 库名 切换到要使用的数据库 5. db 查看当前使用的数 ...
- web sql 基本操作 - 增删改查
不喜欢看md原文的 可以访问这个链接:http://note.youdao.com/noteshare?id=6a91e3dea7cdf5195bb0e851d9fcb5a5 # web sql 增删 ...
- Windows 10 64位操作系统 下安装、连接测试sqlite3 sql基本操作 增删改
一.下载sqlite安装包 1:详细下载安装版本可见官网:https://www.sqlite.org/download.html 2:百度盘分享连接:https://pan.baidu.com/s/ ...
- MongoDB基本操作(增删改查)
基本操作 基本的“增删查改“,在DOS环境下输入mongo命令打开shell,其实这个shell就是mongodb的客户端,同时也是一个js的编译器,默认连接的是“test”数据库.
- mangodb的基本操作:增删改差
MongoDB三元素: 1 数据库: 和关系型数据库中数据库的层次相同,内部可以有多个集合. 2 集合: 相当于关系型数据库中的表,存储若干文档,结构不固定 3 文档: 相当于关系型数据库中的行,是J ...
- django数据库基本操作-增删改查（tip）-基本
补充:django外键保存 #外键保存 form_data = Form_Data() project, is_created = Project_Name.objects.get_or_create ...
- MySQL语句基本操作增删改查
select * from 表名; --------->效率低
- c语言实现双链表的基本操作—增删改查
//初始化 Node*InitList() { Node*head=(Node*)malloc(sizeof(Node)); if(NULL==head) { printf("内存分配失败! ...
随机推荐
- Java反射 - 3(动态代理)
动态代理是对包装模式的升级,可以动态的传入需要代理的对象实现代理 准备如下 1. 被代理类的接口 2.被代理类 3.处理器:InvocationHandler 4.代理调用:Proxy.newInst ...
- [转]机器学习——C4.5 决策树算法学习
1. 算法背景介绍 分类树(决策树)是一种十分常用的分类方法.它是一种监管学习,所谓监管学习说白了很简单,就是给定一堆样本,每个样本都有一组属性和一个类别,这些类别是事先确定的,那么通过学习得到一个分 ...
- 控件真的很好用，突然感觉自己以前研究Discuz！NT366源码的方式很2了
控件真的很好用,突然感觉自己以前研究Discuz!NT366源码的方式很2了,就是按钮上的或其他控件上的图片哪里去了?
- windows Server 2003修改远程连接限制
调整最大远程连接数: 1.开始->控制面板->添加或删除程序->添加/删除windows组件->选择“终端服务器”进行安装. 2.开始->运行->gpedit.ms ...
- JSP中取COOKIE中指定值得方法【转载】
Cookie cookies[]=request.getCookies(); //读出用户硬盘上的Cookie,并将所有的Cookie放到一个cookie对象数组里面 Cookie sCookie=n ...
- d010: 分离自然数
内容: 一个三位自然数,分离出它的百位.十位与个位上的数字 输入说明: 一行一个三位整数 输出说明: 一行三个数字 , 空格隔开.分别是百 十 个位数字 输入样例: 256 输出样例 : 2 5 ...
- Calling a Web API From a .NET Client (C#)
on|January 20, 2014 1760 of 2013 people found this helpful Print Download Completed Project This tut ...
- bzoj2741【FOTILE模拟赛】L
http://www.lydsy.com/JudgeOnline/problem.php?id=2741 分块或可持久化trie 可以先看看这个:高斯消元解XOR方程组 分块做法: 我们先求出前i个数 ...
- Android调用第三方应用
Intent intent=new Intent(); //包名 包名+类名(全路径) intent.setClassName("com.qn.app.store", " ...
- 移动web app开发框架
文章地址:http://www.cnblogs.com/soulaz/p/5586787.html jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mo ...