function setTableTBodyRows(result){
var tBody=$("#tBodyId");
//清空原有数据
tBody.empty();
for(var i in result){//循环一次取一行记录
var tr=$("<tr></tr>");
var tds="<td><input type='checkbox' name='checkedId' value='"+result[i].id+"'</td>"+
"<td>"+result[i].name+"</td>"+
"<td>"+result[i].note+"</td>"+
"<td>"+result[i].created+"</td>"+
"<td>"+result[i].updated+"</td>";
tr.append(tds);
tBody.append(tr);
}
}
function doGetObjects(){
var url="role/listPages";
var params={pageCurrent:1};
$.post(url,params,function(result){
console.log(result);
setTableTBodyRows(result);
});
}
用prop()获取属性的值比attr()要好
/*获取选中的角色列表中的记录*/
function getCheckedIds(){
var checkedIds="";
//迭代tbody中名字为checkedId的input元素
$("tbody input[name='checkedId']").each(function(){
//假如这个input的cheked属性值为true
if($(this).prop("checked")){
if(checkedIds.length==0){
checkedIds+=$(this).val();
}else{
checkedIds+=","+$(this).val();
}
}
});
return checkedIds;
}
function doDeleteObject(){
console.log("doDeleteObject");
//获取角色id
var checkedIds=getCheckedIds();
console.log(checkedIds);
if(checkedIds.length==0){
alert("请选择一个");
return;
}
var url="role/deleteObject";
var params={"checkedIds":checkedIds};
//异步传输到服务端，执行删除操作
$.post(url,params,function(result){
alert(result);
doGetObjects();
});
}
或者这样写
function getCheckedIds(){
var chs=new Array();
//迭代tbody中名字为checkedId的input元素
$("tbody input[name='checkedId']").each(function(){
//假如这个input的cheked属性值为true
if($(this).prop("checked")){
chs.push($(this).val());
console.log(chs);
}
});
return checkedIds;
}
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">角色列表</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width:350px;">
<input type="text" name="table_search"
class="form-control pull-right" placeholder="搜索">
<div class="input-group-btn">
<button type="submit" class="btn btn-success">
<i class="fa fa-search"></i>
</button>
<button type="button" class="btn btn-danger btn-delete">
删除
</button>
</div>
</div>
</div>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>备注</th>
<th>创建时间</th>
<th>更新时间</th>
</tr>
</thead>
<tbody id="tBodyId">
</tbody>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<script type="text/javascript">
$(function(){
doGetObjects();
//在input-group-btn标识的div元素中查找class为btn-delete的元素
//然后在上注册一个click事件，点击此元素时执行doDeleteObject方法
$(".input-group-btn").on("click",".btn-delete",doDeleteObject);
});
/*实现角色的删除操作*/
function doDeleteObject(){
console.log("doDeleteObject");
//获取角色id
var checkedIds=getCheckedIds();
console.log(checkedIds);
if(checkedIds.length==0){
alert("请选择一个");
return;
}
var url="role/deleteObject";
var params={"checkedIds":checkedIds};
//异步传输到服务端，执行删除操作
$.post(url,params,function(result){
alert(result);
doGetObjects();
});
}
/*获取选中的角色列表中的记录*/
function getCheckedIds(){
var checkedIds="";
//迭代tbody中名字为checkedId的input元素
$("tbody input[name='checkedId']").each(function(){
//假如这个input的cheked属性值为true
if($(this).prop("checked")){
if(checkedIds.length==0){
checkedIds+=$(this).val();
}else{
checkedIds+=","+$(this).val();
}
}
});
return checkedIds;
}
function doGetObjects(){
var url="role/listPages";
var params={pageCurrent:1};
$.post(url,params,function(result){
console.log(result);
setTableTBodyRows(result);
});
}
function setTableTBodyRows(result){
var tBody=$("#tBodyId");
//清空原有数据
tBody.empty();
for(var i in result){//循环一次取一行记录
var tr=$("<tr></tr>");
var tds="<td><input type='checkbox' name='checkedId' value='"+result[i].id+"'</td>"+
"<td>"+result[i].name+"</td>"+
"<td>"+result[i].note+"</td>"+
"<td>"+result[i].created+"</td>"+
"<td>"+result[i].updated+"</td>";
tr.append(tds);
tBody.append(tr);
}
}
</script>
@RequestMapping("/deleteObject")
@ResponseBody
public String deleteObject(String checkedIds){
roleService.deleteObject(checkedIds);
return "delete ok";
}
public interface RoleService {
List<Role> findPageObjects();
/**
* 根据id执行删除操作
* @param ids
* @return
*/
int deleteObject(String ids);
}
@Service
public class RoleServiceImpl implements RoleService {
@Autowired
private RoleDao roleDao;
public List<Role> findPageObjects() {
return roleDao.findPageObjects();
}
@Override
public int deleteObject(String ids) {
if(ids==null||ids.length()==0)
throw new RuntimeException("选中记录不能为空");
String[] checkIds=ids.split(",");
return roleDao.deleteObject(checkIds);
}
}
package com.school.dao;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import com.school.entity.Role;
/**
* 持久层(数据访问层)对象
* 此类型的对象由mybatis创建
*/
@Repository
public interface RoleDao {
//查询所有角色信息
List<Role> findPageObjects();
int deleteObject(@Param("ids")String[] ids);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--mybatis中的映射文件 -->
<!--定义一个sql查询，sql查询必须有一个id,其中resultType表示查询结果会封装到对应的map类型中,一行记录对应一个map -->
<mapper namespace="com.school.dao.RoleDao">
<!-- 借助sql元素可以对重复编写的sql语句进行提取 -->
<sql id="tableName"> roles </sql>
<sql id="fromTable">
from
<include refid="tableName" />
</sql>
<select id="findPageObjects" resultType="com.school.entity.Role">
select *
<include refid="fromTable" />
</select>
<delete id="deleteObject">
delete
<include refid="fromTable" />
where id in
<foreach collection="ids" open="(" close=")" separator="," item="item">
${item}
</foreach>
</delete>
</mapper>
网友评论