Jquery EasyUI DataGrid .net实例
前台界面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid教程</title>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" href="Styles/themes/icon.css" />
<link rel="Stylesheet" type="text/css" href="Styles/themes/default/easyui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#QuestionList").datagrid(
{
title: "问卷列表",
url: "Handler.ashx",
columns: [[
{ field: "Id", title: "编号", width: "100" },
{ field: "Title", title: "题目", width: "200" },
{ field: "Remark", title: "备注", width: "200" } ]],
rownumbers: true, //行号
singleSelect: false, //是否单选
pagination: true//分页控件
}
);
var p = $('#QuestionList').datagrid('getPager');
$(p).pagination({
pageSize: 10, //每页显示的记录条数，默认为10
pageList: [10, 20, 50], //可以设置每页记录条数的列表
beforePageText: '第', //页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
//下面是针对easyui-dialog
$("#QuestionInfo").dialog(
{
title: "问卷信息",
width: '900',
height: '600',
iconCls: 'icon-edit',
// href: 'QueationInfo.htm',
modal: true,
closed: true,
buttons: [{
text: '保存',
iconCls: 'icon-ok',
handler: function () { $("#QInfo").form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
if (result.errorMsg) {
$.messager.show({
title: '错误信息',
msg: result.errorMsg
});
} else {
$('#QuestionInfo').dialog('close');
$('#QuestionList').datagrid('reload');
}
}
});
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#QuestionInfo').dialog('close');
}
}]
}
); }
);
function Add() {
$("#QuestionInfo").dialog("open");
url = 'Add.ashx?type=add';
}
function edit() {
var row = $('#QuestionList').datagrid('getSelected');
if (row) { $('#QuestionInfo').dialog('open').dialog('setTitle', '编辑');
$('#QInfo').form('load', row);
url = 'Add.ashx?type=edit';
}
else {
alert('请选择行');
}
}
function Del() {
$.messager.confirm('确认', '你确认要删除该记录吗？', function (r) {
if (r) { var row = $('#QuestionList').datagrid('getSelected');
if (row) {
url = 'Add.ashx?type=del&&Id=' + row.Id;
// alert(url);
// $.ajax({
// contentType: "application/json",
// type: "post",
// dataType: "json",
// url: 'Add.ashx',
// data: "{'type':'del','Id':" + row.Id + "}",
// sucess: function (msg) {
// alert('dd');
// } // });
$.post('Add.ashx?type=del', { Id: row.Id },
function (result) {
if (result.status == 1) {
$('#QuestionList').datagrid('reload');
} else {
$.messager.alert('错误', result.msg, 'error');
}
}, 'json'
); }
else {
alert('请选择行');
}
}
}); }
</script>
</head>
<body>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="Add()">
添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()">
编辑</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="Del()">
删除</a>
</div>
<table id="QuestionList">
</table>
<div id="QuestionInfo">
<form id="QInfo" method="post">
<input type="hidden" name="Id" />
<p>
标题：<input id="Title" name="Title" /></p>
<p>
<!-- form取值针对的是name-->
备注：<input id="Remark" name="Remark" /></p>
</form>
</div>
</body>
</html>
处理页：
1.得到List列表
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string result = "";
string Title = context.Request["page"]; string a = Title;
if (a == "")
{
IList<QuestionModel> Infos = new QuestionBLL().GetModelList(" id<10 ");
result = JsonConvert.SerializeObject(Infos);
}
else
{
IList<QuestionModel> Infos = new QuestionBLL().GetModelList("id>9 and id<100 ");
result = JsonConvert.SerializeObject(Infos);
}
//总记录数total
//构造json
result = "{\"total\":100,\"rows\":"+result+"}";
context.Response.Write(result);
}
2.增加修改删除
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Wzh.BLL;
using Wzh.Model;
using System.Text;
namespace Web
{
/// <summary>
/// Add 的摘要说明
/// </summary>
public class Add : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string type = context.Request["type"];
StringBuilder result = new StringBuilder();
if (type == "add")
{
int AddId = add(context); ;
if (AddId == )
{
result.Append("{\"errorMsg\":\"添加失败\"}");
}
else
{
result.Append("{\"errorMsg\":false}");
} }
else if(type=="edit")
{
int EditId = Edit(context); ;
if (EditId == )
{
result.Append("{\"errorMsg\":\"编辑失败\"}");
}
else
{
result.Append("{\"errorMsg\":false}");
}
}
else if (type == "del")
{
if (!Del(Convert.ToInt32(context.Request["Id"])))
{
result.Append("{\"sucess\":\"删除失败\"}");
}
else
{
result.Append("{\"success\":true,\"status\":1}");
} }
context.Response.Write(result.ToString());
}
public int add(HttpContext context)
{ string Title = context.Request["Title"];
string Remark = context.Request["Remark"];
QuestionModel Model = new QuestionModel();
Model.Remark = Remark;
Model.Title = Title;
return new QuestionBLL().Add(Model); }
public int Edit(HttpContext context)
{
int Id = ;
Id = Convert.ToInt32(context.Request["Id"]);
string Title = context.Request["Title"];
string Remark = context.Request["Remark"];
QuestionModel Model = new QuestionModel();
Model.Remark = Remark;
Model.Title = Title;
Model.Id = Id;
new QuestionBLL().Update(Model);
return Id;
}
public bool Del(int Id)
{
return new QuestionBLL().Delete(Id);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Jquery EasyUI DataGrid .net实例的更多相关文章
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- Jquery easyui datagrid 导出Excel
From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- jquery easyui datagrid 加每页合计和总合计
jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...
- jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...
- jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条
jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...
随机推荐
- 精彩的javascript对象和数组混合相加
最近遇到一个让人困解的一个问题:一个简单的js加法运算表达式: +[]; //这里加上一个空数组得到什么???答案:'1'; 为什么答案是1,一开始我也很困惑:后来我读了一篇文章才知道:在javasc ...
- hdu 5751 Eades
题意:对于整数序列$A[1...n]$定义$f(l, r)$为区间$[l, r]$内等于区间最大值元素的个数,定义$z[i]$为所有满足$f(l, r)=i$的区间总数.对于所有的$1 \leq i ...
- Uva 11478 Halum操作
题目链接:http://vjudge.net/contest/143318#problem/B 题意:给定一个有向图,每条边都有一个权值.每次你可以选择一个结点v和一个整数d,把所有以v为终点的边的权 ...
- Spring RabbitMq
spring-rabbitmq.xml文件内容如下: <?xml version="1.0" encoding="UTF-8"?><beans ...
- Android知识散点
1.所有活动都需要在AndroidMainfest.xml中注册后才能生效. <activity android:name=".MainActivity" android:l ...
- 初学画布canvas的chapter1
——这篇读后感是我阅读<写给Web开发人员看的HTML5教程>一书中的第5章画布后的小小看法,由于编程实力有限,很多效果病没有一一去实现,所以只是停留在纸上谈兵的阶段. 画布(canvas ...
- 微信小程序文件结构
在小程序的跟目录有三个文件 app.js 小程序逻辑 必须有app.json 小程序公共设置 必须有app.wxss 小程序公共样式表 非必须有 小程序的每个页面是一个文件夹 里面包含4种 ...
- ABAP编辑器SE38、ABAP工作台SE80 切换
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- WPF-非矩形窗口的创建
第一.窗口的AllowsTransparency设置为True 第二.窗口的Background设置为Transparent 第三.窗口的WindowStyle设置为None 第四.窗口内的Grid用 ...
- hdu 3887 Counting Offspring dfs序+树状数组
Counting Offspring Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...