效果：
html代码：
<div style="padding-top: 50px; width: 800px; margin: 0 auto;">
<!--使用JS加载方式-->
<table id="tab"></table> <!--按钮--->
<div id="tb">
<div style="padding: 5px;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add', plain:true," onclick="obj.add();">添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit', plain:true," onclick="obj.edit();">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove', plain:true," onclick="obj.remove();">删除</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save', plain:true," style="display: none;" id="save" onclick="obj.save();">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-redo', plain:true," style="display: none;" id="redo" onclick="obj.redo();">取消编辑</a>
</div>
<div style="padding-left: 10px; padding-bottom: 10px;">
搜索姓名（可以模糊查询）：<input id="name" name="name" type="text" class="textbox" style="width: 130px;" />
查询时间 从：<input id="time_from" name="time_from" type="text" class="easyui-datebox" style="width: 130px;" />
到：<input id="time_to" name="time_to" type="text" class="easyui-datebox" style="width: 130px;" />
<a id="search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'," style="margin-left: 20px; padding: 0 10px 0 10px;" onclick="obj.search();">搜索</a>
</div>
</div>
</div>
JS代码：
<script type="text/javascript">
//扩展 dateTimeBox
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
options.editable = false;
input.datetimebox(options);
return input;
},
getValue: function (target) {
return $(target).datetimebox('getValue');
},
setValue: function (target, value) {
$(target).datetimebox('setValue', value);
},
resize: function (target, width) {
$(target).datetimebox('resize', width);
},
destroy: function (target) {
$(target).datetimebox('destroy');
},
}
}); $(function () {
obj = {
editRow: undefined,//undefined默认为false
search: function () {
$('#tab').datagrid('load', {
searchvalue: $.trim($('input[name="name"]').val()),
time_from: $('input[name="time_from"]').val(),
time_to: $('input[name="time_to"]').val(),
});
},
add: function () {
$('#save,#redo').show();
/*
//当前页行结尾添加
$('#box').datagrid('appendRow', {
user : 'bnbbs',
email : 'bnbbs@163.com',
date : '2014-11-11',
});
*/ if (this.editRow == undefined) {
//添加一行
$('#tab').datagrid('insertRow', {
index: ,
row: {
/*
user : 'bnbbs',
email : 'bnbbs@163.com',
date : '2014-11-11',
*/
},
}); //将第一行设置为可编辑状态
$('#tab').datagrid('beginEdit', ); this.editRow = ;
}
},
save: function () {
//这两句不应该放这里，应该是保存成功后，再执行
//$('#save,#redo').hide();
//this.editRow = false;
//将第一行设置为结束编辑状态
$('#tab').datagrid('endEdit', this.editRow);//保存当前选定行
},
redo: function () {
$('#save,#redo').hide();
this.editRow = undefined;
$('#tab').datagrid('rejectChanges');
},
edit: function () {
var rownumber = $('#tab').datagrid('getSelections'); if (rownumber.length == ) {
//如果为false时，可以编辑本行。不可在点击另外的一行。
if (this.editRow == undefined) {
//获取选中行的索引
var index = $('#tab').datagrid('getRowIndex', rownumber[]);
$('#save,#redo').show();
$('#tab').datagrid('beginEdit', index);
this.editRow = index;//原先是没有值，现在把rowindex的值给obj.editrow
}
}
else {
$.messager.alert("提示", "请选择一行！");
}
},
remove: function () {
var delnumber = $('#tab').datagrid('getSelections');
if (delnumber.length > ) {
$.messager.confirm("提示", "是否要确定删除！", function (flag) {
if (flag) {
var ids = [];
for (var i = ; i < delnumber.length; i++) {
ids.push("'" + delnumber[i].id + "'");
} //删除
$.ajax({
type: 'post',
url: '../ashx/delete.ashx',
data: {
ids: "(" + ids.join(',') + ")",
},
beforeSend: function () {
$('#tab').datagrid('loading');
},
success: function (data) {
if (data == -) {
$.messager.alert("提示", "删除错误！");
}
else {
$('#tab').datagrid('loaded');
$.messager.show({
title: '提示',
msg: data + '名用户被删除成功！',
timeout: ,//2秒钟
showtype: 'fade',//null,slide,fade,show
});
$('#tab').datagrid('load');//重新加载数据
$('#tab').datagrid('unselectAll');//取消所有选中
}
},
})
}
});
}
else {
$.messager.alert("提示", "请选择要删除的行。");
}
},
}; //格式化日期输出样式
$('#time_from, #time_to').datebox({
formatter: function (date) { return date.getFullYear() + '/' + (date.getMonth() + ) + '/' + date.getDate(); },
}); //Datagrid设置
$('#tab').datagrid({
//===================================== 样式 ===============================================//
width: ,//宽度
title: '信息列表',//标题名
iconCls: 'icon-search',//图标
//singleSelect: true,//是否单选
striped: true,//是否开启斑马线
fitColumns: false,//是否自适应宽度（出现滚动条）
loadMsg: '正在努力加载，请稍后………………',//显示加载提示信息
//rownumbers: true,//显示行号
//showHeader: false,//是否显示行头（标题）
//showFooter:false,//显示行尾，默认情况下不显示，要在后台使用json数据传递
//==========================================================================================// //============================= 加载数据，要显示的字段 =========================================//
//要加载的数据
url: "../Json/datagridjson.ashx",
//要显示的列
columns: [[
{
field: 'id',
title: '编号',
checkbox: true,
},
{
field: 'name',
title: '姓名',
width: ,//所有字段设置成100，起到自动平均分配大小的作用
halign: 'center',//仅标题居中 //显示数据的时候，格式化数据
//formatter: function (value, row, index) {
// return '[ ' + value + ' ]';
//}, //设置为可以编辑的列，只有这样才能使用编辑
editor: {
type: 'validatebox',
//其中写的使一些验证，像邮箱验证等等
options: {
required: true,
},
},
},
{
field: 'sex',
title: '性别',
width: ,//所有字段设置成100，起到自动平均分配大小的作用 //设置为可以编辑的列，只有这样才能使用编辑
editor: {
type: 'validatebox',
//其中写的使一些验证，像邮箱验证等等
options: {
required: true,
},
},
},
//在字段中使用排序，每点击一次，都会向后台POST要排序的字段和正序还是倒序排列。
{
field: 'createtime',
title: '创建时间',
width: ,//所有字段设置成100，起到自动平均分配大小的作用
sortable: true,//允许排序
}
]],
//==========================================================================================// //===================================== 分页 ===============================================//
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//，每页显示的条数
pageList: [, , ],//每页显示的条数
//==========================================================================================// //===================================== 排序 ===============================================//
//通过POST传递到后台，然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//==========================================================================================// //===================================== 按钮 ===============================================//
toolbar: '#tb',
//==========================================================================================// //===================================== 添加一行 ===============================================//
//检测是否完成添加
onAfterEdit: function (rowIndex, rowData, changes) {
$('#save,#redo').hide();
obj.editRow = undefined;
//console.log(rowData);
//判断是删除数据还是修改数据
var inserted = $('#tab').datagrid('getChanges', 'inserted');
var updated = $('#tab').datagrid('getChanges', 'updated'); //新增
if (inserted.length > ) {
$.ajax({
type: 'post',
url: '../ashx/insert.ashx',
data: {
rows: inserted,
},
beforeSend: function () {
$('#tab').datagrid('loading');
},
success: function (data) {
if (data == -) {
$.messager.alert("提示", "增加信息错误！");
}
else {
$('#tab').datagrid('loaded');
$.messager.show({
title: '提示',
msg: data + '名增加成功！',
timeout: ,//2秒钟
showtype: 'fade',//null,slide,fade,show
});
$('#tab').datagrid('load');//重新加载数据
}
},
})
} //修改
if (updated.length > ) {
$.ajax({
type: 'post',
url: '../ashx/update.ashx',
data: {
rows: updated,
},
beforeSend: function () {
$('#tab').datagrid('loading');
},
success: function (data) {
if (data == -) {
$.messager.alert("提示", "修改信息错误！");
}
else {
$('#tab').datagrid('loaded');
$.messager.show({
title: '提示',
msg: data + '修改成功！',
timeout: ,//2秒钟
showtype: 'fade',//null,slide,fade,show
});
$('#tab').datagrid('load');//重新加载数据
}
},
})
}
},
//==========================================================================================//
//双击一行,进行修改
onDblClickRow: function (rowIndex, rowData) {
//如果为false时，可以编辑本行。不可在点击另外的一行。
if (obj.editRow == undefined) {
$('#save,#redo').show();
$('#tab').datagrid('beginEdit', rowIndex);
obj.editRow = rowIndex;//原先是没有值，现在把rowindex的值给obj.editrow
}
}
});
})
</script>
后台代码：
datagridjson.ashx:
- 加载数据，搜索：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json"; //接受前台传递来的页数和每页显示的条数
//前台开启分页之后，传递来的参数
int pageIndex = Convert.ToInt32(context.Request["page"]);
int pagenumber = Convert.ToInt32(context.Request["rows"]); //接收排序字段
string sortfield = context.Request["sort"];
string sortDescOrasc = context.Request["order"]; //------------------------------------------搜索-----------------------------------------
string connect = "";
string searchvalue = "";
string time_from = "";
string time_to = ""; if (context.Request["searchvalue"] != null && context.Request["searchvalue"] != "")
{
searchvalue = "name like '%" + context.Request["searchvalue"] + "%' and ";
connect += searchvalue;
} if (context.Request["time_from"] != null && context.Request["time_from"] != "")
{
time_from = "createtime>='" + context.Request["time_from"].Replace('/','-') + "' and ";
connect += time_from;
} if (context.Request["time_to"] != null && context.Request["time_to"] != "")
{
time_to = "createtime<='" + context.Request["time_to"].Replace('/', '-') + "' and ";
connect += time_to;
} if (connect != "")
{
connect = " where " + connect.Substring(, connect.Length - );
}
//-------------------------------------------------------------------------------------------- //存储数据
DataTable dt = new DataTable(); if (pageIndex == )
{
//加载第一页
string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person "+connect+" order by " + sortfield + " " + sortDescOrasc + "";
//获取并转换为JSON数据
dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
}
else if (pageIndex != )
{
//加载非第一页
string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person " + connect + " ) as a where a.rownum > " + (pageIndex - ) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
//获取并转换为JSON数据
dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
}
else { } //将datatable转换为json
//在返回的JSON数据中，加入total属性（总记录数）
//那么他就会在加载的时候，显示总记录数。
//显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
//计算总条数（同时可以统计，使用关键字查询之后的条数）
int totalnumber = (int)SQLHelper.ExcuteScalar("select count(*) from Tb_person " + connect + "", CommandType.Text);
//返回数据
string strjson = "{\"total\":" + totalnumber + ", \"rows\":" + DatatableToJson.ToJson(dt) + "}"; context.Response.Write(strjson);
}
insert.ashx:
public void ProcessRequest(HttpContext context)
{
string name = context.Request["rows[0][name]"];
string sex = context.Request["rows[0][sex]"]; int count = ;
try
{
count = SQLHelper.ExecuteNonQuery("insert into Tb_person (name, sex) values ('" + name + "', '" + sex + "')", CommandType.Text);
if (count != )
{
context.Response.Write();
}
}
catch
{
context.Response.Write(-);
}
}
delete.ashx:
public void ProcessRequest(HttpContext context)
{
int count = ;
string deletevalue = context.Request["ids"];
try
{
count = (int)SQLHelper.ExecuteNonQuery("delete from Tb_person where id in " + deletevalue + "", CommandType.Text);
if (count > )
{
context.Response.Write(count);
}
}
catch
{
context.Response.Write(-);
}
}
update.ashx:
public void ProcessRequest(HttpContext context)
{
string id = context.Request["rows[0][id]"];
string name = context.Request["rows[0][name]"];
string sex = context.Request["rows[0][sex]"];
int count = ; try
{
count = SQLHelper.ExecuteNonQuery("update Tb_person set name = '"+name+"', sex = '"+sex+"' where id = '"+id+"'", CommandType.Text);
if (count > )
{
context.Response.Write(count);
}
}
catch
{
context.Response.Write(-);
}
}