jQuery Grid Tree Example

jQuery("#menuList").jqGrid({
       url:'/project/menu/menuListGrid',
       datatype: 'json',
       mtype:'PUT',
       treeGrid: true,
       treeGridModel: 'adjacency',
       serializeGridData: function(postData) {
              return JSON.stringify(postData);
       },
           
       colNames:['ID','NAME','PATH','설명','레벨','PARENT','isLeaf'],
       colModel: [
                 {name:'id',                      index:'id',          width:050,  
                       editrules:{required:true }, align:'center',key:true},
                     {name:'name',                index:'name',     width:100 ,
                       editrules:{required:true },editable:true},
                     {name:'path',                  index:'path',       width:150 ,
                       editrules:{required:true },editable:true},
                     {name:'description',        index:'description',width:150 ,
                       editrules:{required:true },editable:true},
                     {name:'level',                  index:'level',        width:100 ,editrules:{}, align:'center'},
                     {name:'parent',               index:'parent',     width:050 ,editrules:{}, align:'center'},
                     {name:'isLeaf',                index:'isLeaf',      width:050 ,editrules:{} },
        ],
        pager: jQuery('#pager'),
        height: 'auto',
        scroll: true,
        prmNames: { npage: 'npage' },
        autowidth : true,
        gridview: true,
        rowNum: 10000,
        sortname: 'id',
        treeGrid: true,
        treeGridModel: 'adjacency',
        ExpandColumn: 'name',
        caption: "Menu Tree",
               pagination: true,
               jsonReader: {
                  repeatitems: false
               },
               editurl:"/project/menu/menuEdit",
               loadComplete : function (data){
               }
             
     }).navGrid('#pager', {edit:true,add:true,del:true,search:true},
                                   {width:600,top:100,left:300},
                                   {width:600,top:100,left:300},
                                   {width:600},
                                   {width:600}
                   );
       





     
     jQuery.extend(jQuery.jgrid.del, {
                 closeAfterAdd: true,
                 recreateForm: true,
                 reloadAfterSubmit: true,
                 left : 300,
                 top :  200,
                 mtype : 'PUT',
                 ajaxDelOptions: { contentType: "application/json" },
                 serializeDelData: function (postData) {
                      return JSON.stringify(postData);
                 },
                 afterComplete: function (response,postdata,formid){
 
                  if (jQuery.parseJSON(response.responseText).success){
                  alert ("삭제되었습니다 !");
                  } else {
                  alert ("삭제에 실패 했습니다 !");
                  }
                 
                 }
     });
       
         
         jQuery.extend(jQuery.jgrid.edit, {
                 closeAfterAdd: true,
                 closeAfterEdit:true,
                 recreateForm: true,
                 reloadAfterSubmit: false,
                 left : 300,
                 top :  200,
                 mtype : 'PUT',
                 ajaxEditOptions: { contentType: "application/json" },
                 serializeEditData: function (postData) {
                      return JSON.stringify(postData);
                 },
                 afterComplete: function (response,postdata,formid){
                  var result = jQuery.parseJSON(response.responseText).success;
                  if (result){
                  switch (jQuery.parseJSON(response.responseText).oper){
                  case 'add':  alert ("저장 되었습니다 !");
                  break;
                  case 'edit': alert ("수정 되었습니다 !");
                  break;
                  case 'del':  alert ("삭제 되었습니다 !");
                  break;
                  }
                  jQuery('#menuList').trigger('reloadGrid');
                  } else {
                 
                  }
                 },
                 afterShowForm : function (formid){
                 },
                 beforeSubmit : function(postdata, formid) {
                  success = true;
                  message = "저장되었습니다!";
                    return[success,message];
                 }
         });


Java Class


        @RequestMapping (value="/menuListGrid",method=RequestMethod.PUT)
public @ResponseBody String menuListGrid(@RequestBody String json)
                                                                               throws JsonGenerationException,
                                                                 JsonMappingException,
                                                                 IOException {
HashMap<String,Object> params = new HashMap<String,Object>();
ObjectMapper mapper = new ObjectMapper();
logger.debug(json.toString());

params = mapper.readValue(json,
                                new TypeReference<Map<String,Object>>() { });

HashMap<String,Object> resultMap = new HashMap<String,Object>();
List<Menu> menuList = menuService.getAllMenus(params);

List<Menu> leafNode = menuService.getLeafNodes(params);
HashMap<String,Object> leafMap = new HashMap<String,Object>();

for (int i=0; i <  leafNode.size(); i++){
   leafMap.put(Integer.toString(leafNode.get(i).getId()),leafNode.get(i).getId());
}
ArrayList<Object> listArray = new ArrayList<Object>();

for (int i=0; i < menuList.size(); i++){
HashMap<String,Object> cellMap = new HashMap<String,Object>();
cellMap.put("id",          menuList.get(i).getId());
cellMap.put("name",     menuList.get(i).getName());
cellMap.put("path",      menuList.get(i).getPath());
cellMap.put("description", menuList.get(i).getDescription());
cellMap.put("level",          menuList.get(i).getLevelId());
cellMap.put("parent",       menuList.get(i).getParent());
if (leafMap.containsKey(Integer.toString(menuList.get(i).getId()))){
System.out.println("Menu ID : " + menuList.get(i).getId() );
cellMap.put("isLeaf", true);
cellMap.put("loaded", true);
} else {
cellMap.put("isLeaf", false);
cellMap.put("expanded",false);
cellMap.put("loaded", true);
}
cellMap.put("expanded",true);
listArray.add(cellMap);
}


resultMap.put("total",menuList.size());
resultMap.put("records", menuList.size());
resultMap.put("rows", listArray);
resultMap.put("nPage", 2);
resultMap.put("page", 1);
     
String value = mapper.writeValueAsString(resultMap);
logger.debug(value);
return value;
}





        @RequestMapping (value="/menuEdit",method=RequestMethod.PUT)
public @ResponseBody String menuEdit(@RequestBody String json)
                                                                                       throws IOException{

logger.debug(json.toString());
ObjectMapper mapper = new ObjectMapper();

HashMap<String, Object> params = new HashMap<String,Object>();
params = mapper.readValue(json,
                              new TypeReference<Map<String,Object>>() { });

logger.debug("Parameters : " + params.toString());
int resultValue = 0;
String oper = (String) params.get("oper");
logger.debug("Operation Code : " + oper);

if (oper.equals("edit")){
                       resultValue = menuService.updateMenu(params);
         }
                if (oper.equals("del")){
                      resultValue = menuService.deleteMenu(params);
                }
                if (oper.equals("add")){
resultValue = menuService.insertMenu(params);
}

        logger.debug("Update Edit Result Value : "  + resultValue);


if (resultValue == 1){
params.put("success", true);
} else {
params.put("success", false);
}
return mapper.writeValueAsString(params);
}


Java Service


@Service
public class MenuService {

 @Autowired
 private MenuMapper menuMapper;
 private final Log logger = LogFactory.getLog(getClass());

 public int getCount (){
   return menuMapper.getCount();
 }

 public List<Menu> getAllMenus(HashMap<String,Object> params){
 List<Menu> menusList = menuMapper.getAllMenus(params);
 return menusList;
 }

 public Menu getMenuById(String id) throws Exception {
   return (Menu)menuMapper.getMenuById(id);
 }

 @Transactional
 public int insertMenu (HashMap<String, Object> params) {
 params.put("isLeaf", "0");
 if (params.containsKey("parent")){
 String parent = (String) params.get("parent");
 if (parent.equals("") || parent.equals(null))
 if (params.get("parent") == null){
 params.put("levelId" , 1);
 } else {
 int level = menuMapper.getParentLevel((String)
                                                  params.get("parent"));
 level ++;
 params.put("levelId", level);
 }
 }

 int resultValue = menuMapper.insertMenu(params);
 logger.debug("result Value : " + resultValue);
 return resultValue;
 }

 @Transactional
 public int updateMenu(HashMap<String,Object> params) {
 int resultValue = menuMapper.updateMenu(params);
 logger.debug("Result Value :" + resultValue);
 return resultValue;
 }

 public int deleteMenu(HashMap<String, Object> params) {
 int resultValue = 0;
 try {
  resultValue = menuMapper.deleteMenu(params);
 } catch (PersistenceException pe) {
   logger.debug(pe.getMessage());
 } catch (RuntimeSqlException se){
 logger.debug(se.getMessage());
 logger.debug(se.toString());
 } catch (Exception e){
 logger.debug(e.toString());

 }
 return resultValue;
 }

 public List<Menu> getLeafNodes(HashMap<String, Object> params) {
 List<Menu> menuLeafList = menuMapper.getLeafNodes(params);
 return menuLeafList;
 }
}


Java Mapper Interface


public interface MenuMapper {

final String LEAF_NODE      =
                       " SELECT T1.ID ,T1.NAME,T1.LEVEL_ID FROM MENUS T1 LEFT
                         JOIN MENUS T2 ON T1.ID
                         = T2.PARENT WHERE T2.ID IS NULL";
final String SELECT_ALL     = " SELECT COUNT(*) as count FROM MENUS";
final String ALL_MENU       = " SELECT ID,NAME,PATH,DESCRIPTION,LEVEL_ID,
                                                    PARENT,ISLEAF FROM MENUS  ";
final String GET_MENU_BY_ID = " SELECT
                                                        ID,NAME,PATH,DESCRIPTION,LEVEL_ID,PARENT,
                                                        ISLEAF FROM MENUS
                                          WHERE ID = #{id,javaType=string,jdbcType=VARCHAR}";
final String DELETE_MENU    = " DELETE FROM MENUS
                                         WHERE ID = #{id,javaType=string,jdbcType=VARCHAR}";

@Select(SELECT_ALL)
public int getCount();

@Results({
        @Result(property="levelId", column="LEVEL_ID")
        })
@SelectProvider (type = com.company.project.persistence.MenuSqlBuilder.class,
                                  method = "getAllTreeMenuSql")
public List<Menu> getAllMenus(HashMap<String,Object>params);

//@SelectProvider (type=com.company.project.persistence.MenuSqlBuilder.class,
                                    method = "insertMenuSql")
final String INSERT_MENU = " INSERT INTO MENUS
                          (NAME,PATH,DESCRIPTION,LEVEL_ID,PARENT,ISLEAF) "   +
 " VALUES (#{name,javaType=string,jdbcType=VARCHAR},"        +
 " #{path,javaType=string,jdbcType=VARCHAR},"        +
 " #{description,javaType=string,jdbcType=VARCHAR}," +
 " #{levelId,javaType=int,jdbcType=NUMERIC},"        +
 " #{parent,javaType=string,jdbcType=VARCHAR},"      +
 " #{isLeaf})";
@Insert(INSERT_MENU)
@Results({
     @Result(property="levelId",column="LEVEL_ID")
})
public int insertMenu(HashMap<String, Object> params);

@Update("UPDATE MENUS SET NAME = #{name},PATH = #{path},
                       DESCRIPTION = #{description} where id=#{id}" )
public int updateMenu(HashMap<String,Object> params);

@Delete(DELETE_MENU)
public int deleteMenu(HashMap<String, Object> params)  throws
                                                                                             RuntimeSqlException;

@Select(GET_MENU_BY_ID)
public Menu getMenuById(String id);

@Select(LEAF_NODE)
public List<Menu> getLeafNodes(HashMap<String, Object> params);

@Select ("SELECT MNU.LEVEL_ID AS LEVELID
                         FROM MENUS MNU
                        WHERE MNU.ID = #{id} ")
public int getParentLevel(String id);
}


Java SQLBuilder Class

public class MenuSqlBuilder {

private final Log logger = LogFactory.getLog(getClass());

public String getAllTreeMenuSql (final HashMap<String,Object> params){
logger.debug("getAllTreeMenuSql ");

String sql = "  SELECT ID," +
    "         NAME," +
    "         PATH," +
    "         DESCRIPTION," +
    "         LEVEL_ID," +
    "         PARENT  " +
    "    FROM MENUS  " +
    "   START WITH PARENT IS NULL " +      
                     " CONNECT BY PRIOR  ID = PARENT " +          
                     "   ORDER SIBLINGS BY PARENT ASC, ID ASC";
return sql;
}

풀소스를 올리고 싶은데 적당한 싸이트가 없어서 아쉽습니다

Menu Domain Class


public class Menu {

private int     id;
private String  name;
private String  path;
private String  description;
private int     levelId;
private String  parent;
private boolean isLeaf;

        생략 .. getter and setter
}

MenuExt Class

public class MenuExt extends Menu {

private int rnum;
private int totcnt;
         생략 .. getter and setter
}


Oracle DB Schema


CREATE TABLE "SPRING"."MENUS"
  (
    "ID"          NUMBER NOT NULL ENABLE,
    "NAME"        VARCHAR2(50 BYTE) NOT NULL ENABLE,
    "PATH"        VARCHAR2(50 BYTE) NOT NULL ENABLE,
    "DESCRIPTION" VARCHAR2(50 BYTE),
    "LEVEL_ID"    NUMBER,
    "PARENT"      VARCHAR2(20 BYTE),
    "ISLEAF"      CHAR(1 BYTE) NOT NULL ENABLE,
    CONSTRAINT "MENUS_PK" PRIMARY KEY ("ID") USING INDEX PCTFREE 10 INITRANS 2
    MAXTRANS 255 COMPUTE STATISTICS STORAGE(INITIAL 65536 NEXT 1048576
    MINEXTENTS 1 MAXEXTENTS 2147483645 PCTINCREASE 0 FREELISTS 1 FREELIST
    GROUPS 1 BUFFER_POOL DEFAULT) TABLESPACE "USERS" ENABLE
  )
  PCTFREE 10 PCTUSED 40 INITRANS 1 MAXTRANS 255 NOCOMPRESS LOGGING
  STORAGE
  (
    INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
    PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT
  )
  TABLESPACE "USERS" ;
  CREATE OR REPLACE TRIGGER "SPRING"."MENU_ID_TRIGGER" before
  INSERT ON "SPRING"."MENUS" FOR EACH row
  BEGIN IF inserting THEN
               IF :NEW."ID" IS   NULL THEN
                  SELECT MENU_SEQUENCE.nextval INTO :NEW."ID" FROM dual;
               END IF;
            END IF;
  END;
/
ALTER TRIGGER "SPRING"."MENU_ID_TRIGGER" ENABLE;