环境准备

DataTables列表折叠列的使用建立在上篇文件的基础上
Bootstrap框架——DataTables列表示例

最终效果

Bootstrap框架----DataTables列表增加备注功能

实现方案

Java代码
新增RemarkLog实体

package com.test.domain.entity;
import java.io.Serializable;
import java.util.Date;
/**
 * 备注记录
 */
public class RemarkLog implements Serializable {
/**
 * 
 */
private static final long serialVersionUID = 1L;
private Date datetime; // 记录日期
private String operator; // 操作员
private String remark; // 备注

public RemarkLog(){}    

public RemarkLog(String remark, String operator) {
this(remark, operator, new Date());
    }

public RemarkLog(String remark, String operator, Date datetime) {
this.operator = operator;
this.remark = remark;
this.datetime = datetime;
    }

public Date getDatetime() {
return datetime;
    }

public void setDatetime(Date datetime) {
this.datetime = datetime;
    }

public String getOperator() {
return operator;
    }

public void setOperator(String operator) {
this.operator = operator;
    }

public String getRemark() {
return remark;
    }

public void setRemark(String remark) {
this.remark = remark;
    }
}

Contacts增加remarks字段和id字段

package com.test.domain.entity;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;



/**
 * 联系人
 * 
 * 
 */
public class Contacts {
private String id;// 姓名
private String name;// 姓名
private String tel;// 电话
private int gender;// 性别
private Date  creatTime;//创建时间
private List<RemarkLog> remarks = new ArrayList<RemarkLog>();

public String getName() {
return name;
    }

public void setName(String name) {
this.name = name;
    }

public String getTel() {
return tel;
    }

public void setTel(String tel) {
this.tel = tel;
    }

public Date getCreatTime() {
return creatTime;
    }

public void setCreatTime(Date creatTime) {
this.creatTime = creatTime;
    }

public int getGender() {
return gender;
    }

public void setGender(int gender) {
this.gender = gender;
    }

public List<RemarkLog> getRemarks() {
return remarks;
    }

public void setRemarks(List<RemarkLog> remarks) {
this.remarks = remarks;
    }

public String getId() {
return id;
    }

public void setId(String id) {
this.id = id;
    }









}

IndexController中添加

    @RequestMapping("/remark-add")
        @ResponseBody
public Object addRemark(String id, String remark) {
if (StringUtils.isEmpty(id) || StringUtils.isEmpty(remark)) {
                return JSONResult.error("未找到数据");
            }

            return addRemark("操作人", id, remark)
                    ? JSONResult.success("成功")
                    : JSONResult.error("失败");
        }

public boolean addRemark(String operator, String id, String remark) {
            return mongoTemplate.updateFirst(Query.query(Criteria.where("_id").is(id)),
new Update().push("remarks", new RemarkLog(remark, operator)).set("updateDate", DateUtils.now()),
                    Contacts.class).getN() > 0;
        }

JSONResult实体

package com.test.web.message.response;

/**
 * JSONResult
 * 标准化的JSON响应
 * 
 * <pre>
 * {@link JSONResult#success(Object)}
 * {@link JSONResult#error(String)}
 * </pre>
 * 
 * 
 */
public class JSONResult {

/**
 * 成功的代码
 */
public static final int         CODE_SUCCESS            = 0;

/**
 * 错误的代码，可根据错误类型进行详细分类
 */
public static final int         CODE_ERROR              = -1;

/**
 * 空白的成功响应
 */
public static final JSONResult  RESULT_SUCCESS_NO_DATA  = new JSONResult(CODE_SUCCESS, null, null);

private int                     code;
private String                  msg;
private Object                  data;

/**
 * 创建一个成功的响应
 * 
 * @param data
 * @return
 */
public static JSONResult success(Object data) {
return new JSONResult(CODE_SUCCESS, null, data);
    }

/**
 * 创建一个错误的响应
 * 
 * @param msg
 * @return
 */
public static JSONResult error(String msg) {
return new JSONResult(CODE_ERROR, msg, null);
    }

/**
 * @param code
 * @param msg
 * @param data
 */
public JSONResult(int code, String msg, Object data) {
this.code = code;
this.setMsg(msg);
this.data = data;
    }

public int getCode() {
return code;
    }

public JSONResult setCode(int code) {
this.code = code;
return this;
    }

public Object getData() {
return data;
    }

public JSONResult setData(Object data) {
this.data = data;
return this;
    }

public String getMsg() {
return msg;
    }

public JSONResult setMsg(String msg) {
this.msg = msg;
return this;
    }

}

Jsp代码

html中增加对应列

<th width="8%" class="desktop">备注</th>

js
columns列中增加代码

            {
"data": "id",
"class": "text-center",
"render": function (id, type, row, position) {
return '<span>' + (row.remarks.length ? row.remarks[row.remarks.length - 1].remark : '') + '</span> <a href="javascript:;" class="glyphicon glyphicon-pencil edit-comment" id="' + id + '"/>';
                }
            },

dataTables初始化方法后面增加点击事件

.on('click', '.edit-comment', function () {
var $span = $(this).hide().prev().hide();
var $input = $('<input type="text" class="form-control input-simple input-remark" name="remark"/>').val('');
                $(this).before($input);
$input.focus(); // 让文本框获取焦点
            }).on('keypress blur', '.input-remark', function (e) {
if (e.type == 'keypress') {
if (e.keyCode == 13) $(this).blur(); // 回车也触发失焦事件
return;
                }
var $input = $(this);
var endEdit = function (remark) {
                    remark ? $input.prev().text(remark).show() : $input.prev().show();
$input.next().show();
$input.remove();
                };

if (!$input.val()) {
return endEdit();
                }

                $.ajax({
                    url: "/remark-add",
                    type: "POST",
                    data: {
                        id: $input.next().attr("id"),
                        remark: $input.val()
                    },
                    success: function (res) {
if (res.code) return alert('更新失败');
                        endEdit($input.val());
                    },
                    error: function (err) {
                        alert('更新失败: ' + err.status + ' ' + err.statusText);
                    }
                });
});

秒客网

Bootstrap框架----DataTables列表增加备注功能

环境准备

最终效果

实现方案

相关文章