1、jsp和对应的js文件
1.1js
//页面初始化就加载
$(function() {
//表格列
/** *dataTables开始** */
dataTables = $('#articleListTable').DataTable({
"language": {
"info": "当前 _START_ - _END_ 条 共 _TOTAL_ 条",
"paginate": {
"sFirst": "首页",
"sPrevious": " < ",
"sNext": " >",
"sLast": " 尾页 "
},
"emptyTable": "没有符合条件的记录!",
"lengthMenu": "显示 _MENU_ 条",
"sZeroRecords": "没有找到匹配的记录",
"sInfoEmpty": ""
},
"aLengthMenu": [10, 20, 50, 100],
"pagingType": "full_numbers", // 用于指定分页器风格
// "full_numbers"" or
// ""two_button""，
// default
// ""two_button""
"bAutoWidth": true,
"scrollX": true,
"ajax": {
"url": path + "/appletManage/mpArticle/queryPage",
"type": "POST",
"dataType": "json",
"data": {
filter : filter
}
},
"processing": true,
"serverSide": true,
"bLengthChange": true,
"bSort": false, // 排序功能
"searching": false,
"bStateSave": false, // 保留分页信息
"resetPaging": false,
"dom": '<"top">t<"bottom"lip><"clear">',
"columns": [
//数据对应的内容
{"data": "ord"},
{"data": "status_flag_nm"},
{"data": "thumbnail_url"},
{"data": "title"},
//操作按钮，样式靠右
{"data": "","class": "align-right"}
],
"columnDefs": [
{
"render": function(data, type, row, meta) {
//序号列
return meta.row + 1 + meta.settings._iDisplayStart;
},
"orderable": false,
//表示第一列
"targets": 0
},
{
//如果表格中要显示图片，可以修改样式
"render": function(data, type, row) {
var html = "<img style=\"height: 50px;width:50px;\" src=" + row.thumbnail_url +" />"; //缩略图
return html;
},
"orderable": false,
"targets": 2
}, {
"render":function(data,type,full){
return "<div class=\"table_td_nowrap_40\" title=\""+data+"\">"+data+"</div>";
},
"targets": 3
},{
"render": function(data, type, row, meta) {
var html = "";//编辑按钮
html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="查看" onclick="articleShow(\'' + row.id + '\',\'true\',\'view\')"/>';
html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="编辑" onclick="articleShow(\'' + row.id + '\',\'false\',\'edit\')"/>';
if(row.status_flag == "Y"){
html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="禁用" onclick="articleState(\'' + row.id + '\',\'N\')"/>';
}else{
html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="启用" onclick="articleState(\'' + row.id + '\',\'Y\')"/>';
}
html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="删除" onclick="articleDelete(\'' + row.id + '\',\'false\',\'edit\')"/>';
html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="上移" onclick="updateOrd(\'' + row.id + '\',\'up\',\''+row.ord+'\','+(meta.row)+')"/>';
html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="下移" onclick="updateOrd(\'' + row.id + '\',\'down\',\''+row.ord+'\','+(meta.row)+')"/>';
return html;
},
"orderable": false,
"targets": 4
}]
});
});
1.2jsp
<!--第一点，列个数要和js对应-->
<!--第二点，table的id要和js对应-->
<table id="articleListTable"
class="table table-striped table-hover dataTable"
cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>显示状态</th>
<th>缩略图</th>
<th>标题</th>
<th>操作</th>
</tr>
</thead>
</table>
2、上移下移操作
2.1、js文件
/**
* 上移下移
* */
function updateOrd(id,type,ord,rowIndex){
if(dataTables.rows()&& dataTables.rows().data()){
var data = dataTables.rows().data();
var nextIndex = 0;
if(type == "up" && rowIndex == 0 ){
$.zkbr.alert("错误信息", "已经是第一条数据");
return false;
}
if(type == "down" && rowIndex == (data.length - 1)){
$.zkbr.alert("错误信息", "已经最后一条数据");
return false;
}
if(type == "up"){
nextIndex = rowIndex - 1;
} else {
nextIndex = rowIndex + 1;
}
// console.log(data[nextIndex])
$.ajax({
url: path+"/appletManage/mpArticle/updateOrd",
type:"post",
dataType:"json",
params: null,
data : {
"id": id,
"ord": data[nextIndex].ord,
"nextId": data[nextIndex].id,
"nextOrd": ord
},
success:function(data){
if (data.statusCode == '200') {
// 返回后显示方案状态为已初审分配
dataTables.ajax.reloadData({filter : filter});
} else {
$.zkbr.alert("错误信息", data.errorMsg);
}
}
})
}
}
2.2、controller
/**
* 上移下移，交换排序
*
* @param id 文章ID
* @param ord 旧的排序
* @param newOrd 新的排序
* @return
*/
@ResponseBody
@RequestMapping(value = "/updateOrd")
public AjaxResult updateOrd(String id, Integer ord, String nextId,Integer nextOrd) {
if (null == id || StringUtils.isEmpty(id)) {
return new AjaxResult().fail("500", "当前行ID不能为空");
}
if (null == ord) {
return new AjaxResult().fail("500", "当前行序号不能为空");
}
if (null == nextId) {
return new AjaxResult().fail("500", "移动行的ID不能为空");
}
if (null == nextOrd) {
return new AjaxResult().fail("500", "移动行序号不能为空");
}
Map<String, Object> articleInfo = service.getOne(new HashMap<String, Object>() {
private static final long serialVersionUID = 1L;
{
put("id", id);
}
});
if (null == articleInfo) {
return new AjaxResult().fail("500", "数据不存在");
}
UserInfo userInfo = UserContext.getCurrentUser();
//更新当前行
service.updateOrd(new HashMap<String, Object>() {
private static final long serialVersionUID = 1L;
{
put("id", id);
put("ord", ord);
put("update_user", userInfo.getUserId());
}
});
//更新互换的行
service.updateOrd(new HashMap<String, Object>() {
private static final long serialVersionUID = 1L;
{
put("id", nextId);
put("ord", nextOrd);
put("update_user", userInfo.getUserId());
}
});
return new AjaxResult().success200();
}
2.3、service
/**
* 修改序号
*
* @param map
*/
public void updateOrd(Map<String, Object> map);
2.4、serviceImpl
/**
* 修改序号
*
* @param map
*/
@Override
public void updateOrd(Map<String, Object> map) {
baseDao.update(getTableMapping() + ".updateOrd", map);
}
2.5、mapper.xml
<update id="updateOrd" parameterMap="paraMap">
update mp_article
set ord = #{ord},
update_user = #{update_user},
update_date = current_timestamp
where id = #{id}
</update>
