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. ...
随机推荐
- SDUTOJ 3312
题目描述 给出一个n*n的矩阵,矩阵中只有0和1,现在有两种操作: 1 x y 将第x行第y列的数字改变(0变1,1变0) 2 x1 y1 x2 y2求由左上角(x1,y1)到右下角(x2,y2)组成 ...
- EF中使用linq进行关联查询
EF使用linq进行多表查询是完全可以的,最后ToList()调用的时候回产生一条分页的sql语句,所以并不是全部查询再分页的.所以不会影响查询的性能 public void TestLinq() { ...
- 从零开始学iPhone开发（4）——使用WebView
转自 总结关于iPhone中UIWEBVIEW读取本地GBK编码格式html 关于webView读取本地GBK编码的html,尝试了两天,终于成功. 欢喜之余,把感想记下来.一般来说,不成都是人犯错, ...
- C++string中有关字符串内容修改和替换的函数浅析
1.assign() 原型: //string (1) basic_string& assign (const basic_string& str); //substring (2) ...
- [转]（二）unity4.6Ugui中文教程文档-------概要-UGUI Canvas
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...
- Django ModelForm and Form
django表单系统中,所有的表单类都作为django.forms.Form的子类创建,包括ModelForm 关于django的表单系统,主要分两种 基于django.forms.Form 基于dj ...
- Div中高度自适应增长方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- linux下查看某软件是否已安装, ubuntu安装deb包
1.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -qa | grep “软件或者包的名字”. [root@hexuweb102 ~] rpm -qa | grep ...
- springmvc的单文件上传
@RequestMapping("/up") public ModelAndView up(MultipartFile myfiles , HttpServletRequest r ...
- [java基础]分支结构（2）
[java基础]分支结构2 switch case /** 文件路径:G:\JavaByHands\if-else\ 文件名称:switchcase.java 编写时间:2016/6/6 作 者:郑晨 ...