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. ...
随机推荐
- A New Effect About My Plugin render
- android界面横屏和竖屏的切换
关于android横屏和竖屏的切换网上给了很多种.但是有些介绍的方法都是在android旧版本上. 我现在把握用到的情况写下来用于备忘: android 版本:4.0 - 4.4 要求:android ...
- if 语句运用
运用if语句完成对年.月.日的判断. Console.WriteLine("其输入年份:"); int a = int.Parse(Console.ReadLine()); Con ...
- Prime Query (ZOJ 3911 线段树)
Prime Query Time Limit: 1 Second Memory Limit: 196608 KB You are given a simple task. Given a sequen ...
- IOS开发数据库篇—SQLite模糊查询
IOS开发数据库篇—SQLite模糊查询 一.示例 说明:本文简单示例了SQLite的模糊查询 1.新建一个继承自NSObject的模型 该类中的代码: // // YYPerson.h // 03- ...
- (转)awk实例练习(一)
文章转自 http://www.cnblogs.com/zhuyp1015/archive/2012/07/14/2591822.html 前一篇学习了awk的基本知识,现在来做一些练习加深一下印象. ...
- 学习mongo系列（六）limit(munber),skip(number)
> db.user.find().pretty(){ "_id" : ObjectId("56946fba3a18f4867aecbcd1"), &quo ...
- IOS开发之WIFI及IP相关
获取手机设备的IP信息: #import <ifaddrs.h> #import <arpa/inet.h> // Get IP Address - (NSString *)g ...
- Teleport Ultra/Teleport Pro的冗余代码批量清理方法
Teleport Pro 是款优秀的网站离线浏览工具(即网站整站下载工具),Teleport Ultra是其增强版,但使用此系列软件下载的离线网页里会包含大量冗余代码(如tppabs),手动去修改工作 ...
- C#泛型-小心使用静态成员变量
对于泛型类的声明 其中使用类型参数的构造类型,比如List<T>被称为开放构造类型(open constructed type)而不使用类型参数的构造类型,例如List<int> ...