zoukankan      html  css  js  c++  java
  • jquery easyui datagrid的增加,修改,删除

    截图:

    页面:

    <body>
        <form id="form1" runat="server">
        <table id="tt">
            
        </table>
        
      
        </form>
    </body>

    引用的JS:

    <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:

    <script type="text/javascript"><!--
            $(function(){
                $('#tt').datagrid({
                    810,
                    height:400,
                    idField:'xsbh',
                    url:'studentHandler.ashx',
                    singleSelect:true,
                    columns:[[
                       {field:'xsbh',title:'编号',80},
                      {field:'UserName',title:'姓名',100},
                      {field:'Sex',title:'性别',30},
                      {field:'SchoolYear',title:'年份',50},
                      {field:'opt',title:'操作',100,align:'center',
                        formatter:function(value,rec,index){
                            var s = '<a href="#" mce_href="#" onclick="view(/''+ rec.xsbh + '/')">查看</a> ';
                            var e = '<a href="#" mce_href="#" onclick="edit(/''+ rec.xsbh + '/')">编辑</a> ';
                            var d = '<a href="#" mce_href="#" onclick="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:

    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,没有用到的话可以去掉

  • 相关阅读:
    第36课 经典问题解析三
    第35课 函数对象分析
    67. Add Binary
    66. Plus One
    58. Length of Last Word
    53. Maximum Subarray
    38. Count and Say
    35. Search Insert Position
    28. Implement strStr()
    27. Remove Element
  • 原文地址:https://www.cnblogs.com/jordan2009/p/3100209.html
Copyright © 2011-2022 走看看