jquery easyui datagrid实现增加,修改,删除方法总结


Posted in Javascript onMay 25, 2016

本文实例讲述了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({
        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="#" 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,没有用到的话可以去掉

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

Javascript 相关文章推荐
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
JavaScript中操作字符串小结
May 04 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue路由--网站导航功能详解
Mar 29 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 #Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 #Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 #Javascript
js提交form表单,并传递参数的实现方法
May 25 #Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 #Javascript
动态设置form表单的action属性的值的简单方法
May 25 #Javascript
You might like
PHP 加密与解密的斗争
2009/04/17 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
详解jQuery选择器
2016/12/21 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
简单了解JavaScript异步
2019/05/23 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python截图并保存的具体实例
2021/01/14 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
2014年元旦促销活动方案
2014/02/22 职场文书
数学检讨书1000字
2014/02/24 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
配置nginx负载均衡
2022/05/06 Servers