B/S系统操作日志设计思路

最近做的系统需要实现操作日志的功能，主要记录用户的 增，删，改的操作。自己想的方法笨点儿但能满足需求，待日后有更好的解决方法了再来优化了，不多说先上效果图。

一，效果图

1， 日志列表

 　　

2， 日志详细

　　

二，设计思路

1， 页面加载完成后，利用JS 记录需要记录的值到 对应的隐藏域中。

2， 页面提交时利用JS    对表单内容进行比较，记录改动过的项目，并保存到隐藏域中，供后台调用。

3， 用存储过程对隐藏域中的值进行解析并保存到数据库中

三，实现步骤

1，   页面的上 控件的命名要有规则这样 做是为了方便JS遍历页面上的控件

如

　　　

2，JS代码

记录和比较表单的JS

///页面加载完后，遍历页面上需要记录的项目，赋值给相应的隐藏域
$(document).ready(function () {
    //找到页面中的文本框 并把文本框中的值 赋值给 相应的 隐藏域
    var inpus = $("input[type='text']");
    for (var i = 0; i < inpus.length; i++) {
        if ($("#HF" + inpus[i].id).length > 0) {
            $("#HF" + inpus[i].id).val(inpus[i].value);
        }
    }
});

//表单提交时 比较表单提交前后 值的变化，并记录下有改动的项目 存入 隐藏域中供后台调用
//隐藏域中保存的信息格式 为： 被改字段含义，原值，新值 每条记录以 $分隔
function MyFormSubmit(btnID) {
    //比较文本框
    var changeInputs = "";
    var newInputs = $("input[type='text']");
    for (var i = 0; i < newInputs.length; i++) {
        if ($("#HF" + newInputs[i].id).length > 0) { 
            if ($.trim(newInputs[i].value) != $.trim($("#HF" + newInputs[i].id).val())) {
                changeInputs += $("#lb" + newInputs[i].id).text() + "," + $("#HF" + newInputs[i].id).val() + "," + $.trim(newInputs[i].value) + "$";
            }
        }
    }
//将改动过的表单内容记录到隐藏域中
$("#HFChangeContents").val(changeInputs);

    //检测表单内容是否改动过 
    if ($("#HFChangeContents").val() == "") {
        alert('无改动！');
    }
    else { 
      //提交表单
        document.getElementById(btnID).click();
    }
});

到这里已经得到了需要记录的表单改动项目，剩下数据处理就简单了。
本文只提供个人的拙见，如有更好的实现方式，请不吝赐教。