关于datagrid编辑用户的窗口数据回显技术

原创 2018年04月15日 17:08:56

1_

功能描述:

    选中用户,点击编辑时,打开一个用户的编辑窗口,并回显所选用户的相关数据.

2_

图文 ---增强上述功能说明:


点击编辑后的回显窗口界面如下():


日期格式转换异常,导致备注无回显.

3_

代码实现:

        //   工具栏

        var toolbar = [{

    text:'新增',
    iconCls: 略...........,
    handler:function(){
    略................
    }
},{
    text:'编辑',
    iconCls:'icon-edit',   // 没有可删掉
    handler:function(){
    // 限制只能选中一行数据进行编辑
    var ids = getSelectionsIds();
    if(ids == ""){
    $.messager.alert('提示','必须选中一行进行编辑!!');
    return;
    }
   
    if(ids.indexOf(",") >= 0){
    $.messager.alert('提示','只能选中一行进行编辑!!');
    return;
    };
    // 获取选中行的用户数据

        var row = $("#userList").datagrid('getSelected');

                // 解决日期转换异常,需要写一个js的转换方法.

    row.birthday = new Date(row.birthday).format("yyyy-MM-dd");
    // 打开窗口
        $('#userEdit').window({
        onLoad:function(){
        // 加载数据(editForm为userEdit窗口中的表单id)
        $('#editForm').form('load', row);  
        }
        }).window('open');
   
    }
}];

js内代码如下:

Date.prototype.format = function(format){ 
    var o =  { 
    "M+" : this.getMonth()+1, //month 
    "d+" : this.getDate(), //day 
    "h+" : this.getHours(), //hour 
    "m+" : this.getMinutes(), //minute 
    "s+" : this.getSeconds(), //second 
    "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
    "S" : this.getMilliseconds() //millisecond 
    };
    if(/(y+)/.test(format)){ 
    format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
    for(var k in o)  { 
    if(new RegExp("("+ k +")").test(format)){ 
    format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
    } 
    } 
    return format; 
};

4_最终效果如下图:



5_

附窗口表单提交和重置功能代码:

按钮代码:

  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>

  <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>

对应js代码

function submitForm(){
if(!$('#editForm').form('validate')){
$.messager.alert('提示','表单还未填写完成!');
return ;
}
$.post("/user/edit",$("#editForm").serialize(), function(data){
if(data.status == 200){// 返回的结果必须要有status属性
$.messager.alert('提示','修改会员成功!');
$('#userEdit').window('close');
$("#userList").datagrid("reload");
clearForm();
}else{
$.messager.alert('提示','修改会员失败!');
}
});
}
function clearForm(){
$('#editForm').form('reset');
}

6_

结束语:以上代码供参考,如有问题,敬待指出.








编辑数据-表单回显

最近做的项目中,在对单表进行增删改查的时候,对于数据的编辑都使用了数据回显。 具体使用环境: 列表页面:main.jsp,借助easy-ui的datagrid表格列表显示数据库中查询的数据。选中某...
  • XUJIAOlf
  • XUJIAOlf
  • 2015-04-27 17:35:24
  • 12489

回显DataGrid

ID="list00" runat="server" AutoGenerateColumns="False" GridLines="None" Width="100%"ShowHeader="Fals...
  • jujuchen
  • jujuchen
  • 2007-05-22 09:19:00
  • 448

easyUI 编辑用户,进行数据回显

userAction中提供查询方法 //根据id查询用户查询user,进行页面回显 public String findUserById() { User user = userServ...
  • leimingming2017
  • leimingming2017
  • 2018-01-31 11:17:04
  • 227

struts2+spring+mybatis datagrid 分页,查询,数据回显等详解

这篇位文章主要针对上一篇博客进行具体功能的操作说明。 一:分页 1.纯前端分页 //前段分页 function pagerFilter(data){ if (typeof data....
  • J_Bang
  • J_Bang
  • 2016-08-13 10:01:10
  • 2018

在DataGrid中跨页面实现多选

实现效果:SelectValueInMulPage.aspx 跨页面实现多选 * {FONT-SIZE:12PX} #Status {text-align:left} function ...
  • IamBird
  • IamBird
  • 2006-05-09 15:52:00
  • 917

实现鼠标双击DataGrid的一行,使该行成为编辑状态

在DataGrid第一列添加一按钮列(隐藏),然后通过onclick触发隐藏按钮事件主要代码private void DataGrid1_ItemDataBound(object sender, Sy...
  • xiaoxiaohai123
  • xiaoxiaohai123
  • 2007-06-14 12:53:00
  • 2410

EasyUI_Datagrid上下键编辑行,锁定编辑单元格所在的列(二)

上一篇中介绍了DataGrid 绑定键盘上下键 选择编辑行。 这次介绍Datagrid锁定正在编辑单元格所在的列。 都是方便用户的操作。 假设商品信息全部录入好,用户需要填写数量,价格...
  • q646926099
  • q646926099
  • 2016-07-23 22:55:57
  • 1084

easyui datagrid在编辑状态下更新列的值

  • 2016年06月17日 17:49
  • 156KB
  • 下载

EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理

  EasyUi中的DataGrid提供前台编辑的相关函数。 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉...
  • oaa608868
  • oaa608868
  • 2016-12-07 19:01:06
  • 5147

编辑 表格的时候数据的回显

1.在编辑js edit方法中写入 if (id) { var iframe = this.getIFrameEl(); ...
  • ChangKA
  • ChangKA
  • 2017-12-27 17:16:12
  • 136
收藏助手
不良信息举报
您举报文章:关于datagrid编辑用户的窗口数据回显技术
举报原因:
原因补充:

(最多只允许输入30个字)