easyui demo
HTML代码示例：
<head runat="server">
<title>颜色列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../jqueryeasyUI/demo.css" rel="stylesheet" type="text/css" />
<script src="../jqueryeasyUI/jquery.min.js" type="text/javascript"></script>
<link href="../jqueryeasyUI/easyui.css" rel="stylesheet" type="text/css" />
<link href="../jqueryeasyUI/icon.css" rel="stylesheet" type="text/css" />
<script src="../jqueryeasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../js/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="../jqueryeasyUI/CommonJS.js" type="text/javascript"></script>
<script type="text/javascript">
var _url = "";
$(document).ready(function () {
_url = 'filename.ashx?action=list';
cancel("div_add");
load_data();
});
//按搜索框的条件搜索
function doSearch(name) {
if ($.trim(name) === "") {
$.messager.alert('友情提示', '请填写您要查询的关键字！', 'info');
$(".easyui-searchbox").focus();
return;
}
_url = 'filename.ashx?action=search&Name=' + escape($.trim(name)) + '';
load_data();
}
//查询全部
function search_all() {
_url = 'filename.ashx?action=list';
load_data();
}
// 列表
function load_data() {
$('#tabList').datagrid({
width: 'auto',
height: 'auto',
fit: false, //满屏宽度
idField: 'id',
url: _url,
iconCls: 'icon-edit',
singleSelect: true, //是否单选
rownumbers: true, //行号
remoteSort: false, //排序
striped: true, //设置为true将交替显示行背景
collapsible: true,
fitColumns: true, // 自动调整列宽度
nowrap: true, // 控制数据是否全部显示
columns: [[
{ field: 'ID', title: 'ID', width: 80, sortable: true, editor: 'text', hidden: true },
{ field: 'Name', title: '名称', width: 180, align: 'center', sortable: true }
]],
toolbar:
[
{
text: '增加', iconCls: 'icon-add', handler: function () {
$('#div_add').dialog('open');
empty();
}
},
{
text: '编辑', iconCls: 'icon-edit', handler: function () {
var selected = $('#tabList').datagrid('getSelected');
var xs = [];
for (var p in selected) {
xs.push(p + "=" + selected[p] + ",");
if (p === "ID" && selected[p] !== 0 && selected[p] != null) { //获得ID的值调用函数查询对应要修改的数据
select(selected[p]);
$('#div_add').dialog('open');
}
}
}
},
{
text: '删除', iconCls: 'icon-clear', handler: function () {
var selected = $('#tabList').datagrid('getSelected');
var xs = [];
for (var p in selected) {
xs.push(p + "=" + selected[p] + ",");
if (p === "ID" && selected[p] !== 0 && selected[p] != null) { //获得ID的值调用函数查询对应要修改的数据
delete_confirm(selected[p]); ;
}
}
}
},
{
text: '刷新', iconCls: 'icon-reload', handler: function () {
load_data();
}
},
{
text: "全部", iconCls: 'icon-search', handler: function () {
search_all();
}
}
], pagination: true //分页
});
listPage($('#tabList'));
}
// 删除提示
function delete_confirm(id) {
$.messager.confirm('温馨提示', '确定要删除吗？', function (r) {
if (r) {
_delete(id);
}
});
}
// 删除
function _delete(id) {
$.post("filename.ashx", { action: "delete", id: id }, function (result) {
switch (result) {
case "ok":
load_data();
break;
case "error":
$.messager.alert('系统提示', '请联系管理员！', 'error');
break;
}
});
}
// 保存
function save() {
if ($.trim($("#txtName").val()) === "") {
$.messager.alert('系统提示', '请填写【名称】', 'warning');
return;
}
$.post("filename.ashx",
{
action: "save",
id: $("#hd_id").val(),
Name: $.trim($("#txtName").val())
}, function (result) {
switch (result) {
case "ok":
$.messager.alert('系统提示', '保存成功！', 'info');
load_data();
empty();
cancel("div_add");
break;
case "error":
$.messager.alert('系统提示', '请联系管理员！', 'error');
break;
}
});
}
// 清空
function empty() {
$("#hd_id").val("0");
// 名称
$("#txtName").val("");
}
// 进度条 1
function progress() {
var win = $.messager.progress({
title: 'Please waiting',
msg: 'Loading data...'
});
setTimeout(function () {
$.messager.progress('close');
}, 5000);
}
// 进度条 2
function showProcess(isShow, title, msg) {
if (!isShow) {
$.messager.progress('close');
return;
}
var win = $.messager.progress({
title: title,
msg: msg
});
}
// 编辑查询
function select(id) {
//showProcess(true, '温馨提示', '正在加载数据...');
$.post("filename.ashx", { action: "select", id: id }, function (data) {
//showProcess(false);
$(data).find("TableName").each(function () {
$("#hd_id").val($(this).children("ID").text());
// 名称
$('#txtName').val($(this).children("Name").text());
});
});
}
// 取消
function cancel(objDiv) {
$("#" + objDiv).dialog({ closed: true });
}
</script>
<style scoped="scoped">
.textbox
{
width: 180px;
height: 20px;
margin: 0;
padding: 0 2px;
box-sizing: content-box;
line-height: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input type="hidden" id="hd_id" value="0" />
<input id="txtsearchName" class="easyui-searchbox" data-options="prompt:'请输入关键字',menu:'#mm',searcher:doSearch"
style="width: 300px" />
<div id="mm">
<div data-options="name:'Name',iconCls:'icon-ok'">
名称</div>
</div>
<p>
</p>
<!--列表-->
<table id="tabList" title="列表" style="width: 700px; height: 250px">
<thead>
<tr>
<th data-options="field:'ID',width:80,align:'right'">
ID
</th>
<th data-options="field:'Name',width:200,align:'right'">
名称
</th>
</tr>
</thead>
</table>
<!--添加-->
<div id="div_add" align="center" class="easyui-dialog" title="名称" data-options="iconCls:'icon-save',resizable:true,modal:true"
style="width: 600px; height: 150px; padding: 10px">
<div class="easyui-layout" fit="true">
<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: right; height: 20px; width: 30%; font-size: 16px;">
<span style="font-size: 14px; color: Red;">*</span> 名称：
</td>
<td style="text-align: left; width: 75%; text-indent: 3px;">
<input id="txtName" type="text" style="width: 230px; height: 30px; font-size: 16px;" />
</td>
</tr>
</table>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
<a id="btnEp" class="easyui-linkbutton" icon="icon-ok" onclick='save()'>确定</a> <a
id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" onclick='cancel("div_add")'>
取消</a>
</div>
</div>
</div>
</form>
</body>
一般处理程序(.ashx)后代代码示例：
//相关命名空间
using System;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Xml.Linq;
private DBDataContext db = new DBDataDataContext();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request["action"] != null)
{
switch (context.Request["action"].ToString())
{
case "list":
List(context);
break;
case "delete":
Delete(context);
break;
case "save":
Save(context);
break;
case "select":
Select(context);
break;
case "search":
Search(context);
break;
}
}
}
// 查询
private void Select(HttpContext context)
{
var id = Convert.ToInt32(context.Request.Form["id"]);
var result = "<?xml version='1.0' encoding='UTF-8'?><TableNameList>";
var query = from v in db.TableName select v;
if (id > 0)
{
query = query.Where(v => v.id == id);
}
foreach (var item in query)
{
result += "<TableName>";
result += "<ID>" + item.id+ "</ID>";
result += "<Name>" + item.Name+ "</Name>";
result += "</TableName>";
}
result += "</TableNameList>";
var root = XElement.Parse(result);
context.Response.ContentType = "text/xml";
context.Response.Charset = "utf-8";
context.Response.Write(root);
context.Response.Flush();
context.Response.End();
}
// 删除
private void Delete(HttpContext context)
{
var result = "";
var id = Convert.ToInt32(context.Request["id"]);
var query = from v in db.TableName where v.id == id select v;
try
{
db.TableName.DeleteAllOnSubmit(query);
db.SubmitChanges();
result = "ok";
}
catch
{
result = "error";
}
context.Response.Write(result);
}
/// <summary>
/// 保存
/// </summary>
private void Save(HttpContext context)
{
var id = Convert.ToInt32(context.Request["id"]);
if (id > 0)
{
this.Edit(context, id);
}
else
{
this.Add(context);
}
}
/// <summary>
/// 添加名称
/// </summary>
/// <param name="context"></param>
private void Add(HttpContext context)
{
var result = "";
var tablename= new TableName
{
Name = context.Request["Name"]
};
try
{
db.TableName.InsertOnSubmit(bagcolor);
db.SubmitChanges();
result = "ok";
}
catch (Exception ex)
{
var error = ex.Message;
result = "error";
}
context.Response.Write(result);
}
/// <summary>
/// 编辑
/// </summary>
private void Edit(HttpContext context, int id)
{
var result = "";
var query = from v in db.TableName where v.id == id select v;
try
{
foreach (var tablename in query)
{
tablename.Name = context.Request["Name"]; // 名称
}
db.SubmitChanges();
result = "ok";
}
catch
{
result = "error";
}
context.Response.Write(result);
}
/// <summary>
/// 列表
/// </summary>
private void List(HttpContext context)
{
var data = "";
var pageSize = Convert.ToInt32(context.Request["rows"]);//通过这个获取得到pageSize
var pageNum = Convert.ToInt32(context.Request["page"]); //通过这个获取得到pageNum
var total = (from p in db.TableName select p.id).Count();
var serializer = new JavaScriptSerializer();
if (total > 0)
{
pageNum = pageNum == 0 ? 1 : pageNum;
var query = (from v in db.TableName
orderby v.id descending
select new
{
ID = v.id,
Name = v.Name
}).Skip((pageNum - 1) * pageSize).Take(pageSize);
data = "{\"total\":" + total + ",\"rows\":" + serializer.Serialize(query) + "}";
}
else
{
data = "{\"total\":0,\"rows\":" + serializer.Serialize("") + "}";
}
context.Response.Write(data);
}
// 搜索
private void Search(HttpContext context)
{
var serializer = new JavaScriptSerializer();
var name = context.Request["Name"];
var query = from v in db.TableName
orderby v.id descending
select new
{
ID = v.id,
Name = v.Name
};
var data = serializer.Serialize(query);
if (name != null)
{
query = query.Where(p => p.Name.Contains(name));
var total = query.Count();
if (total > 0) // 防止报错
{
var pageSize = Convert.ToInt32(context.Request["rows"]); // 通过这个获取得到pageSize
var pageNum = Convert.ToInt32(context.Request["page"]); // 通过这个获取得到pageNum
pageNum = pageNum == 0 ? 1 : pageNum;
query = query.Skip((pageNum - 1) * pageSize).Take(pageSize);
data = "{\"total\":" + total + ",\"rows\":" + serializer.Serialize(query) + "}";
}
else
{
data = "{\"total\":0,\"rows\":" + serializer.Serialize("") + "}";
}
}
context.Response.Write(data);
}
public bool IsReusable
{
get
{
return false;
}
}
