'ASP.NET MVC/jquery'에 해당하는 글 2건

Jquery :: 2 .jqgrid 커스텀 버튼 생성후 다중 로우 값 저장

ASP.NET MVC/jquery 2018. 5. 12. 14:22


사내 관리자 페이지에서 자료를 보여줄떄 주로 JQgrid 를 이용하고있습니다 최근 클라이언트의 요구사항이 있었는데 


다중 선택을해서 일괄로 해당회원들을 승인을 해주고 싶다고 했다


크게 어려운문제가 아니고 기존 프로세스나 로직이 있으니 그걸 이용해서 만들게 됬다 


우선 해야될일은 그리드에 다중셀렉 기능을 추가를해주었다 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery("#GridMaster").jqGrid({
        url: ''       
datatype: 'json',
        mtype: 'POST',
        height: 500,
        rowNum: 0,
        hidegrid: false,
        rowList: [10, 20, 30],
        multiselect: false,
        altRows: true,
        altclass: 'EvenRowClass',
        colNames: [1, 2, 3, 4,],
        colModel: [
        { name: 'SEQ_NO', index: 'SEQ_NO', width: 80, sortable: false, align: 'center' },
        { name: 'NAME', index: 'NAME', width: 70, sortable: false, align: 'center' },
        { name: 'ORDER_CD', index: 'ORDER_CD', width: 1, sortable: false, align: 'center', hidden : true },
        { name: 'ORDER_SEQ', index: 'ORDER_SEQ', width: 1, sortable: false, align: 'center', hidden: true }
        ],
        viewrecords: true,
        multiselect: true
    });
cs



multi select : true // 다중셀을 선택할수있도록 해주는 옵션입니다


1
2
3
4
5
6
7
8
9
10
11
.navButtonAdd('#pageer1',{
  caption:"Confirm",
  title:"Confirm",
  id : "Confirm"
  buttonicon:"ui-icon-save",
  onClickButton: function(){
     SaveConfirm();
  },
  position:"last"
  })
 
cs


하단바에 Confirm 이라는 버튼을 생성해준후 버튼 클릭스 SaveConfirm()을 실행시켜준다



1
$("#GridMaster").getGridParam('selarrrow'); 
cs


그리드에서 체크된 row의 id값을 가져온다 .. 


그후 for 문을 이용해 선택된 row id 값만큼 돌려준후 AJAX 비동기 통신을 해준다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var JsonArray = new Array(); 
var Json = new Object();
 
Json.Name = "name";
Json.Count = 2 ;
 
JsonArray.push(Json);
 
Json.Name = "name_2";
Json.Count = 3 ;
 
JsonArray.push(Json);
 
cs

JsonArray 배열을 생성시켜준후 Object 에 값을 입력후 JSON으로 Controller 로 데이터를 보내줄생각이다 ( 위의 데이터는 예제)


JSON.stringify(Json); // JSON 형태로 데이터를 보내준다



1
2
3
4
5
6
7
8
9
10
11
12
13
public class temp_data
{
    public string Name {get;set;}
    public int Count {get;set;}
}
 
public ActionResult temp (List<temp_data> temp)
{
    foreach(var item in temp)
    {
        // save Logic
    }
} 
cs


Controller 에서 데이터를 받아줄때 List 형식으로 받아주었다 


Ajax 를 통해 전송된 데이터형식과 똑같은 클래스를 만들어 주고 List<> 형식으로 데이터를 받아준후 foreach 문을 돌려


save Logic 을 실행시켜준다 

'ASP.NET MVC > jquery' 카테고리의 다른 글

Jquery :: 1 .empty() 텍스트 비우기  (0) 2018.05.06
WRITTEN BY
내가달이다
,

Jquery :: 1 .empty() 텍스트 비우기

ASP.NET MVC/jquery 2018. 5. 6. 13:42


웹쪽을 이제 막 배우는 입장이다 보니 JQUERY 를 사용하다가 이해가 안되거나 한번더 다시 볼 필요가  있는 경우 에 포스팅을 해보려 합니다



회사에서 운영중인 모바일 페이지중 댓글을 infinite scroll 하는 작업이 추가가 되어서 partialview 를 이용해 infinite scroll 을 해주는 작업을 


구글신의 도움을 통해 구현을 다해서 테스트를 하는중 뜻하지 않는 버그(?) 가 발생했다


처음 로드시 스크롤을 통한 댓글들이 정상으로 보였는데  댓글을 추가할시 추가한댓글을 리스트에 다시 바인딩 될때 기존 바인딩되었던


데이터에 추가가 되어서 나오게된것이었다 즉,


1 ~ 10 번째 댓글 

11 ~ 20 번째 댓글

21 ~ 30 번째 댓글


이상태에서 댓글을 추가를 하면 


1 ~ 10 번째 댓글

11 ~ 20 번째 댓글

21 ~30 번째 댓글

1 ~ 10 번째 댓글

11 ~ 20 번째 댓글

21 ~30 번째 댓글

31 ~ 번쨰 댓글  

이런식으로 데이터가 출력이 되는걸 확인이 되었다 

그래서 이전에 있던 데이터를 어떻게 지우고 다시 바인딩데이터를 뿌리나 한참을 찾다가 찾아낸사실..

기존에 데이터를 바인딩을 할때는 

1
("#CommentList").append(htmlString);
cs


기존 데이터에 htmlString 을 append 시켜주는 식으로 추가를 해주었다 댓글이 추가 되거나 삭제 되었을때의 상황을 생각을 못하고


무작정 스택오버플로우의 코드를 복사를 하니 이런일이...


1
("#CommentList").empty().append(htmlString);
cs


그래서 찾아낸 방법이 jqery 메서드중에 .empty() 라는 메서드가 있는데


DOM 에 조건이 일치하는 요소들의 자식들을 제거를 한다 


기존 <div id= "CommentList">  에 바인딩 되어있는 데이터를 제거를 한후 다시 htmlString 을 바인딩 시키는 작업을 한다 


'ASP.NET MVC > jquery' 카테고리의 다른 글

Jquery :: 2 .jqgrid 커스텀 버튼 생성후 다중 로우 값 저장  (0) 2018.05.12
WRITTEN BY
내가달이다
,