在网页可编辑的表格Jquery dataTable从前台到后台完整

最新推荐文章于 2023-10-18 16:20:53 发布

置顶在北京的小蜜蜂

最新推荐文章于 2023-10-18 16:20:53 发布

阅读量9.8k

点赞数 1

本文链接：https://blog.csdn.net/Jonia917/article/details/18658291

版权

首先是前台的jsp页面，或者是html页面

1、导入该导入的包

2、重点代码

//想让那一列可以编辑，就把那一列的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 {

}

在北京的小蜜蜂

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
在网页可编辑的表格Jquery dataTable从前台到后台完整

首先是前台的jsp页面，或者是html页面1、导入该导入的包 @import "../../../../static/css/demo_page.css"; @import "../../../../static/css/demo_table.css"; @import "../../../../static/css/demo_tabl
复制链接

扫一扫