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. ...
随机推荐
- crontab 的使用
1. 创建一个文件 mycrontab 2. 将此文件运用到系统的定时器中 crontab mycrontab 3. crontab -e (或直接编辑 mycrontab, 但 ...
- Hadoop 2.4.x集群安装配置问题总结
配置文件:/etc/profile export JAVA_HOME=/usr/java/latest export HADOOP_PREFIX=/opt/hadoop-2.4.1 export HA ...
- centos7 firewall 防火墙 命令
为了架设ss在vultr上买了一个日本的vps 用的是centos7的系统 防火墙是 firewall 捣鼓了两天 在这里总结一下. 如果小伙伴也准备在vultr上买vps 在注册是 可以使用这个优 ...
- Django migrations 重命名
1:如果migrations文件中想要重命名文件,重命名后有一次修改models文件,再次执行python makegirations ******,再次执行migrate的时候发现报错了,在我往后的 ...
- WPF-非矩形窗口的创建
第一.窗口的AllowsTransparency设置为True 第二.窗口的Background设置为Transparent 第三.窗口的WindowStyle设置为None 第四.窗口内的Grid用 ...
- features block
很轻松就能把一个新建的block导出到一个module包里.
- 在腾讯云上创建您的SQL Cluster(4)
版权声明:本文由李斯达原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/255 来源:腾云阁 https://www.qclo ...
- [maven] 使用Nexus创建maven私有仓库
1.为什么需要maven私有仓库? 从Maven中央仓库下载所需的jar包,需要外网的支持.如果公司不能上外网的话则不能从中央仓库下载所需jar包,公司网速慢的时候也会影响项目构建的速度.用户可以用n ...
- 整理一下以前的Html+css3复习笔记
一.html5新特性 常用语义标签:nav footer header section mark 功能标签 video audio iframe canvas(画布和绘图功能) input新ty ...
- NOIP系列复习及题目集合
首先是我的酱油记了啦~: Xs的NOIP2014酱油记,持续更新中 知识点方面: noip知识点总结之--贪心 noip知识点总结之--线性筛法及其拓展 noip知识点总结之--欧几里得算法和扩展欧几 ...