jquery easyui datagrid的增加,修改,删除

截图:

页面:

  

view plaincopy to clipboardprint?

<body>  

    <form id="form1" runat="server">  

    <table id="tt">  

           

    </table>  

       

     

    </form>  

</body>  

 

引用的JS:

 

view plaincopy to clipboardprint?

<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/default/easyui.css" />  

    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/icon.css" />  

    <script type="text/javascript" src="http://www.cnblogs.com/script/jquery-1.4.2.min.js" </script>  

    <script type="text/javascript" src="http://www.cnblogs.com/script/jquery.easyui.min.js" </script>  

    <script type="text/javascript" src="http://www.cnblogs.com/script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js"></script>   

  

JS:

  

view plaincopy to clipboardprint?

<script type="text/javascript"><!--  

        $(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 = '<a href="#" mce_href="#" οnclick="view(\''+ rec.xsbh + '\')">查看</a> ';  

                        var e = '<a href="#" mce_href="#" οnclick="edit(\''+ rec.xsbh + '\')">编辑</a> ';  

                        var d = '<a href="#" mce_href="#" οnclick="del(\''+ index +'\')">删除</a> ';  

                        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);  

                }  

            })  

          }  

       

// --></script>  

  

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

获取数据和分页ashx:

  

view plaincopy to clipboardprint?

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个参数,rowspage,代表每页记录数和页索引  

        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

  

view plaincopy to clipboardprint?

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;  

        }  

    }  

   

}  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值