[html][easyui]DataGrid 绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/themes/color.css">
<link rel="stylesheet" type="text/css" href="js/demo/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> </head>
<body>
<h2>
Basic CRUD Application</h2>
<p>
Click the buttons on datagrid toolbar to do crud actions.</p>
<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; height: 250px"
url="JsonHandler.ashx?type=data" toolbar="#toolbar" pagination="true" rownumbers="true"
fitcolumns="true" singleselect="true">
<thead>
<tr>
<th field="firstname" width="50">
First Name
</th>
<th field="lastname" width="50">
Last Name
</th>
<th field="phone" width="50">
Phone
</th>
<th field="email" width="50">
</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
onclick="newUser()">New User</a> <a href="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-edit" plain="true" onclick="editUser()">Edit User</a> <a href="javascript:void(0)"
class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">
Remove User</a>
</div>
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">
User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>
First Name:</label>
<input name="firstname" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>
Last Name:</label>
<input name="lastname" class="easyui-textbox" required="true">
</div>
<div class="fitem">
<label>
Phone:</label>
<input name="phone" class="easyui-textbox">
</div>
<div class="fitem">
<label>
Email:</label>
<input name="email" class="easyui-textbox" validtype="email">
</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('center').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'JsonHandler.ashx?type=add';
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'JsonHandler.ashx?type=edit&id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.errorMsg){
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
if (r){
$.post('JsonHandler.ashx',{type:'del',id:row.id,random:Math.random()},function(re){
var result = eval("("+re+")");
if (result.success){
alert('');
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
},'json');
}
});
}
}
</script> <style type="text/css">
#fm
{
margin: 0;
padding: 10px 30px;
}
.ftitle
{
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem
{
margin-bottom: 5px;
}
.fitem label
{
display: inline-block;
width: 80px;
}
.fitem input
{
width: 160px;
}
</style>
</body>
</html>
using System;
using System.Collections;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using Newtonsoft.Json; namespace Web
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class JsonHandler : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request.Params != null && context.Request.Params.Count > )
{
string type = context.Request.Params["type"];
if (!string.IsNullOrEmpty(type))
{
if (type == "del")
{
// do something
context.Response.Write(JsonConvert.SerializeObject("{'success':'true'}"));
}
else if (type == "data")
{
// 根据参数 page / rows / offset 返回相应数据
DataTable dt = new DataTable();
dt.Columns.Add("firstname");
dt.Columns.Add("lastname");
dt.Columns.Add("phone");
dt.Columns.Add("email");
dt.Columns.Add("id");
DataRow dr = dt.NewRow();
dr[] = "X";
dr["id"] = ;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[] = "Y";
dr["id"] = ;
dt.Rows.Add(dr); context.Response.Write(JsonConvert.SerializeObject(dt));
}
else if (type == "add")
{
// 执行 SQL 语句增加行到 DataTable
context.Response.Write("\"{'success':'true'}\"");
}
else if (type == "edit")
{
// 执行 SQL 语句修改 DataTable
context.Response.Write("\"{'success':'true'}\"");
}
else
{
// 输出错误
context.Response.Write(JsonConvert.SerializeObject("{'errorMsg':'没有相关参数！'}"));
}
}
else
{
// 输出错误
context.Response.Write("\"{'errorMsg':'没有参数！'}\"");
}
}
else
{
// 输出错误
context.Response.Write("\"{'errorMsg':'没有请求参数！'}\"");
}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
[html][easyui]DataGrid 绑定的更多相关文章
- easyui datagrid 绑定json对象属性的属性
今天用easyui 的datagrid绑定数据时,后台提供的数据是实体类类型的,其中有一个实体类A的属性b是另一个实体类B类型的,而前台需要显示b的属性c,这下就悲剧了,前台没法直接绑定了,后来脑筋一 ...
- easyui datagrid 绑定从后台得到的复杂的特殊数据结构
由于项目需要,从后台得到的数据统一为了类似{state:xxx,data:xxx,message:xxx}类型 但是easyui datagrid却只认{total:xxx,rows:xxx}...所 ...
- Easyui datagrid 绑定本地Json数据
var jsonstr = '{"total":1,"rows":[{"id":"M000005","name ...
- Easyui datagrid绑定数据，新增，修改，删除方法(一)
@{ ViewBag.Title = "UsersList"; } <script type="text/javascript"> $(functi ...
- Easyui datagrid绑定数据，新增，修改，删除写法
@{ ViewBag.Title = "xw_xsfl"; } <script type="text/javascript"> var editIn ...
- EasyUi DataGrid 绑定数据格式问题
如果显示汇总记录则需设置页脚属性:首先设置showFooter:true, 然后后台计算出合计数据,一起传过来,类似如下:{"total":28,"rows": ...
- EasyUI DataGrid定制默认属性名称
EasyUI DataGrid绑定服务器返回Json数据的解决方案 1. 服务器返回的数据对象格式,及初始化返回值 public class RequestResult { private int c ...
- EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他
原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...
- easyUI之datagrid绑定后端返回数据的两种方式
先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
随机推荐
- [笔记] SQL性能优化 - 常用语句（一）
第一步 DBCC DROPCLEANBUFFERS 清除缓冲区 DBCC FREEPROCCACHE 删除计划高速缓存中的元素 从缓冲池中删除所有清除缓冲区.要求具有 sysadmin 固定服务器角色 ...
- UVa 10375 选择与除法（唯一分解定理）
https://vjudge.net/problem/UVA-10375 题意: 输入整数p,q,r,s,计算C(p,q)/C(r,s). 思路: 先打个素数表,然后用一个数组e来保存每个素数所对应的 ...
- MySQL事务处理实现方法步骤
需求说明: 案例背景:银行的转账过程中,发生意外是在所难免.为了避免意外而造成不必要的损失,使用事务处理的方式进行处理: A账户现有余额1000元,向余额为200的B账户进行转账500元.可能由于某原 ...
- Java回顾之多线程
在这篇文章里,我们关注多线程.多线程是一个复杂的话题,包含了很多内容,这篇文章主要关注线程的基本属性.如何创建线程.线程的状态切换以及线程通信,我们把线程同步的话题留到下一篇文章中. 线程是操作系统运 ...
- 【源码学习之spark streaming 1.6.1 】
说明:个人原创,转载请说明出处 http://www.cnblogs.com/piaolingzxh/p/5634577.html 未完待续
- MySQL —— 基本查询方法
MySQL —— 简单查询与按条件查询 在MySQL中从数据表中查询数据的基本语句时select语句. select语句基本语法格式: select 查询内容 from 表名 ...
- Linux命令详解-echo
echo会将输入的字符串送往标准输出.输出的字符串间以空白字符隔开,并在最后加上换行号. 1．命令格式: file [ -bchikLnNprsvz ] [ -f namefile ] [ -F se ...
- bzoj1179: [Apio2009]Atm scc缩点+dag上dp
先把强连通缩点,然后变成了dag,dp求终点是酒吧的最长路即可, /************************************************************** Pro ...
- 108. Convert Sorted Array to Binary Search Tree 109. Convert Sorted List to Binary Search Tree -- 将有序数组或有序链表转成平衡二叉排序树
108. Convert Sorted Array to Binary Search Tree Given an array where elements are sorted in ascendin ...
- 快速切题CF 158B taxi 构造 && 82A double cola 数学观察 难度:0
实在太冷了今天 taxi :错误原因1 忽略了 1 1 1 1 和 1 2 1 这种情况,直接认为最多两组一车了 2 语句顺序错 double cola: 忘了减去n的序号1,即n-- B. Taxi ...