ext可编辑grid保存，删除修改

最新推荐文章于 2018-02-26 09:21:33 发布
最新推荐文章于 2018-02-26 09:21:33 发布
阅读量1.8k 收藏
点赞数
分类专栏： 前台js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ryan1214/article/details/36188163
版权

 
最近才开始学ext，做了个小模块，留作以后类似的备用

要求

 

 

【新增】【删除】【保存】

选择

　序号

　薪资项目

　字段名

□

1

职务工资

XZ1

□

2

级别工资

XZ2

□

3

技术等级工资

XZ3

控制

序号自动生成，不可修改，满足唯一即可，保存前必须验证薪资项目和字段名都填了数据。

【新增】列表增加一行。

【删除】删除选中的薪资项，删除前提示“是否确定删除薪资项？”,删除完成后提示删除成功。

【保存】每一项都必填，否则不允许保存，保存当前页面的数据到数据库中。

最后结果效果图

代码

{

<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

 

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

<html>

  <head>

    <basehref="<%=basePath%>">

   

    <title>My JSP 'xzwh.jsp' starting page</title>

   

    <metahttp-equiv="pragma"content="no-cache">

    <metahttp-equiv="cache-control"content="no-cache">

    <metahttp-equiv="expires"content="0">   

    <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">

    <metahttp-equiv="description"content="This is my page">

  <%@include file="/frame/common/ext-js3.jsp"%>

  <styletype="text/css">

  .add {

            background-image:url(<%=basePath%>/resources/images/add.png) !important;

       }

   .remove {

            background-image:url(<%=basePath%>/resources/images/delete.gif) !important;

        }

    .save {

            background-image:url(<%=basePath%>/resources/images/save.gif) !important;

        }

  </style>

  <scripttype="text/javascript"src="<%=basePath%>ext/extjs3/ux/CheckColumn.js"></script>

   <scripttype="text/javascript">

   varstop=0;

   varedit;

   Ext.onReady(function(){

    varfm = Ext.form;

var sm = newExt.grid.CheckboxSelectionModel({ //创建checkbox列

//同时给前面每条数据的checkbox添加一个监听，只有选中一个以上的，删除按钮才会相应

        listeners: {

            selectionchange:function(sm) {

                if (sm.getCount()) {

                     grid.removeButton.enable();

                } else {

                  grid.removeButton.disable();

                }

            }

        }

    });

 

//创建解析数据源的reader格式，是arrayReader（和表头对于的name的dataIndex，和数据类型）

  varreader = newExt.data.ArrayReader({}, [

       {name: 'xuanze',type:'bool'},

       {name: 'xuhao',type:'float'},

       {name: 'xinzixiangmu', type: 'string'},

       {name: 'ziduanming', type: 'string'}

    ]);

//创建grid列字段的表头，以及对应的dataIndex和排序，还有该列是否可编辑,是否为空，长度等，顺便把checkbox列加进来

    varcm = newExt.grid.ColumnModel({

        // specify any defaults for each column

        defaults: {

            sortable:true // columns are not sortable by default          

        },

        columns: [

         sm,

         {header:"序号", width: 100, sortable:true, dataIndex:'xuhao',align:'center'},

         {header:"薪资项目", width: 250, sortable:true, dataIndex:'xinzixiangmu',align:'center',editor:new fm.TextField({allowBlank:false,maxLength:20})},

         {header:"字段名", width: 200, sortable:true, dataIndex:'ziduanming',align:'center',editor:new fm.TextField({allowBlank:false,maxLength:20})}

        ]

    });

 

    // create the Data Store 创建数据源，并把前面创建的reader加进来

    var store = newExt.data.Store({

        reader:reader

    });

   

 

 

    // create the editor grid创建最后的grid，把数据源，列，checkbox，加进来

    var grid = newExt.grid.EditorGridPanel({

        store: store,

        cm: cm,

        sm:sm,

        renderTo:'editor-grid',

        width: 600,

        height: 780,

        title:'薪资项对应关系维护',

        frame:true,

        iconCls:'icon-grid',

        clicksToEdit: 1,

        tbar: [{

            text:'新增',

            iconCls:'add',

            handler :function(){

                // access the Record constructor through the grid's store

               var Plant = grid.getStore().recordType;

                var storeObj=grid.getStore();

                var p;

                if(grid.getStore().getCount()!=0){

                 function getMaxXuhao(){

                var firstXuhao=parseInt(storeObj.getAt(0).get('xuhao'));

                var lastXuhao=parseInt(storeObj.getAt(storeObj.getCount()-1).get('xuhao'));

                if (firstXuhao>=lastXuhao){

                return firstXuhao+1;

                }else{

                 return lastXuhao+1;

                }

                }

               

                p = new Plant({  //设置新增一列的类型

                    xuanze: false,

                    xuhao:getMaxXuhao()//应该获取序列的最大值+1

                });

                }else{

                p = new Plant({

                    xuanze: false,

                    xuhao:1     //此序号得程序自动生成,为主键，不重复

                });

               

                }

              

               

                grid.stopEditing();

                store.insert(0, p);  //插入到第一行

                grid.startEditing(0, 2); //是第一行的第二列可编辑

            }

        },'-',

        {

            text:'删除',

            iconCls:'remove',

            ref:'../removeButton',

            disabled:true,

            handler :function(){

             vars = grid.getSelectionModel().getSelections();

             Ext.MessageBox.confirm('确认框','是否确定删除薪资项?',function(){

            afterDelete(s,store,sm);

             });

            }

        },'-',

       {

            text:'保存',

            iconCls:'save',

            handler :function(){

           varjsonArray=[]; 

          store.each(function(record){

          if(Ext.util.Format.trim(record.get("xinzixiangmu"))!='undefined'&&Ext.util.Format.trim(record.get("xinzixiangmu"))!=''&&Ext.util.Format.trim(record.get("ziduanming"))!='undefined'&&Ext.util.Format.trim(record.get("ziduanming"))!=''){ 

            jsonArray.push(record.data); 

               }else{

              stop=1;

              return false;

               }

                           

           }); 

           if(stop==1){

           //某行的薪资项目或者字段名为空

            Ext.Msg.alert('','薪资项目或字段名称不能为空',function(){

            });

          

             return false;

           }

           varresultJson=Ext.util.JSON.encode(jsonArray);

          Ext.Ajax.request({

              url: '<%=basePath%>webapp/gztgl/xzwh/GztglServlet',//动态页地址

              params: {data:resultJson,status:'save'},//键值对形式

               success:function(response){

              if(response.responseText){

               Ext.Msg.alert('','保存成功',function(){

               showResult(store,sm);

               });

               }else{

                 Ext.Msg.alert('','保存失败');

               }

            }

         });

      }

           

    }]

   });

   查询ajax

   showResult(store,sm);

 

});

 

     functionafterDelete(s,store,sm){

       varxuhaoStr="";

         for(vari = 0, r; r = s[i]; i++){//拼接选中数据的主键去数据库中删除

          xuhaoStr=xuhaoStr+r.data.xuhao+",";

         }

         xuhaoStr = xuhaoStr.substring(0, xuhaoStr.lastIndexOf(','));

          Ext.Ajax.request({

              url: '<%=basePath%>webapp/gztgl/xzwh/GztglServlet',//动态页地址

              params: {xuhaostr:xuhaoStr,status:'delete'},//键值对形式

               success:function(response){

              if(response.responseText){

                   //请求删除成功

             Ext.Msg.alert('','删除成功',function(){

               showResult(store,sm);

               });

               }else{

                   //请求删除失败

             Ext.Msg.alert('','删除失败',function(){

               showResult(store,sm);

               });

              

               }

              

            }

         });

    

     }

 

    functionshowResult(store,sm){

       //刚进页面调用查询

       //保存成功后，调用查询

        Ext.Ajax.request({

                     url:'<%=basePath%>webapp/gztgl/xzwh/GztglServlet',//动态页地址

                     params: {status:'query'},//键值对形式

                      success: function(response){

                      var result=eval('(' + response.responseText +')');

                      var storeArray=[];

                      for (vari=0;i<result.length;i++){

                      var array=[];

                      array.push(sm);

                      array.push(result[i].xh);

                      array.push(result[i].zw);

                      array.push(result[i].zd);

                      storeArray.push(array); 

                      }

                     // var sss=[[sm,99,"基本离退休费","XZ1"],[sm,100,"生活补贴","XZ2"],[sm,98,"交通费","XZ3"]];

                      store.loadData(storeArray);//加载数据

                   }

                });

       }

   </script>

  </head>

  <body>

  <h1></h1>

    <divid="editor-grid"></div>

  </body>

</html>

 

 

ryan1214
关注
专栏目录
第12章[12.2] Ext JS可编辑列Grid的全场景开发
oscar999的专栏
08-09 458
基本功能描述与实现 在Grid中，对一列或某几列批量编辑。编辑效果如下图： 功能实现的思路如下： 可编辑的列使用 widgetcolumn 类型。调用Grid的reconfigure()方法，重新生成新列的Grid。 widgetcolumn列的widget属性用来配置编辑组件的类型，比如文本输入框、日期输入或是下拉单。 编辑组件中输入的值使用 bind方式与原Store绑定(bind)，也就是store的记录的值会显示在编辑组件中，编辑组件发生修改时会同步更新Store，这样的好处是获取修改的部分很简
ext 不能修改 输入框_ExtJs使得某一列不能编辑
weixin_39969006的博客
12-19 266
可以编辑的gridvar grid = new Ext.grid.EditorGridPanel({autoHeight: true,renderTo: 'grid',store: store,cm: cm,tbar: new Ext.Toolbar(['-', {text: '添加一行',handler: function(){var initValue = {id:'',name:'',des...
extjs学习笔记（六--2) grid中数据的保存，添加和删除
iteye_3928的博客
12-21 216
149                failure: function(response) {150                    Ext.Msg.alert("警告", "数据更新失败，请稍后再试！");151                }152            });153        }154        else {155            Ext.Msg.al...
extjs 之Ext.data.Store[Grid]操作(增删)
测试开发这些事
07-05 318
Ext.data.Store是extjs的数据结构。 主要用于extjs的grid和combobox等控件的数据加载和操作。实际上对grid的增删改可以通过对store的操作来控制. 例子：对grid的增删操作 A.增加一条记录 1. 首先需要定义每条record的结构，这点很重要，方便后面对记录的操作。也是很好的编程习惯 machine_record = Ext.data.Record.cre...
extgridpanel编辑保存数据
yuanyuan_186的专栏
12-18 662
点击“添加”时通过ajax提交保存至数据库，然后gird.store.load一下就可以了，我这给你一个鼠标点击1次grid的一行就进入编辑状态，光标离开就可以保存的实例。 var grid_panel = Ext.create("Ext.grid.Panel",{   id:"treeGrid",       autoWidth:true,         height:317,
EXT保存编辑的表格
梦一笑轩
12-30 677
Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([{ header: '编号', dataIndex: 'id', editor: new Ext.grid.GridEditor( new Ext.form.TextField({
Ext Js 3.2 EditorGridPanel 加入一行后进行保存并进行数据验证
张波的技术积累
11-10 4861
1：代码 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> gridPanel
使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能
10-16
本文将详细介绍如何使用Ext的Grid、Form和Dialog组件来实现分页列表、创建、修改和删除功能。 1. **Ext Grid组件**：Grid是Ext的核心组件之一，用于展示数据列表。它可以轻松地实现数据的分页、排序、过滤等功能。...
封装Ext.grid.Grid+dwr实现增删该查
12-01
`Ext.grid.Grid`是Ext JS库中的一个组件，用于创建可交互的数据网格，而DWR（Direct Web Remoting）则是一种允许JavaScript和Java在浏览器端进行安全、高效通信的技术。本篇文章将深入探讨如何利用这两者结合，实现...
Extjs4学习笔记(四)------可编辑表格
yfcaone
03-19 827
Extjs4
EXt 可以编辑的grid
09-30
自己写的editpanel 实例。简单实现grid可以 动态的修改。有需要的朋友。可以参考参考。
ExtJs4 将Grid的状态保存到服务器端
大新博客
02-09 416
[code="java"]Ext.define("Ext.state.DBProvider", { extend: "Ext.state.Provider", constructor: function() { var me = this; me.callParent(arguments); //将数据库中的状态信息读出来 ...
Extjs二维数组,控制editorgrid动态添加行,批量保存
边走边爱的专栏
03-26 6875
今天按照设计文档 用extjs做了个页面 看起来很丑，但是功能还是挺全的（比如，动态的添加行，联动grid，批量保存）,由于数据表结构并未出来，所以做得并不完善，但是主要的核心代码已经出来了，日后必定补全，之所以今天写下来 只是为了提醒自己一个困扰多时的问题，一个二维数组用alert输出来 是一个多个一维数组里的元素连接起来的，看起来是个一维数组，但实际上不是，不要被你的眼睛蒙蔽了 一
extjs学习笔记（六) grid中数据的保存，添加和删除
热门推荐
niuyongjie的专栏
11-01 1万+
本文转载自http://www.cnblogs.com/yage/archive/2009/10/30/1591785.html在上一个系列当中，我们学习了如何对grid中的内容进行编辑，但是编辑的结果我们并没有保存，这在实际的应用中是没有什么意义的。在有些情况下，除了编辑之外，还要通过grid进行数据的增加和删除，这两个操作也涉及到对于数据的保存。在这个系列里边，我们将学习如何保存数据以及通
ExtJs学习
shmily2038的专栏
04-27 488
  在上一个系列当中，我们学习了如何对grid中的内容进行编辑，但是编辑的结果我们并没有保存，这在实际的应用中是没有什么意义的。在有些情况下，除了编辑之外，还要通过grid进行数据的增加和删除，这两个操作也涉及到对于数据的保存。在这个系列里边，我们将学习如何保存数据以及通过grid对数据进行增加和删除。    我们在前边的学习过程中已经知道，grid其实只是显示数据，它通过配置参数store来
extjs学习笔记（六--3) grid中数据的保存，添加和删除
iteye_3928的博客
12-21 212
 我们先通过grid的getSelectionModel方法获得当前的选择模型，由于当前我们使用了行选择模型，所以返回的是RowSelectionModel的对象，然后通过该对象的hasSelection方法判断有没有行呗选中，没有的话就弹出一个对话框，如果有选中的行要被删除，弹出一个提示框让用户确定删除操作，如果确实要删除，使用RowSelectionModel对象的getSelections方...
ExtJs6.0之Grid前端导出Excel
飞鸟的轨迹
02-26 2143
该js文件支持三级表头的导出。 引入该js文件，调用grid2Excel(grid, fileName)即可。 新建导出按钮 new Ext.create('Ext.button.Button',{ xtype:'button', iconCls:'excel', type: 'excel', text:'保存为Excel', han...
extjs的EditorGridPanel修改数据后怎样保存到数据库
soul的技术杂记
07-10 6840
extjs的EditorGridPanel并不难,我想很多人都可以写出来,但是对于修改数据后怎样保存到数据库我想还是有好多人不太明白,下面我关于这一点就我个人的见解说一下,这里首先的配置好可以修改的列var colM = new Ext.grid.ColumnModel([{ h
使用Ext.js创建可编辑表格
4. **Ext.grid.ColumnModel**: 定义表格的列模型，包括列的标题（header）、数据索引（dataIndex）、宽度（width）和其他属性，如是否可编辑。 5. **Ext.grid.CheckColumn**: 创建一个只包含复选框的列，常用于布尔...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值