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

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_

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








阅读更多
个人分类: 技术贴
上一篇java 调用solr服务器 实现增删改查 及高亮显示
下一篇springboot入门(转)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭