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实现课程选择
最终实现的效果如下图所示: 代码如下所示: HTML代码部分: <body> <div class="page" style="overflow: hi ...
- [LeetCode_1] twoSum
LeetCode: 1. twoSum 题目描述 Given an array of integers, return indices of the two numbers such that the ...
- Android动画Drawable Animation
Drawable Animation是逐帧动画,那么使用它之前必须先定义好各个帧.我们可以通过代码定义,也可以使用xml文件定义,一般使用后者.如下: <?xml version="1 ...
- C++string中用于查找的find系列函数浅析
总述: 以下所讲的所有的string查找函数,都有唯一的返回类型,那就是size_type,即一个无符号整数(按打印出来的算).若查找成功,返回按查找规则找到的第一个字符或子串的位置:若查找 ...
- Oracle软件开发分析
软件开发的步骤可大致分为: 1.需求分析 2.系统设计 3.编码实现 4.系统测试 5.运行维护 student class 多对一 sno name age gender cid id c ...
- 15.Linux安装DHCP服务为虚拟机分配IP
参考博客:http://www.jb51.net/article/31607.htm $ rpm -ql dhcp #检查是否安装dhcp $ yum -y install dhcp* ...
- SE78、SWM0
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Scrum Meeting 5-20151207
任务安排 姓名 今日任务 明日任务 困难 董元财 将服务器转移到学校服务器 修复app特定情况下崩溃 无 胡亚坤 学习连接服务器框架 发布界面和购买界面 无 刘猛 在github上分配好任务 写博客 ...
- iOS下载使用系统字体
iOS下载使用系统字体 通用开发中一般使用系统默认的字体: 另外系统也提供了一些其他字体我们可以选择下载使用 1:在mac上打开 字体册 app 即可查找系统支持的字体,适用于ios上开发使用 从ma ...
- 0030 Linux 网络操作命令
1. 主机是否可达 ping IP 2. 服务是否在运行 telnet IP port 3. 网络配置 ifconfig ip route arp 4. 网络访问 curl wget 5. 网络追踪 ...