本文实例讲述了jquery easyui datagrid实现增加，修改，删除的方法。分享给大家供大家参考，具体如下：

页面:

引用的JS:

JS:

$(function(){

$('#tt').datagrid({

width:810,

height:400,

idField:'xsbh',

url:'studentHandler.ashx',

singleSelect:true,

columns:[[

{field:'xsbh',title:'编号',width:80},

{field:'UserName',title:'姓名',width:100},

{field:'Sex',title:'性别',width:30},

{field:'SchoolYear',title:'年份',width:50},

{field:'opt',title:'操作',width:100,align:'center',

formatter:function(value,rec,index){

var s = '查看 ';

var e = '编辑 ';

var d = '删除 ';

return s+e+d;

}

}

]],

toolbar:[{

text:'增加',iconCls:'icon-add',handler:function(){

window.location.href='StuAdd.aspx';

}

},

{text:'导入',iconCls:'icon-add',handler:function(){

window.location.href='StuImport.aspx'

}

},

{text:'查找',iconCls:'icon-search'}

],

pagination:true

});

})

function view(bh) //转到查看页面

{

window.location.href='StuView.aspx?id='+bh+'&page=stu';

// var row = $('#tt').datagrid('getSelected');

// if(row)

// {

// alert(row.xsbh);

// }

}

function edit(bh) //转到编辑页面

{

window.location.href='StuEdit.aspx?id='+bh;

}

function del(index){ //删除操作

$.messager.confirm('确认','确认删除?',function(row){

if(row){

var selectedRow = $('#tt').datagrid('getSelected'); //获取选中行

$.ajax({

url:'delHandler.ashx?id='+selectedRow.xsbh+'&type=stu',

//加了个type，作用是以后不管什么删除，都可以转到这个ashx中处理

success:function(){alert('删除成功');}

});

$('#tt').datagrid('deleteRow',index);

}

})

}

// -->

这里面要注意的是，"操作"的跨行，一定要带上field:'opt',当然，field可以是任何值，这个值不用从数据库中绑定，随便取.如果没有field的话，会弹出 "rowspan为空或不是对象"的错误

获取数据和分页ashx:

using System;

using System.Web;

using System.Data;

using System.Text;

public class studentHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

DataSet ds = new DataSet();

//点击datagrid的分页按钮，自动向后台发送2个参数,rows和page，代表每页记录数和页索引

int row = int.Parse(context.Request["rows"].ToString());

int page = int.Parse(context.Request["page"].ToString());

ds = GetContent(row, page);

string text =json.Dataset2Json(ds);

context.Response.Write(text);

}

private DataSet GetContent(int pagesize,int pageindex)

{

Graduate.BLL.Student bll = new Graduate.BLL.Student();

return bll.GetList(pagesize, pageindex);

}

public bool IsReusable {

get {

return false;

}

}

}

删除ashx

using System;

using System.Web;

using System.Web.SessionState;

public class delHandler : IHttpHandler,IRequiresSessionState {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

string id = context.Request["id"].ToString();

string type = context.Request["type"].ToString();

switch (type)

{

case "stu":

Graduate.BLL.Student stubll = new Graduate.BLL.Student();

stubll.Delete(id, HttpContext.Current.Session["username"].ToString(), HttpContext.Current.Session["usertype"].ToString());

break;

default:

break;

}

}

public bool IsReusable {

get {

return false;

}

}

}

IRequiresSessionState 是因为用到了服务器端的session，没有用到的话可以去掉

希望本文所述对大家jQuery程序设计有所帮助。