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

来源:互联网 发布:程序员真的那么累吗 编辑:程序博客网 时间:2024/05/17 11:36
/// 最近一次使用编辑行 一切正常
///<summary>
 ///初始化数据容器
 ///</summary>
 functionInitGrid(){
    varlastIndex;
    $("#grid").datagrid({
        url:'',
        loadMsg:'数据加载中,请稍后......',
        border:false,
        fitColumns:true,
        remoteSort:false,
        onDblClickRow:function(rowIndex,rowData){
           lastIndex=rowIndex;
           $("#grid").datagrid('endEdit',rowIndex);
           $("#grid").datagrid('beginEdit',rowIndex);
           varoldordering = 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');
        }
原创粉丝点击