标题: EasyUI插件：DataGrid简单示例
作者: dnawo
日期: 2013-05-18 02:36 PM
分类: 脚本语言
内容: 本示例实现了服务器端获取数据，搜索、排序和分页等功能。
复制内容到剪贴板 程序代码<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$("#tab1").datagrid(
{
title: "Datagrid Demo",
iconCls: "icon-sum",
rownumbers: true,
singleSelect: true,
url: "data.ashx",
toolbar: [{
text: "搜索",
iconCls: "icon-search",
handler: function () {
$.messager.prompt("搜索", "输入一个姓名：", function (val) {
if (val) {
//传入的参数会覆盖queryParams，待排序和分页时一起提交
$("#tab1").datagrid("load", { Name: val });
}
});
}
}],
columns: [[
{ field: "Id", title: "编号", hidden: true },
{ field: "Name", title: "姓名" },
{ field: "Age", title: "年龄", sortable: true }
]],
pagination: true,
pageSize: 20,
showFooter: true
});
});
</script>
<table id="tab1"></table>
</body>
</html>
获取数据(data.ashx)：
复制内容到剪贴板 程序代码<%@ WebHandler Language="C#" Class="data_ashx" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Web.Script.Serialization;
public class data_ashx : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
//1.接收参数
string name = context.Request["name"];
string sort = context.Request["sort"];
string order = context.Request["order"];
int page, rows;
int.TryParse(context.Request["page"], out page);
int.TryParse(context.Request["rows"], out rows);
if (page == 0) page = 1;
if (rows == 0) rows = 20;
int id;
int.TryParse(context.Request["id"], out id);
//2.准备数据
List<Data> datas = new List<Data>();
for (int i = 1; i <= 100; i++)
{
if (i != id)
{
datas.Add(new Data() { Id = i, Name = "user" + i, Age = i });
}
}
//3.查询数据
var data = datas.AsQueryable();
EUData eudata = new EUData();
if (!string.IsNullOrEmpty(name))
{
data = data.Where(d => d.Name.IndexOf(name) != -1);
}
eudata.total = data.Count();
if (!string.IsNullOrEmpty(sort) && sort.ToLower() == "age")
{
data = order.ToLower() == "desc" ? data.OrderByDescending(d => d.Age) : data.OrderBy(d => d.Age);
}
else
{
data = data.OrderBy(d => d.Id);
}
data = data.Skip((page - 1) * rows).Take(rows);
eudata.rows = data;
eudata.footer = data.Select(d => new { Id = d.Id, Name = d.Name, Age = d.Age, Group = 1 }).GroupBy(d => d.Group)
.Select(g => new { Id = 0, Name = "Total", Age = g.Sum(item => item.Age) });
//eudata.footer = new List<Data>() { new Data() { Id = 0, Name = "Total", Age = data.Sum(d => d.Age) } };
//4.序列化输出
JavascriptSerializer serializer = new JavascriptSerializer();
context.Response.Write(serializer.Serialize(eudata));
}
public bool IsReusable
{
get {
return false;
}
}
}
public class Data
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
}
public class EUData
{
public int total { get; set; }
public dynamic rows { get; set; }
public dynamic footer { get; set; }
}
效果预览：
补充说明
toolbar高级定制：
复制内容到剪贴板 程序代码<script type="text/javascript">
$(document).ready(function () {
$("#tab1").datagrid(
{
title: "Datagrid Demo",
iconCls: "icon-sum",
rownumbers: true,
singleSelect: true,
url: "data.ashx",
toolbar: "#easyui-datagrid-toolbar",
columns: [[
{ field: "Id", title: "编号", hidden: true },
{ field: "Name", title: "姓名" },
{ field: "Age", title: "年龄", sortable: true }
]],
pagination: true,
pageSize: 20,
showFooter: true
});
$("#btnSearch").click(function () {
var data = {};
var val = $("#name").val();
if (val) {
data.Name = val;
}
$("#tab1").datagrid("load", data);
});
});
</script>
<div id="easyui-datagrid-toolbar">
用户名：<input id="name" class="easyui-validatebox" />
<a id="btnSearch" href="#" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
</div>
<table id="tab1"></table>
资源链接
[1].EasyUI官方：http://www.jeasyui.com/
+ 查看当前日志评论 (0)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.643 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.643 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.643 ms