Ext 三态复选树

这个东西总会用到，可是开发起来甚是麻烦，下面是我做的，当然也参考了网友的作品。

参考文章：http://blog.csdn.net/weil001/article/details/4008016

根据自己的业务，角色分配菜单，改造如下：

1.选择一个角色弹出如下界面：

Ext 三态复选树

复选树代码在src.rar中

2.js代码调用

var roleId = record.get('roleId');// 选择角色的ID
var menuTree = new Ext.sys.CheckMenuTree({ roleId: roleId });

var win = new Ext.Window({
      title: '角色授权', width:600,height:400,
      modal: true, resizable: true, layout: 'fit',
      items: [menuTree],
      buttonAlign: 'center',
      buttons: [{
            text:'确定', iconCls:'icon_ok',
            handler: function(){
              var ids = menuTree.getCheckedNodes();// 被选中的树节点-json串形式
              alert(ids );

// 自己业务代码

             //
             }
      }, '-', {
      text:'关闭', iconCls:'icon_cancle', handler: function(){ win.close(); win = null; }
   }]
  });
  win.show();

3.表结构

Ext 三态复选树

4.后台实现

/**
* 描述：listMenu4CheckBox 菜单复选框树-查看所有
* @param request
* @return
* @CreateOn Jul 19, 2011 4:06:33 PM
* @author chun_chang
* @throws Exception
*/
public List<Map<String, Object>> listMenu4CheckBox(HttpServletRequest request) throws Exception{
  String sql = "";
  String roleId = request.getParameter("roleId");
  // 1.提取当前角色下的所有的菜单ID
  sql = "from cs_role_menu_map where roleId = ?";
  String[] fields = { "menuId", "status" };
  List<Map<String, Object>> listMenuId = this.menuDao.queryForListMap(fields, sql, new Object[] { roleId });

  Map<String, String> statusMap = new HashMap<String, String>();
  for(Map<String, Object> map2: listMenuId) {
   statusMap.put(String.valueOf(map2.get("menuId")), String.valueOf(map2.get("status")));
  }

  // 2.取出所有菜单
  sql = "select menuId, menuName,iconCls from cs_menu where parentMenuId = 0 order by menuId";
  return this.subListMenu("0", statusMap);
}

private List<Map<String, Object>> subListMenu(String pid, Map<String, String> statusMap) throws Exception{
  String sql = "select menuId, menuName,iconCls from cs_menu where parentMenuId = ? order by orderNum";
  List<Map<String, Object>> list = menuDao.getJdbcTemplate().query(sql, new Object[]{pid}, new RowMapper<Map<String, Object>>(){

   public Map<String, Object> mapRow(ResultSet rs, int rowNum) throws SQLException {
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("id", rs.getString("menuId"));
    map.put("text", rs.getString("menuName"));
    map.put("iconCls", rs.getString("iconCls"));
    map.put("checked", "none");
    return map;
   }

  });
  for(Map<String, Object> map: list){
   String menuId = String.valueOf(map.get("id"));
   List<Map<String, Object>> list1 = this.subListMenu(menuId, statusMap);
   map.put("children", list1);

   String status = statusMap.get(menuId);// status的值为none,part,all-分别对应图片none.gif，part.gif，all.gif
   if(StringUtils.isNotBlank(status)){
    map.put("checked", status);
   }
  }
  return list;
}

Ext 三态 复选树

相关推荐