zoukankan      html  css  js  c++  java

  • jquery easyui datagrid的增加，修改，删除 dodo

    截图:

    页面:

    view plaincopy to clipboardprint?
    1. <body>  
    2.     <form id="form1" runat="server">  
    3.     <table id="tt">  
    4.           
    5.     </table>  
    6.       
    7.     
    8.     </form>  
    9. </body>  

    引用的JS:

    view plaincopy to clipboardprint?
    1. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/default/easyui.css" />  
    2.     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/script/themes/icon.css" />  
    3.     <script type="text/javascript" src="http://www.cnblogs.com/script/jquery-1.4.2.min.js" </script>  
    4.     <script type="text/javascript" src="http://www.cnblogs.com/script/jquery.easyui.min.js" </script>  
    5.     <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?
    1. <script type="text/javascript"><!--  
    2.         $(function(){  
    3.             $('#tt').datagrid({  
    4.                 810,  
    5.                 height:400,  
    6.                 idField:'xsbh',  
    7.                 url:'studentHandler.ashx',  
    8.                 singleSelect:true,  
    9.                 columns:[[  
    10.                    {field:'xsbh',title:'编号',80},  
    11.                   {field:'UserName',title:'姓名',100},  
    12.                   {field:'Sex',title:'性别',30},  
    13.                   {field:'SchoolYear',title:'年份',50},  
    14.                   {field:'opt',title:'操作',100,align:'center',  
    15.                     formatter:function(value,rec,index){  
    16.                         var s = '<a href="#" mce_href="#" onclick="view(\''+ rec.xsbh + '\')">查看</a> ';  
    17.                         var e = '<a href="#" mce_href="#" onclick="edit(\''+ rec.xsbh + '\')">编辑</a> ';  
    18.                         var d = '<a href="#" mce_href="#" onclick="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>  

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

    获取数据和分页ashx:

    view plaincopy to clipboardprint?
    1. using System;  
    2. using System.Web;  
    3. using System.Data;  
    4. using System.Text;  
    5.   
    6. public class studentHandler : IHttpHandler {  
    7.       
    8.     public void ProcessRequest (HttpContext context) {  
    9.         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. }  

    删除ashx

    view plaincopy to clipboardprint?
    1. using System;  
    2. using System.Web;  
    3. using System.Web.SessionState;  
    4.   
    5. public class delHandler : IHttpHandler,IRequiresSessionState {  
    6.       
    7.     public void ProcessRequest (HttpContext context) {  
    8.         context.Response.ContentType = "text/plain";  
    9.         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. }  

    IRequiresSessionState 是因为用到了服务器端的session，没有用到的话可以去掉
  • 相关阅读:
    新能源汽车三大核心技术
    新能源汽车分类解读
    hadoop(四):配置参数
    HDP2.4安装(六)：小结与回顾
    【Web】Nginx配置开机启动
    【Linux】ODBC安装
    【Erlang】源码安装
    【Linux】 Ncures库的介绍与安装
    【RabbitMQ】 RabbitMQ安装
    《MinDoc 接口文档在线管理系统》
  • 原文地址：https://www.cnblogs.com/zgqys1980/p/1913076.html
Copyright © 2011-2022 走看看