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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
全面了解js中的script标签
Jul 04 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
写一个Vue Popup组件
Feb 25 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
详解vue组件之间的通信
Aug 30 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中显示数组与对象的实现代码
2011/04/18 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
详解JavaScript的变量
2019/04/04 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vue接口请求加密实例
2020/08/11 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python中按值来获取指定的键
2019/03/04 Python
Python 函数返回值的示例代码
2019/03/11 Python
详解Python文件修改的两种方式
2019/08/22 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
python 如何调用远程接口
2020/09/11 Python
用python写PDF转换器的实现
2020/10/29 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
正规借条模板
2015/05/26 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js
Redis 限流器
2022/05/15 Redis