[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绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
随机推荐
- BootStrap iCheck插件全选与获取value值的解决方法
这篇文章主要介绍了BootStrap iCheck插件全选与获取value值的解决方法,解决方法其实很简单,下面小编给大家分享下这方面的知识 在使用jQuery iCheck 插件的时候遇到了一个问题 ...
- UVa 1210 连续素数之和
https://vjudge.net/problem/UVA-1210 题意: 输入整数n,有多少种方案可以把n写成若干个连续素数之和? 思路: 先素数打表,然后求个前缀和. #include< ...
- Ubuntu终端常用的快捷键，光标移动到开始位置
光标操作,实用 Ctrl+a 光标移动到开始位置 Ctrl+e 光标移动到最末尾 删除 Ctrl+k 删除此处至末尾的所有内容 Ctrl+u 删除此处至开始的所有内容 删除单个 Ctrl+d 删除当前 ...
- 最好的移动触摸滑动插件：Swiper
最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...
- Python 中的那些坑总结——持续更新
1.三元表达式之坑 很显然,Python把第一行的(10 + 4)看成了三元表达式的前部分,这个坑是看了<Python cookbook>(P5)中学到的,书中的代码: 2.Python生 ...
- Android 之低版本高版本实现沉浸式状态栏
沉浸式状态栏确切的说应该叫做透明状态栏.一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出 ...
- chrome插件访问原始页面的变量
开发chrome插件时遇到需要获取原始网页中的一个js变量的值问题.由于content.js和原始网页的作用域环境不同,无法直接获取变量的值,提示undefined.谷歌找到大神提供的办法.综合起来记 ...
- Codeforces Round #279 (Div. 2) 题解集合
终于有场正常时间的比赛了...毛子换冬令时还正是好啊233 做了ABCD,E WA了3次最后没搞定,F不会= = 那就来说说做的题目吧= = A. Team Olympiad 水题嘛= = 就是个贪心 ...
- mysqlbinlog初识
mysql-binlog->解析mysql的binlog日志 mysql的binlog日志是什么? 数据目录下的日下文件就是mysql的binlog日志 mysql-bin.00001 mysq ...
- BOM之JavaScript常用事件
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...