PLAN:开发收支记录的编辑功能

2013-11-21 1,178 0 开发! 大超超。

131121plan-编辑收支.png

收支查和增功能做好了,禀着谨慎的精神一直用着也不觉得差点什么,但是最近发现蛮多收支条理不够清晰,蛮多都是因为添加日期在收支日期很后了,所以还是需要有些修改功能。因此就做了一个点击日期在弹出层里修改(仿bootstrap的modal),主要代码如下。

前台account.php的样式展示:

// 编辑功能 @ 2013-11-21 00:22:53
$('.js-edit').live('click',function(){
    var $sf = $(this);
    var id = parseInt(_D($sf.parents('li[data-id]').data('id')));
    var acid = parseInt($sf.parents('li[data-acid]').data('acid'));
    $('body').append('<div class="modal"></div><div class="modal-backdrop"></div>');
    var $md = $('.modal');
    var $md_back = $('.modal-backdrop');
    $md.html('<div class="md-head">编辑'+id+'</div><div class="md-body"></div><div class="md-foot"></div>');
    var $md_b = $('.md-body');
    var $md_f = $('.md-foot');
    $md_b.html('<input type="text" class="io-ct" disabled value="备注加载中…"><br><input type="text" class="io-dt" disabled value="日期加载中…"><br>');
    $md_f.html('<button class="mdf-cancel _btn-gray button1">取消</button> <button class="mdf-save _btn-green _btn-gray button1">载入中…</button>');
    var _mdRemove = function(){$md.remove();$md_back.remove();}
    // 绑定“取消”
    $('.mdf-cancel').click(function(){
        _mdRemove();
    });
    // ajax载入数据
    $.dp({t:'account-edit', v:'load', id:id},function(d){
        d = d.split(G.salt);
        $('.io-ct').val(d[1]).removeAttr('disabled').focus();
        $('.io-dt').val(d[2]).removeAttr('disabled');
        $('.mdf-save').html('保存').removeClass('_btn-gray').click(function(){
            $('.mdf-save').unbind('click').html('保存中…').addClass('_btn-gray');
            var ct = $('.io-ct').val();
            var dt = $('.io-dt').val();
            // ajax保存数据
            $.dp({t:'account-edit', v:'save', id:id, acid:acid, beg:beg, ct:ct, dt:dt}, function(d){
                d = d.split(G.salt);
                $sf.parents('li[data-id]').replaceWith(d[1]);
                _mdRemove();
            });
        });
    });
});

后端ajax.php数据处理:

// 理财修改 @ 2013-11-21 00:25:06
else if( $t=='account-edit' ){
    $id = $id+0;// 防止sql注入
    if( $v=='load' ){
        $r = $db->row("select *** limit 1");
        echo 'ok'.jsSalt().$r['reason'].jsSalt().$r['addDt'];
    }
    else if( $v=='save' ){
        if( strlen($dt)!=19 ) $dt = dt();
        $db->query("update *** limit 1");
        echo 'ok'.jsSalt().insertAccIO('io-ajax', $id);
    }
}

g.css仿bootstrap浮出层对话框样式:

.modal{position:fixed;top:10px;left:10px;right:10px;z-index:1050;width:auto;margin:0;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:none;}
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}
.md-head{
    padding: 10px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
     
}
.md-body{
    padding: 10px;
}
.md-foot{
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
    -moz-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
}
.md-body input{
    width:250px;
    display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin: 5px 0;
    font-size: 14px;
    line-height: 20px;
    color: #555555;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}

 



声明: 本文由大超超。原创编译,转载请保留链接: http://www.thinkful.cn/archives/329.html