js--easyUI----jQuery easyui datagrid 点击某个单元格即进入编辑状态，焦点移开后，保存数据

最新推荐文章于 2020-12-29 00:38:24 发布
最新推荐文章于 2020-12-29 00:38:24 发布
阅读量1w 收藏 4
点赞数
分类专栏： web前端.js
/// 最近一次使用编辑行 一切正常
///<summary>
  ///初始化数据容器
  ///</summary>
  function InitGrid(){
     var lastIndex;
     $( "#grid" ).datagrid({
         url: '' ,
         loadMsg: '数据加载中,请稍后......' ,
         border: false ,
         fitColumns: true ,
         remoteSort: false ,
         onDblClickRow: function (rowIndex,rowData){
            lastIndex=rowIndex;
            $( "#grid" ).datagrid( 'endEdit' ,rowIndex);
            $( "#grid" ).datagrid( 'beginEdit' ,rowIndex);
            var oldordering = rowData.ordering;
            $( "input.datagrid-editable-input" ).val(oldordering).bind( "blur" , function (evt){
                setOrder($( this ).val(),eval( "rowData." +actid));
                $( "#grid" ).datagrid( 'endEdit' ,lastIndex);
            }).bind( "keypress" , function (evt){
                if (evt.keyCode==13){
                    setOrder($( this ).val(),eval( "rowData." +actid));
                    $( "#grid" ).datagrid( 'endEdit' ,lastIndex);
                }
            }).focus();
            lastIndex=rowIndex;
         },
         frozenColumns:[[
                         {field: 'ck' ,checkbox: true }
                         ]],
         toolbar:[
                  {text: '刷新' ,iconCls: 'icon-reload' ,handler: function (){
                       Reload();
                  }},
                  {text: '添加' ,iconCls: 'icon-add' ,handler:add},
                  {text: '编辑' ,iconCls: 'icon-edit' ,handler:edit},
                  {text: '删除' ,iconCls: 'icon-cut' ,handler:del},
                  {text: '清选' ,iconCls: 'icon-undo' ,handler: function (){
                      $( "#grid" ).datagrid( "clearSelections" );
                  }}
                  ],
         columns:[[
                   {field:actid,title: '序号' ,width:17,align: 'center' ,sortable: true ,sorter:sortId},
                   {field: 'jobName' ,title: '招骋职位' ,width:40,align: 'center' ,sortable: true },
                   {field: 'jobKind' ,title: '类型' ,width:60,align: 'center' ,sortable: true },
                   {field: 'requireNum' ,title: '人数' ,width:12,align: 'center' ,sortable: true },
                   {field: 'email' ,title: '邮箱' ,width:34,align: 'center' ,sortable: true },
                   {field: 'ordering' ,title: '排序' ,width:10,align: 'center' ,sortable: true ,editor:{type: 'numberbox' }},
                   {field: 'lastTime' ,title: '截止时间' ,width:40,align: 'center' ,sortable: true },
                   {field: 'act' ,title: '操作' ,width:40,align: 'center' ,formatter:act}
                   ]]
     });
  }

　　

 以前使用方式

复制代码 
 ///<summary>
  ///初始化数据容器
  ///</summary>
  function InitGrid(){
     var lastIndex;
     $("#grid").datagrid({
         url:'',
         loadMsg:'数据加载中,请稍后......',
         border:false,
         fitColumns:true,
         remoteSort:false,
         //双击变有可编辑状态
         onDblClickRow:function(rowIndex,rowData){
             var oldnum = rowData.g_num;
             //if(lastIndex!=rowIndex){
                 $("#grid").datagrid('endEdit',rowIndex);
                 $("#grid").datagrid('beginEdit',rowIndex);
                 var num = rowData.g_num;
                 $("input.datagrid-editable-input").val("+");
                 $("input.datagrid-editable-input").bind("blur",function(evt){
                     var input = $(this).val()?eval($(this).val()):0;
                     var result = SetNum(input,rowData.id,oldnum);
                     var item = result.split("||");
                     $(this).val(item[1]);
                      $("#grid").datagrid('endEdit',lastIndex);
                 });
                 $("input.datagrid-editable-input").bind("keypress",function(evt){
                     if(evt.keyCode==13){
                         var input = $(this).val()?$(this).val():0;
                         var result = SetNum(input,rowData.id,oldnum);
                         var item = result.split("||");
                         $(this).val(item[1]);
                         $("#grid").datagrid('endEdit',lastIndex);
                     }
                 });
             //}
             lastIndex=rowIndex;
         },
         frozenColumns:[[
                         {field:'ck',checkbox:true}
                         ]],
         toolbar:[
                  {text:'刷新',iconCls:'icon-reload',handler:function(){
                       Reload();
                  }},
                  {text:'添加',iconCls:'icon-add',handler:add},
                  {text:'编辑',iconCls:'icon-edit',handler:edit},
                  {text:'删除',iconCls:'icon-cut',handler:del},
                  {text:'清选',iconCls:'icon-undo',handler:function(){
                      $("#grid").datagrid("clearSelections");
                  }}
                  ],
         columns:[[
                   {field:'id',title:'序号',width:40,align:'center',sortable:true,sorter:sortId},
                   {field:'g_name',title:'商品名称',width:40,align:'center',sortable:true},
                   {field:'gt_name',title:'所属类型',width:40,align:'center',sortable:true},
                   {field:'g_num',title:'库存',width:40,align:'center',sortable:true,editor:{type:'numberbox'}},
                   {field:'g_isnew',title:'是否新品',width:40,align:'center',sortable:true,formatter:function(val){
                       return val=='1'?'是':'否';
                   }},
                   {field:'g_ishot',title:'是否热品',width:40,align:'center',sortable:true,formatter:function(val){
                       return val=='1'?'是':'否';
                   }},
                   {field:'g_status',title:'状态',width:40,align:'center',sortable:true,formatter:status},
                   {field:'g_addtime',title:'添加时间',width:40,align:'center',sortable:true},
                   {field:'act',title:'操作',width:40,align:'center',formatter:act}
                   ]]
     });
  }
  
  ///<summary>
  ///Ajax获取分页数据
  ///currPage => 当前页码
  ///</summary>
  function GetData(currPage){
      var pageSize = getPageSize();// 15;
      var where=$("#where").val();
      var levels=$("#pt").val();
      $.ajax({
          url:url+'/AjaxData',
          type:'post',
          dataType:'text',
          data:'currPage='+currPage+'&pageSize='+pageSize+''+'&where='+where+'&pt='+levels,
          beforeSend:function(){
              $("#grid").datagrid("loading");
          },
          success:function(json){
              $("#grid").datagrid("loaded");
              json=decodeURIComponent(json);
              if(json.length<=20){
                  $("#grid").datagrid("loadData",{total:0,rows:[]});
                  return;
              }
              json = eval('('+json+')');
              $("#grid").datagrid("loadData",json);
              $("#currPage").val(currPage);
              $("#pageCount").val(Math.ceil(json.total/pageSize));
              $("#pageStr").html(ShortPageStr(json.total));
              ShowPageBar();
          },
          error:function(data){
              alert(data.responseText);
          }
      });
  }
  
  ///<summary>
  ///@desc 修改库存(出入库)
  ///</summary>
  function SetNum(count,id,oldnum){
      var result = 'error||'+oldnum;
      $.ajax({
          url:url+'/SetNum',
          type:'post',
          dataType:'text',
          data:'count='+count+'&sx='+id,
          async:false,
          success:function(data){
              result = data;
          },
          error:function(data){
              result='error||'+oldnum;
          }
      });
      return result;
  }
以上为转载内容，以下为自己验证代码：

function _createTable(data){
    
        //对汉字进行转码
        $.each(data.data, function(i, obj){
            var eventName = unescape(obj.eventName);
            var levelName = unescape(obj.levelName);
            obj.eventName = eventName;
            obj.levelName = levelName;
        });
        
        //数据处理
        var column = [
            {title:'ID',field:'id',width:100,align:'left'},
            {title:'级别编号',field:'levelNum',width:100,align:'left'},
            {title:'级别名称',field:'levelName',width:100,align:'left',
                formatter:function(data){
                    if(data == 'null'){
                        return "";
                    }else{
                        return data;
                    }
                },editor:{type:'text'}
            },
            {title:'活动id',field:'eventId',width:60,align:'left',rowspan:1, hidden:true},
            {title:'创建人id',field:'createUid',width:100,align:'left'},
            {title:'创建时间',field:'createDate',width:150,align:'left'}
        ];
        
        var root = listToDataGrid(data);
        var title = "头像列表";
        _getDataGrid("eventListTable", title, 'id', column).datagrid('loadData', root);
        
    }

function _getDataGrid(id, aTitle, pk, columns){
        var el = $('#' + id + '');
        if (el.data('datagridInit') !== 'finished'){
            var lastIndex;
            
            el.datagrid({
                columns:[columns],
                title:aTitle,
                width:1000,
                nowrap: false,
                idField:pk,
                rownumbers:true,
                striped:true,
                singleSelect: true,
                collapsible:true,
                sortName: 'levelNum',
                pagination:false,
                pageSize: pageSize,
                sortOrder: 'asc',
                remoteSort: false,
                idField:'id',
                rownumbers:true,
                toolbar:[{
                    id:'btnmodify',
                    text:'修改',
                    iconCls:'icon-cut',
                    handler:_showDialog(id)
                },'-',{
                    id:'btnremove',
                    text:'删除',
                    iconCls:'icon-cancel',
                    handler:_removeEvent(id)
                }],
                onDblClickCell:function(rowIndex, field, value){
                    
                    lastIndex=rowIndex;
                       $('#'+id).datagrid('endEdit',rowIndex);
                       $('#'+id).datagrid('beginEdit',rowIndex);
                       
                       var oldordering = value;
                      $("input.datagrid-editable-input").val(oldordering).bind("blur",function(evt){
                          debugger;
                              var dataArry = $('#'+id).datagrid('getSelections');
                               eventPlayer.setLevelName($(this).val(), dataArry[0].id);
                               $('#'+id).datagrid('endEdit',lastIndex);
                           }).bind("keypress",function(evt){
                               if(evt.keyCode==13){
                                   debugger;
                                   var dataArry = $('#'+id).datagrid('getSelections');
                                   eventPlayer.setLevelName($(this).val(), dataArry[0].id);
                                   $('#'+id).datagrid('endEdit',lastIndex);
                               }
                           }).focus();
                           
                       lastIndex=rowIndex;
                }
            });
            
            //注册分页查询方法
            var p = $('#' + id).datagrid('getPager');
            $pagination(p, {
                onSelectPage: function(pageNumber, pageSize1){
                    getEventPlayerDataList();
                }
            });
            
            el.data('datagridInit', 'finished');
        }
绿竹痕
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui datagrid 单元格编辑保存
TouTou0505——never stop purse dream
01-29 5127
项目中有运用到datagrid单元格编辑，要求分数和排序两列能编辑，失去焦点后保存更新的值。 //查询该试卷题型的试题 $('#allList').datagrid({ //其中allList为列表的Id url:app.approot+"paperRes/getPaperQuestionList/"+ptyid, //获取列表数据 ha
easyui 修改单元格内容_JavaScript_jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据，废话不多说了，直接给大家贴 - phpStudy...
weixin_39637179的博客
12-19 290
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据废话不多说了，直接给大家贴代码了。关键代码如下所示：/// 最近一次使用编辑行 一切正常//////初始化数据容器///function InitGrid(){var lastIndex;$("#grid").datagrid({url:'',loadMsg:'数据加载中,请稍后......',border:...
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
01-21
废话不多说了，直接给大家贴代码了。 关键代码如下所示： /// 最近一次使用编辑行 一切正常 /// ///初始化数据容器 /// function InitGrid(){ var lastIndex; $(#grid).datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblClickRow:function(rowIndex,rowData){ lastIndex=rowIndex; $(#grid
Easyui 设置datagrid 进入编辑状态,保存结束编辑
abel18444180020的博客
11-12 1750
在datagrid中如何实现让一行进入编辑状态,修改数据后,保存信息呢? 1 //点击列表变成文本框,进入可编辑状态 2 3 $(function () { 4 var doc = $(document), 5 table = $("#divReportTable"); 6 doc.on...
easyui 修改单元格内容_jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据...
weixin_39820997的博客
12-29 494
废话不多说了，直接给大家贴代码了。关键代码如下所示：/// 最近一次使用编辑行 一切正常//////初始化数据容器///function InitGrid(){var lastIndex;$("#grid").datagrid({url:'',loadMsg:'数据加载中,请稍后......',border:false,fitColumns:true,remoteSort:false,onDblC...
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
10-20
使用jQuery Easyui datagrid实现行内编辑、添加、上移和下移功能，能够极大提升数据管理的效率和用户体验。以上所述的实现方法和相关知识点，是在实际项目开发中经常需要利用到的关键技术。熟练掌握这些技术，有助于...
easyui-datagrid可编辑可过滤的DEMO
11-08
1. 单元格编辑：用户点击某个单元格时，该单元格变为可编辑状态，编辑完成后保存更改或按Esc取消。这种模式适用于需要逐个字段修改的情况。 2. 行编辑：当用户选择一行后，整行数据变为可编辑状态，所有字段都可以...
datagrid-export.zip
01-22
这个“datagrid-export.zip”文件提供了一种解决方案，使得开发者能够将EasyUI-datagrid中的数据按照其在界面上的样式，包括合并的单元格、复杂的表头、背景色和文字颜色等，方便地导出到Excel中，实现“所见即所得...
easyui的datagrid的editor为combobox的编辑框在失去焦点保存(包括普通下拉框和时间日期框)...
weixin_33786077的博客
02-22 811
2019独角兽企业重金招聘Python工程师标准>>> ...
easyui datagrid 单击编辑单元格
周振伟的博客
11-21 7404
今天遇到一个问题，想要单击datagrid的上的某个单元格，就可以编辑，实现过程如下！ 给datagrid 加上onclickCell方法，单击单元格触发，蓝色部分为给想要编辑的单元格加上 编号 客户姓名 辅导书折扣 editor:{type:'numberbox',options:{precision:2,max:1}} ">变化后折扣 累计余额
jquery datagrid 参数及使用
hery186的专栏
06-15 690
转自：http://blog.csdn.net/jiesa/article/details/46355915 数据表格 - DataGrid 内容 概况 使用方法 数据表格属性 数据列属性 编辑 数据视图 事件 方法  继承$.fn.panel.defaults，使用$.fn.datagrid.defaults重载默认值。. 数据表格显示的数据以表
JS 记录之 表单内容的切换
trouble is a friend
08-24 1656
即：根据前一列的数据内容不同，而后一列显示也不同 如果前一列数据的长度大于后一列数据的长度，则后一行正常显示 反之，后一列的数据只显示前40个字符加上“...”,当鼠标放上去显示全部内容，离开 恢复成40个字符 加“...” ·表单代码： <td id="td3" onmouseout="part(this)" onmouseover="whole(thi...
easyui datagrid实现行内编辑一列数据
时光匆匆独白 将颠沛磨成卡带
08-31 1万+
这篇文章主要想介绍一下easyui 的datagrid控件实现行内编辑的功能。 我着这里主要实现的大概功能就是：可以行内编辑人员类别的功能 一、实现的效果如下：             图1： 当我们点击【设置】的时候可以编辑人员类别,如图2 所示         图2： 从图2可以看出，我们可以人员类别下拉框中的选中我们希望设置的类别，然后保存到数据库 也可以点击取
easyui-datagrid 编辑模式详解
那些年的代码
05-31 49
一，建立编辑器 从api得知，扩展一种新的编辑器类型，需要提供以上几个方法。项目中正好需要一个checkbox 类型编辑器，但在easyui中并没提供这样的编辑器，那我们可以通过扩展编辑器来解决，扩展如下 1 $.extend($.fn.datagrid.defaults.editors, { 2 checkbox: {//调用名称 3 i...
easyui-datagrid 编辑单元格
热门推荐
03-30 2万+
在做itoo成绩的时候，有个需求是教师判分，学生成绩有两部分组成：平时成绩和期末成绩，然后根据两种成绩比例算出总成绩。现在是有了平时成绩和成绩比例，输入期末成绩，计算出总成绩，并且把输入的期末成绩和计算的总成绩更新到数据库中。主要应用了单击单元格进行编辑，编辑完成之后，失去焦点则保存数据。如果数据没有变化，失去焦点则不更新数据库。          页面效果是这样的： 期末成绩的单元格
Easyui学习笔记（一）datagrid行编辑
qq_43701801的博客
05-07 8197
一、定义datagrid <table id="grid"></table> 二、datagrid设置 重点事件： $('#grid').datagrid({ iconCls: 'icon-forward', fit: true, border: false,...
easyui实现datagrid行内编辑
dotedy的博客
10-16 4892
easyui的datagrid行内编辑对于修改信息而言比较方便直观，下面举例说明：  需求说明：  在行内编辑员工状态    一、编辑jsp  Html代码   ...                  a href="#" id="save" onclick="obj.save()" class="easyui-linkbutton" iconCls="
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值