[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绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
随机推荐
- Educational Codeforces Round 47 D
Let's call an undirected graph $G=(V,E)$ relatively prime if and only if for each edge $(v,u)∈E$ $GC ...
- 计算机基础教程11 - 互联网&内联网
在本章中,我们将看到什么是Internet和Intranet,以及讨论两者之间的异同. 互联网 它是互联计算机网络的全球/全球系统.它使用标准的Internet协议(TCP / IP).Interne ...
- poj 3630 Phone List trie树
Phone List Description Given a list of phone numbers, determine if it is consistent in the sense tha ...
- SQL Server 查询优化 索引的结构与分类
一.索引的结构 关系型数据库中以二维表来表达关系模型,表中的数据以页的形式存储在磁盘上,在SQL SERVER中,数据页是磁盘上8k的连续空间,那么,一个表的所有数据页在磁盘上是如何组织的呢?分两种情 ...
- AtomicLong可以被原子地读取和写入的底层long值的操作
java.util.concurrent.atomic.AtomicLong类提供了可以被原子地读取和写入的底层long值的操作,并且还包含高级原子操作. AtomicLong支持基础long类型变量 ...
- Homebrew/Linuxbrew 安装常有工具
Homebrew https://brew.sh/ Install: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent ...
- 【linux】查看进程
查询所有:ps aux 查询某个用户:ps -u abc 终止某个进程:kill
- boost 中文编码转换
Lstring CHanderHttp::CircleDesc(Lint nCurCircle, Lint nMaxCircle,Lint usercount){ std::stringstream ...
- 微信小程序页面跳转的四种方法
wx.navigateTo({}) ,保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回; 示例: 1 wx.navigateTo({ 2 url:'../test/ ...
- /dev/mem直接操作硬件寄存器
/******************************************************************************* * /dev/mem直接操作硬件寄存器 ...