[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绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
随机推荐
- JDK 1.8 ConcurrentHashMap 源码剖析
转载两篇不错的文章: 第一篇: 前言 HashMap是我们平时开发过程中用的比较多的集合,但它是非线程安全的,在涉及到多线程并发的情况,进行put操作有可能会引起死循环,导致CPU利用率接近100%. ...
- Ant Design of Angular
1.按照官方的方法,报了这个 node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.node_modules ...
- HDU 1556 Color the ball（线段树：区间更新）
http://acm.hdu.edu.cn/showproblem.php?pid=1556 题意: N个气球,每次[a,b]之间的气球涂一次色,统计每个气球涂色的次数. 思路: 这道题目用树状数组和 ...
- 使用 switch 对值进行分支
与处理 TRUE 和 FALSE 条件的 if 相比,switch 语句则是用来处理数字或者字符串,并根据输入返回某个分支.假设输入一个整数 n,switch 返回从第 1 个参数开始的第 n 个参数 ...
- 使用git bush 生成github SSH公钥
1 如果没有安装ssh,那么使用下面的指令 sudo apt-get install ssh 2 检查SSH公钥 cd ~/.ssh 看看存不存在.ssh,如果存在的话,掠过下一步:不存在的请看下一步 ...
- MQ选型对比RabbitMQ RocketMQ ActiveMQ Kafka
几种MQ产品说明: ZeroMQ : 扩展性好,开发比较灵活,采用C语言实现,实际上他只是一个socket库的重新封装,如果我们做为消息队列使用,需要开发大量的代码 RabbitMQ :结合erla ...
- mysql中InnoDB存储引擎的行锁和表锁
Mysql的InnoDB存储引擎支持事务,默认是行锁.因为这个特性,所以数据库支持高并发,但是如果InnoDB更新数据的时候不是行锁,而是表锁的话,那么其并发性会大打折扣,而且也可能导致你的程序出错. ...
- 深入理解javascript之typeof和instanceof
1.https://blog.csdn.net/mevicky/article/details/50353881 (深入理解javascript之typeof和instanceof)
- 处理EXCEL11问题
程序原本是好使的,但是自从卸载OFFICE11而安装14后,程序无法启动. 重新安装2003 ,然后,删除原引用 Microsoft.Office.Interop.Excel,然后添加引用,浏览,找到 ...
- iOS UI-应用管理（使用Cell模板）
一.Model // // BWApp.h // IOS_0112_应用管理 // // Created by ma c on 16/1/12. // Copyright (c) 2016年 博文科技 ...