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

    技术2022-05-19  20

    截图:

     

    页面:

    view plaincopy to clipboardprint?01.<body>  02.    <form id="form1" runat="server">  03.    <table id="tt">  04.           05.    </table>  06.       07.     08.    </form>  09.</body>  <body>    <form id="form1" runat="server">    <table id="tt">            </table>          </form></body>

    引用的JS:

     view plaincopy to clipboardprint?01.<link rel="stylesheet" type="text/css" href="../../script/themes/default/easyui.css" />   02.    <link rel="stylesheet" type="text/css" href="../../script/themes/icon.css" />   03.    <script type="text/javascript" src="../../script/jquery-1.4.2.min.js" </script>   04.    <script type="text/javascript" src="../../script/jquery.easyui.min.js" </script>   05.    <script type="text/javascript" src="../../script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js"></script>   <link rel="stylesheet" type="text/css" href="../../script/themes/default/easyui.css" />    <link rel="stylesheet" type="text/css" href="../../script/themes/icon.css" />    <script type="text/javascript" src="../../script/jquery-1.4.2.min.js" </script>    <script type="text/javascript" src="../../script/jquery.easyui.min.js" </script>    <script type="text/javascript" src="../../script/locale/easyui-lang-zh_CN.js" mce_src="script/locale/easyui-lang-zh_CN.js"></script> 

    JS:

    view plaincopy to clipboardprint?01.<script type="text/javascript"><!--   02.        $(function(){   03.            $('#tt').datagrid({   04.                width:810,   05.                height:400,   06.                idField:'xsbh',   07.                url:'studentHandler.ashx',   08.                singleSelect:true,   09.                columns:[[   10.                   {field:'xsbh',title:'编号',width:80},   11.                  {field:'UserName',title:'姓名',width:100},   12.                  {field:'Sex',title:'性别',width:30},   13.                  {field:'SchoolYear',title:'年份',width:50},   14.                  {field:'opt',title:'操作',width:100,align:'center',   15.                    formatter:function(value,rec,index){   16.                        var s = '<a href="#" mce_href="#" οnclick="view(/''+ rec.xsbh + '/')">查看</a> ';   17.                        var e = '<a href="#" mce_href="#" οnclick="edit(/''+ rec.xsbh + '/')">编辑</a> ';   18.                        var d = '<a href="#" mce_href="#" οnclick="del(/''+ index +'/')">删除</a> ';   19.                        return s+e+d;   20.                    }   21.                  }   22.                ]],   23.                toolbar:[{   24.                    text:'增加',iconCls:'icon-add',handler:function(){   25.                        window.location.href='StuAdd.aspx';   26.                    }   27.                },   28.                {text:'导入',iconCls:'icon-add',handler:function(){   29.                    window.location.href='StuImport.aspx'  30.                    }   31.                },   32.                {text:'查找',iconCls:'icon-search'}   33.                ],   34.               pagination:true  35.            });   36.        })   37.           38.          function view(bh)  //转到查看页面   39.            {   40.                window.location.href='StuView.aspx?id='+bh+'&page=stu';   41.//              var row = $('#tt').datagrid('getSelected');   42.//               if(row)   43.//               {   44.//                  alert(row.xsbh);   45.//               }   46.            }   47.          function edit(bh)  //转到编辑页面   48.          {   49.                window.location.href='StuEdit.aspx?id='+bh;   50.          }   51.             52.          function del(index){  //删除操作   53.            $.messager.confirm('确认','确认删除?',function(row){   54.                if(row){   55.                    var selectedRow = $('#tt').datagrid('getSelected');  //获取选中行   56.                    $.ajax({   57.                        url:'delHandler.ashx?id='+selectedRow.xsbh+'&type=stu',     58.//加了个type,作用是以后不管什么删除,都可以转到这个ashx中处理   59.                        success:function(){alert('删除成功');}   60.                    });   61.                    $('#tt').datagrid('deleteRow',index);   62.                }   63.            })   64.          }   65.       66.// --></script>  <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?01.using System;   02.using System.Web;   03.using System.Data;   04.using System.Text;   05.  06.public class studentHandler : IHttpHandler {   07.       08.    public void ProcessRequest (HttpContext context) {   09.        context.Response.ContentType = "text/plain";   10.        DataSet ds = new DataSet();   11.        //点击datagrid的分页按钮,自动向后台发送2个参数,rows和page,代表每页记录数和页索引   12.        int row = int.Parse(context.Request["rows"].ToString());   13.        int page = int.Parse(context.Request["page"].ToString());   14.        ds = GetContent(row, page);   15.        string text =json.Dataset2Json(ds);   16.        context.Response.Write(text);   17.    }   18.  19.    private DataSet GetContent(int pagesize,int pageindex)   20.    {   21.        Graduate.BLL.Student bll = new Graduate.BLL.Student();   22.        return bll.GetList(pagesize, pageindex);   23.    }   24.    public bool IsReusable {   25.        get {   26.            return false;   27.        }   28.    }   29.  30.}  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

    view plaincopy to clipboardprint?01.using System;   02.using System.Web;   03.using System.Web.SessionState;   04.  05.public class delHandler : IHttpHandler,IRequiresSessionState {   06.       07.    public void ProcessRequest (HttpContext context) {   08.        context.Response.ContentType = "text/plain";   09.        string id = context.Request["id"].ToString();   10.        string type = context.Request["type"].ToString();   11.        switch (type)   12.        {    13.            case "stu":   14.                Graduate.BLL.Student stubll = new Graduate.BLL.Student();   15.                stubll.Delete(id, HttpContext.Current.Session["username"].ToString(), HttpContext.Current.Session["usertype"].ToString());   16.                break;   17.            default:   18.                break;   19.        }   20.    }   21.  22.    public bool IsReusable {   23.        get {   24.            return false;   25.        }   26.    }   27.  28.}  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,没有用到的话可以去掉

     

    本文来自博客,转载请标明出处:http://blog.csdn.net/l277759183/archive/2010/12/01/6048120.aspx


    最新回复(0)