`

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即可。

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

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

    easyui datagrid 数据导出到Excel

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

    JqueryEasyUI DataGrid例子

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

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

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

    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开始。现在...

    easyui datagrid 表格 打印

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

    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,它是一个用于展示表格数据的组件。在某些场景下,用户可能希望在滚动表格时,某些重要的列(通常是标题或标识列)始终保持可见,这就是“右冻结”的...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    ### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...

    JS EasyUI DataGrid动态加载数据

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

    easyui的datagrid生成合并行,合计计算价格

    在IT行业中,EasyUI是一个基于JavaScript和jQuery的前端框架,它提供了一系列的UI组件,用于构建用户界面。在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现...

    EasyUI DataGrid过滤用法实例

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

Global site tag (gtag.js) - Google Analytics