[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绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
随机推荐
- Flask 1 Introductory Chapter
reference: <Flask Web 开发> Environment Python 3 Mac OSX Introductory Chapter: 安装 1.安装第三方工具 virt ...
- SDN前瞻 软件定义网络的一些概念
SDN的核心:可编程性 SDN的思想:SOA面向服务 面向服务的体系结构(service-oriented architecture SOA) 使网络连接的大量计算机易于合作,以 服务 而不是人工交互 ...
- Gym 101243E Cupcakes
http://codeforces.com/gym/101243/attachments 题意: 有n个人,桌子上有k的蛋糕,每个人都有一个值val,表示每次轮到他吃蛋糕时,他可以吃1~val的蛋糕量 ...
- LA 7277 Landscaping（最小割）
https://vjudge.net/problem/UVALive-7277 题意: 给出一个n*m的地图,.代表低坡,#代表高坡. 现在有n+m辆车分别从上端和左端出发,如果在行驶的过程中需要转换 ...
- Codeforces Round #319 (Div. 2) B. Modulo Sum 抽屉原理+01背包
B. Modulo Sum time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- 使用quartz实现定时器功能
首先导入两个包 <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>qua ...
- Java中HashMap的put与get方法原理
直接上代码 注: 代码来自于 Java 9 put方法 public V put(K key, V value) { return putVal(hash(key), key, value, fals ...
- vsftpd日志配置及查看——可以将vsftpd记录在系统日志里
vsftpd日志配置及查看 vsftpd ftp服务器的日志设置,可以通过修改主配置文件/etc/vsftpd.conf实现.主配置文件中与日志设置有关的选项包括xferlog_enable .xfe ...
- python学习笔记（六）---sublime text3 创建python项目
1.创建项目 依次鼠标左键点击Project>Add Folder to Project...,选择test文件夹: 2.保存项目 依次鼠标左键点击Project>Save Project ...
- Ubuntu下XTerm乱码问题的解决及XTerm的简单配置
本人比较喜欢Ubuntu这个Linux的发行版,主要是安装程序插件什么的都比较方便,推荐新手使用,可以免去很多麻烦的配置,将注意力放在编程的学习上,当然如果是想专门学Linux的,还是推荐在Cento ...