【用户角色管理】用户多角色分页展示

 界面如下，前端layui完成分页，有对应查询，编辑，删除接口

用户多角色分页展示的实现：

mapper.xml文件相关代码（直接在sql语句进行分页查询）

mybatis一对多映射

<resultmap id="userdetailresult"  type="com.cc.vo.vuser">
  <id property="id"  column="id" />
  <result property="no" column="no"/>
  <result property="name" column="name"/>
  <result property="flag" column="flag"/>
  <collection property="roles"  oftype="com.cc.entity.role" javatype="java.util.arraylist">
    <id property="id"  column="rid"/>
    <result property="info"  column="info"/>
  </collection>
</resultmap>

<select id="findall" parametertype="map" resultmap="userdetailresult">
    select u.id,u.no,u.name,r.id rid,r.info,u.flag from (select * from t_user
      <where>
        <if test="no != null and no != ''">
          and no like concat('%',#{no},'%' )
        </if>
        <if test="flag != null">
          and flag = #{flag}
        </if>
      </where>

    limit #{page},#{limit}) u
    inner join
    t_userrole ur on
    ur.uid=u.id
    inner join t_role r
    on r.id=ur.rid
    order by u.id asc
</select>

 

layui对后台传来的的roles集合进行遍历展示职位：
userlimit.html部分代码

{field: 'id', title: '序号', sort: true, fixed: 'left'}
, {field: 'no', title: '工号'}
, {field: 'name', title: '姓名', sort: true}
, {field: 'roles', title: '职位', sort: true, templet:function(info){
    var rlist = info.roles;
    var infos = "";
    for(var i = 0; i < rlist.length; i++){
        infos = infos + " "+rlist[i].info;
    }
    return infos;
    }}