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的分页控件(C#)
Jan 06 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
js实现批量删除功能
Aug 27 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
详解JS ES6编码规范
May 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
python定时执行指定函数的方法
2015/05/27 Python
Python类属性的延迟计算
2016/10/22 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
大四本科生的自我评价
2013/12/30 职场文书
外国人聘用意向书
2014/04/01 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
公司开业致辞
2015/07/29 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技