jquery easyui datagrid实现增加，修改，删除方法总结
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct
-
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC
-
jQuery EasyUI学习教程之datagrid点击列表头排序
这个示例展示如何排序datagrid通过点击列表头. 在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php&q
-
jQuery Easyui datagrid连续发送两次请求问题
XXXXXX.datagrid({ url: "${pageContext.request.contextPath}/xx/xx/xx, }); 用上述方式动态加载datagrid的数据时,通过net监听,发现调用了两遍XX方法,目前的解决方案是,将url放到datagrid初始化的时候执行. $('#XXXX').datagrid({ fit: true, fitColumns: false, border: false, pagination: false, idField: 'id', s
-
详解EasyUi控件中的Datagrid
最近手头有个web项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点,该项目中有个需求,需要在数据列表中直接编辑数据保存,行话叫做行内编辑. 在讲行内编辑之前,我们需要先了解如何使用EasyUi创建一个DataGrid,当然方式有很多(1.easyui.js,或者直接html代码加easyui的Style),我采用的是JS的方式: 一.使用Js创建DataGrid 上面是效果图, Html代码如下:在页面定义一个table <!--数据展示 -
-
jquery Easyui Datagrid实现批量操作（编辑，删除，添加）
有时候我们的后台系统表单比较复杂,做过进销存或者一些销售订单的都应该有过感觉. 虽然Easyui Datagrid提供了行内编辑,但是不够灵活,但是我们稍微修改一下来达到批量编辑,批量删除,批量添加的效果. 现在我们来看看原的编辑:来自Easyui 1.5.1的Demo <demo/datagrid/rowediting.html> 接下来,我们主要是要高度自由的编辑实现: 1.可以同时追加多行 2.追加的行可以是任何位置 3.可以随时进行编辑任意位置的行 4.保存再统一验证 实现 在原有的r
-
jQuery EasyUI编辑DataGrid用combobox实现多级联动
我在项目中设计课程表的时候需要用到老师和分类之间的多级联动. 首先是一张效果图: 下面是实现的代码: <body> <script type="text/javascript"> $(function(){ var editing ; //判断用户是否处于编辑状态 var flag ; //判断新增和修改方法 $('#set_schedule').datagrid({ idField:'id' , fitColumns: false , url:'schedul
-
jQuery easyUI datagrid 增加求和统计行的实现代码
在datagrid的onLoadSuccess事件增加代码处理. <style type="text/css"> .subtotal { font-weight: bold; }/*合计单元格样式*/ </style> <script type="text/javascript"> function onLoadSuccess() { //添加"合计"列 $('#table').datagrid('append
-
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
在使用easyui datagrid途中发现加载数据的效率真的不是一般的差.经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受. 笔者只好百度,google解决方法,发现一篇文章说改 //1.3.3版本是这样的,其它版本也是这句代码 $(_1e0).html(_1e4.join("")); 改为: $(_1e0)[0].
-
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
基础DOM结构 什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- da
-
简介EasyUI datagrid editor combogrid搜索框的实现
首先需要datagrid editor对combogrid的扩展,这个是别人实现的: $.extend($.fn.datagrid.defaults.editors, { combogrid: { init: function (container, options) { var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); in