首先是前台的jsp页面,或者是html页面
1、导入该导入的包
<style type="text/css" title="currentStyle">
@import "../../../../static/css/demo_page.css";
@import "../../../../static/css/demo_table.css";
@import "../../../../static/css/demo_table_jui.css";
@import "../../../../static/css/jquery.dataTables.css";
@import "../../../../static/css/jquery-ui-1.8.4.custom.css";
</style>
<script src="../../../../static/jquery/shortCut.js"></script>
<script src="../../../../static/jquery/jquery.js"></script>
<script src="../../../../static/jquery/jquery.dataTables.min.js"></script>
<script src="../../../../static/jquery/jquery.jeditable.js"></script> //使datatables可编辑的重要js文件
2、重点代码
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable=$('#contentTable').dataTable( {
"bAutoWidth":false,
"oLanguage":{
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoEmtpy": "找不到相关数据",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sProcessing": "正在加载中...",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
},
"aoColumns":[
{"sWidth":"90px","aTargets": [ 0 ]},
{"sWidth":"100px","aTargets": [ 1 ]},
{"sWidth":"120px","aTargets": [ 2 ]},
{"sWidth":"80px","aTargets": [ 3 ]},
{"sWidth":"120px","aTargets": [ 4 ]},
{"sWidth":"120px","aTargets": [ 5 ]},
{"sWidth":"150px","aTargets": [ 6 ]},
{"sWidth":"120px","aTargets": [ 7 ]},
{"sWidth":"120px","aTargets": [ 8 ]},
{"sWidth":"120px","aTargets": [ 9 ]},
{"sWidth":"120px","aTargets": [ 10 ]},
{"sWidth":"100px","aTargets": [ 11 ]},
{"sWidth":"100px","aTargets": [ 12 ]},
{"sWidth":"100px","aTargets": [ 13 ]},
{"sWidth":"100px","aTargets": [ 14 ]},
{"sWidth":"120px","aTargets": [ 15 ]}
],//设置列的宽度
"bJQueryUI": false,
"bStateSave": true,
"sPaginationType": "full_numbers"//分页
});
//想让那一列可以编辑,就把那一列的id写到下面红色部分,蓝色部分是后台处理编辑完保存内容的方法的路径
$('#type,#name,#interviewers,#email,#qq,#phone', oTable.fnGetNodes()).editable('${ctx}/oa/audition/listTest', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'), //获取tr的id
"column": oTable.fnGetPosition( this )[2], //获取列名
"columnName":this.getAttribute('id') //获取该列对应的属性
};//这里你编辑的内容默认以“value”发送到后台
},
"height":"18px",
"width":"120px"
} );
} );
</script>
下面是table
<table id="contentTable" class="display table-striped table-bordered table-condensed" cellpadding="5" cellspacing="0" border="1" id="example"
style="text-align: center;vertical-align: middle;">
<thead>
<tr class="gradeA">
<th>面试类型</th>
<th>星期</th>
<th>时间</th>
<th>是否来面试</th>
<th>姓名</th>
<th>应聘部门</th>
<th>应聘岗位</th>
<th>面试官</th>
<th>邮箱</th>
<th>QQ号</th>
<th>电话</th>
<th>用人部门评价</th>
<th>人事评价</th>
<th>是否入职</th>
<th>备注</th>
<shiro:hasPermission name="oa:annual:leave:edit">
<th>操作</th>
</shiro:hasPermission></tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="audition">
<tr class="gradeA" id=${audition.id}>
<td id="type">${fns:getDictLabel(audition.type, "oa_audition", "")}</td>
<td id="week">${audition.week}</td>
<td id="dateTime"><fmt:formatDate value="${audition.dateTime}" type="both" pattern="yyyy-MM-dd HH:mm"/></td>
<td id="come">
<c:if test="${audition.come==1}">是</c:if>
<c:if test="${audition.come==0}">否</c:if>
<c:if test="${audition.come==2}"><a name="lookReason" data-id="${audition.id}">没约上</a></c:if>
</td>
<td id="name">${audition.name}</td>
<td id="office">${audition.office.name}</td>
<td id="post">${fns:getDictLabel(audition.post, "oa_job", "")}</td>
<td id="interviewers">${audition.interviewers}</td>
<td id="email">${audition.email}</td>
<td id="qq">${audition.qq}</td>
<td id="phone">${audition.phone}</td>
<td>
<c:if test="${not empty audition.officeEvaluation}"><a name="look" data-id="${audition.id}">查看</a></c:if>
<c:if test="${empty audition.officeEvaluation}"><a class="handle" data-value="officeEvaluation" data-id="${audition.id}">填写</a></c:if>
</td>
<td>
<c:if test="${not empty audition.hrEvaluation}"><a name="look" data-id="${audition.id}">查看</a></c:if>
<c:if test="${empty audition.hrEvaluation}"><a class="handle" data-value="hrEvaluation" data-id="${audition.id}">填写</a></c:if>
</td>
<td>${audition.entry}</td>
<td>
<c:if test="${not empty audition.remarks}"><a name="look" data-id="${audition.id}">查看</a></c:if>
<c:if test="${empty audition.remarks}"><a class="handle" data-value="remarks" data-id="${audition.id}">填写</a></c:if>
</td>
<shiro:hasPermission name="oa:audition:edit">
<td>
<a href="${ctx}/oa/audition/form?id=${audition.id}">修改</a>
<a href="${ctx}/oa/audition/delete?id=${audition.id}"
οnclick="return confirmx('确认要删除该面试跟踪记录吗?', this.href)">删除</a>
</td>
</shiro:hasPermission>
</tr>
</c:forEach>
</tbody>
</table>
3、后台代码
value就是你编辑完的内容,row_id就是你传过来的td的id,我这里为了用id,将该行要显示的对象的id作为t的id,这样就可以直接得到数据库中该对象的id了,同理我将要显示对象的属性作为td的id,这样就可以知道操作的是哪一个属性了
@RequestMapping(value="/listTest",method =RequestMethod.POST)
@ResponseBody
public String listTest(String value,String row_id,String columnName){
Long id=Long.parseLong(row_id);
auditionService.editorUpdate(columnName,value,id);
return value;
}
5、下面是editorUpdate方法
auditionDao是Dao层的一个类
public void editorUpdate(String columnName, String value, Long id){
String sql= new String("update Audition set "+columnName+"='"+value+"' where id="+id);
Query s = auditionDao.getSession().createQuery(sql);
s.executeUpdate();
}
AuditionDao
public interface AuditionDao extends AuditionDaoCustom, CrudRepository<Audition, Long> {
@Modifying
@Query("update Audition set delFlag='" + Audition.DEL_FLAG_DELETE + "' where id = ?1")
public int deleteById(Long id);
}
interface AuditionDaoCustom extends BaseDao<Audition> {
}
@Repository
class AuditionDaoImpl extends BaseDaoImpl<Audition> implements AuditionDaoCustom {
}