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向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
前端jquery部分很精彩
May 03 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
js初始化验证实例详解
Nov 26 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
js实现秒表计时器
Dec 16 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
js中有关IE版本检测
2012/01/04 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
JS实现鼠标移动拖尾
2020/12/27 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
详解python的数字类型变量与其方法
2016/11/20 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python os库常用操作代码汇总
2020/11/03 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
制药工程专业应届生求职信
2013/09/24 职场文书
小学教师的个人自我鉴定
2013/10/26 职场文书
转预备党员政审材料
2014/02/06 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
靠谱准确的求职信
2019/04/02 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server