`

jquery easyui datagrid的增加,修改,删除

阅读更多

 

<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>  
分享到:
评论

相关推荐

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    jquery easyui datagrid性能优化

    jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。

    JqueryEasyUI DataGrid例子

    综上所述,这个 JqueryEasyUI DataGrid 示例展示了如何使用前端框架与后端服务器配合,实现一个功能完备的表格应用。在实际开发中,开发者可以根据需求调整 DataGrid 的配置项,以及后台 Servlet 的逻辑,以适应各种...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    jquery easyui datagrid实现增加,修改,删除方法总结

    主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下

    easyui datagrid 增加鼠标悬停弹窗事件

    由于EasyUI Datagrid的默认行为不包括鼠标悬停弹窗,我们需要通过修改源码或者扩展实现来添加这个功能。在描述中提到的方法是直接修改了源码,这可能涉及到对EasyUI内部机制的理解,以及对源码的调试和测试。 4. *...

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    jquery easyui datagrid demo 详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列丰富的组件,使得开发者可以轻松构建用户界面,而 Datagrid 是其中非常重要的一个组件,常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...

    jquery easyui datagrid 教程

    jQuery EasyUI Datagrid 是一个基于 jQuery 和 EasyUI 框架的数据网格组件,它提供了丰富的数据展示和操作功能,常用于构建数据密集型的Web应用。这个教程将深入讲解其核心概念、用法以及常见应用。 一、jQuery ...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...

    jQuery easyUI datagrid 增加求和统计行的实现代码

    在datagrid的onLoadSuccess事件增加代码处理。 &lt;style type=text/css&gt; .subtotal { font-weight: bold; }/*合计单元格样式*/ &lt;/style&gt; [removed] function onLoadSuccess() { //添加“合计”列 $...

    easyui datagrid 动态隐藏显示列

    jquery easyui 扩展 datagrid 自定义动态隐藏显示列

    easyui datagrid 右冻结

    EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的组件。在某些场景下,用户可能希望在滚动表格时,某些重要的列(通常是标题或标识列)始终保持可见,这就是“右冻结”的...

    jQuery EasyUI v1.10.0.zip

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,用于快速构建用户界面。v1.10.0 是这个框架的一个特定版本,包含了一系列组件和功能,适用于网页应用的开发。在这个zip压缩包中,我们可以找到一系列文件,每个都...

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    EasyUI DataGrid过滤用法实例

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件,包括表格(DataGrid)等,使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid ...

    jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    jQuery Easyui DataGrid 是一个基于 jQuery 的用户界面插件,它提供了一种简单的方式来展示和编辑表格数据。DataGrid 组件支持分页、排序、搜索、和可编辑等功能。本文介绍了如何在 jQuery Easyui DataGrid 中实现...

Global site tag (gtag.js) - Google Analytics