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 相关文章推荐
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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
input file获得文件根目录简单实现
2013/04/26 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
javascript的对话框详解与参数
2007/03/08 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python将list转为matrix的方法
2018/12/12 Python
Django实现单用户登录的方法示例
2019/03/28 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
校园安全广播稿
2014/02/08 职场文书
继承公证书样本
2014/04/04 职场文书
合作经营协议书
2014/04/17 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
化工专业求职信
2014/07/01 职场文书
出生医学证明书
2014/09/15 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL